javascript - 仅在 CSS3 中解决 jQuery 动画

Question

这是 jQuery 中的小提琴动画。

考虑到图像的不同高度，如何仅使用 CSS 来实现？

的HTML：

<div class="container">
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg"/>
</div>

CSS：

.container {
  position:relative;
  width:1100px;
  height:480px;
  overflow:hidden;
  background-color:#000;
}
.image {
  position:absolute;
  max-width:100%;
  min-width:100%;

}

jQuery：

$(document).ready(function () {
  move();
});

function move() {
    $img = $(".image");
    diff = $img.height()-$img.parent().height(); 
    speed = diff * 50;
    $img.animate({
    bottom: -diff
    }, speed, 'linear', function(){
    $(this).animate({bottom:0}, speed, 'linear', move);   
    });
}

Answer 1

看到这个答案：左侧 -> 右侧和顶部 -> 底部位置之间的 CSS 过渡

结合你的小提琴，给你：http: //jsfiddle.net/3n1gm4/dvqfs/

@-webkit-keyframes pan {
    0% {
        -webkit-transform: translate(0%,0%);
    }
    100% {
        top: 100%;
        -webkit-transform: translate(0%,-100%);
    }
}

.container {
    position:relative;
    width:1100px;
    height:480px;
    overflow:hidden;
    background-color:#000;
}
.image {
    position:absolute;
    top: 0;
    max-width:100%;
    min-width:100%;
    -webkit-animation: pan 3s alternate infinite linear;
}