我想要具有以下要求的css3动画,如果有人分享他/她的经验会很棒
我有三张图
image1.jpg:这将从底部开始动画,(image2.jpg 和 image3.jpg 应该隐藏)
image2.jpg:一旦 image1.jpg 加载,这将出现在舞台上(image3.jpg 应该隐藏)
image3.jpg:这是在 image2.jpg 之后出现的最后一张图片
感谢您的帮助
我想要具有以下要求的css3动画,如果有人分享他/她的经验会很棒
我有三张图
image1.jpg:这将从底部开始动画,(image2.jpg 和 image3.jpg 应该隐藏)
image2.jpg:一旦 image1.jpg 加载,这将出现在舞台上(image3.jpg 应该隐藏)
image3.jpg:这是在 image2.jpg 之后出现的最后一张图片
感谢您的帮助
像这样的东西?http://jsfiddle.net/2hSqz/3/
下面是一个动画示例:
div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; }
@keyframes myfirst { from {background: red;} to {background: yellow;} }
为每个浏览器优化它会很棒,比如
我不明白你想要什么,但我正在努力帮助你,也许你想要这样。
<style>
@keyframes move
{
from{top:100%}
to{top:0}
}
@keyframes visible
{
from{opacity:0}
to{opacity:1}
}
#img1{animation:move 5s; position:relative;}
#img2{animation:visible both 3s; animation-delay:5s; opacity:0;}
#img3{animation:visible both 3s; animation-delay:8s; opacity:0;}
</style>
希望这是你想要的!