CSS3两个动画顺序衔接播放
2015-08-11 17:10
661 查看
问题描述:
第一个动画先播放,播放完成后,第二个动画紧接着播放。
解决办法:
1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration );
2. 多个动画应用时用逗号分隔开;
此时,CSS3的动画代码就要分开写了,不能再简写了,诸如animation:rotate-back 10000ms linear infinite这样的简写就是不行的,因为在同一代码中要加入两个动画,代码如下:
第一个动画先播放,播放完成后,第二个动画紧接着播放。
解决办法:
1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration );
2. 多个动画应用时用逗号分隔开;
此时,CSS3的动画代码就要分开写了,不能再简写了,诸如animation:rotate-back 10000ms linear infinite这样的简写就是不行的,因为在同一代码中要加入两个动画,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{background:#666;} img { position:absolute;left:200px;top:100px; animation-name:myfirst, rotate-back; animation-duration:1000ms, 10000ms; animation-timing-function:linear, linear; animation-delay:0, 1000ms; animation-iteration-count:1, infinite; animation-fill-mode:forwards, none; -moz-animation-name:myfirst, rotate-back; -moz-animation-duration:1000ms, 10000ms; -moz-animation-timing-function:linear, linear; -moz-animation-delay:0, 1000ms; -moz-animation-iteration-count:1, infinite; -moz-animation-fill-mode:forwards, none; -ms-animation-name:myfirst, rotate-back; -ms-animation-duration:1000ms, 10000ms; -ms-animation-timing-function:linear, linear; -ms-animation-delay:0, 1000ms; -ms-animation-iteration-count:1, infinite; -ms-animation-fill-mode:forwards, none; -o-animation-name:myfirst, rotate-back; -o-animation-duration:1000ms, 10000ms; -o-animation-timing-function:linear, linear; -o-animation-delay:0, 1000ms; -o-animation-iteration-count:1, infinite; -o-animation-fill-mode:forwards, none; -webkit-animation-name:myfirst, rotate-back; -webkit-animation-duration:1000ms, 10000ms; -webkit-animation-timing-function:linear, linear; -webkit-animation-delay:0, 1000ms; -webkit-animation-iteration-count:1, infinite; -webkit-animation-fill-mode:forwards, none; } /*myfirst*/ @keyframes myfirst { from {top:-50px;} to {top:100px;} } @-moz-keyframes myfirst { from {top:-70px;} to {top:100px;} } @-webkit-keyframes myfirst { from {top:-300px;} to {top:100px;} } @-ms-keyframes myfirst { from {top:-300px;} to {top:100px;} } @-o-keyframes myfirst { from {top:-300px;} to {top:100px;} } /*rotate-back*/ @keyframes rotate-back { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes rotate-back { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes rotate-back { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ms-keyframes rotate-back { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes rotate-back { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(-360deg); transform: rotate(-360deg); } } </style> </head> <body> <img src="images/s_star.png" alt="" class="s_star"> </body> </html>
相关文章推荐
- CSS单位和值
- CSS代码缩写
- CSS布局模型
- CSS实现兼容性的渐变背景(gradient)效果
- 用HTML和css写的界面适应手机界面小结
- 页面仔玩样式
- CSS Display属性与盒模型
- 弹窗之背景模糊效果
- [css3]background-size属性
- css+js 版本的二级二级联动选择菜单
- 使用UL LI进行列表是height:100%造成的IE兼容模式与极速模式显示样式
- JS+CSS实现美化的下拉列表框效果
- Web编程 > HTML/WML/CSS兼容/XML > 如何强制360浏览器以极速模式打开页面
- css3动画简介以及动画库animate.css的使用
- javafx style and cssFile
- Css网页样式设计
- CSS - Transform(Translate) abnormal shadow in firefox
- 理解CSS中的BFC(块级可视化上下文)[译]
- CSS基本选择器和优先级
- JS+CSS实现Div弹出窗口同时背景变暗的方法