CSS3 动画（关键帧动画）

Posted 2023-02-19

【中文标题】CSS3 动画（关键帧动画）

【英文标题】：CSS3 Animation (keyframe Animation)

【发布时间】：2012-12-22 00:09:04

【问题描述】：

我想要具有以下要求的 css3 动画如果有人分享他/她的经验会很棒

我有三张图片

image1.jpg：这将从底部开始动画，（image2.jpg和image3.jpg应该被隐藏）

image2.jpg：一旦加载了image1.jpg，它就会出现在舞台上（image3.jpg应该被隐藏）

image3.jpg：这是在image2.jpg之后出现的最后一张图片

谢谢你的帮助

【参考方案1】：

我不明白你想要什么，但我正在努力帮助你，也许你想要这样。

<style>
            @keyframes move
            
                fromtop:100%
                totop:0
            
            @keyframes visible
            
                fromopacity:0
                toopacity:1
            
            #img1animation:move 5s; position:relative;
            #img2animation:visible both 3s; animation-delay:5s; opacity:0;
            #img3animation:visible both 3s; animation-delay:8s; opacity:0;

        </style>

希望这是你想要的！

【讨论】：

不要忘记将这些 id(img1,img2,img3) 添加到您的元素中。

【参考方案2】：

这样的？ 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; 

为每个浏览器优化它会很棒

【讨论】：

这看起来不错，但我希望每张图片都应该留在舞台上，而不必淡出。