CSS3动画——animation
2019-08-14 09:53:15来源:博客园 阅读 ()
可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张
animation属性值
1.animation-name
对象的动画名称,以便后续设置动画属性时使用
默认为none,如果设置的话即为要设置动画的关键帧的名字
后续对该元素设置动画时,要用@keyframes,设置起始的样式(from)和终止的样式(to)
2.animation-duration
动画持续的时间(播放完成所花时间)
默认值为0,可设置单位为秒(s)或毫秒(ms)
3.animation-timing-function
动画的过度方式
常用的有:linear(线性过渡)、ease(平滑过渡)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)
如有复杂需求,要设置贝塞尔曲线(cubic-bezier(数值1,数值2,数值3,数值4)),其中四个数值范围为0-1
4.animation-delay
动画开始前等待时间(该时间不包括在动画放映时间内)
默认值为0,可设置单位为秒(s)或毫秒(ms),如设置负值则立即开始动画
注:设置的时间带有小数点时,建议省去整数部分,如0.5写成.5
5.animation-interation-count
动画循环次数
值为数字,默认为1,也可设置infinite(无限循环)
6.ainmation-direction
动画循环时的方向
可设置的值有:none(保留原有样式,默认值)、reverse(反向)、alternate(先正常再反向并交替进行)、alternate-reverse(先反向再正常并交替进行)
其中alternate和alternate-reverse必须在循环次数不为1时才生效
7.animation-fill-mode
动画不播放(已经放完/有延迟没播放)时的元素样式
可设置的值有:none(没有样式,默认值)、forwards(结束时状态)、backwards(开始时状态)、both(同时设置开始和结束时状态)
8.animation-play-state
动画状态,即播放/暂停
可设置的值有:running(播放,默认值)、pause(暂停)
9.animation的简写
其中必须设置name和duration
解析时,默认把第一个字符串属性值解析为name,第一个带有时间的属性值解析为duration,之后一个带有时间的属性值解析为delay
/*按照每个元素来写的动画属性*/
1 div{ 2 width:100px;height:100px; 3 animation-name:outside; 4 animation-duration:2s; 5 animation-timing-function:linear; 6 animation-delay:1s; 7 animation-iteration-count:infinite; 8 animation-direction:alternate-reverse; 9 animation-fill-mode:forwards; 10 animation-play-state:pause; 11 } 12 @keyframes outside{ 13 from{transform:translateY(0px);} 14 to{transform:translateY(1000px);} 15 }
keyframes
通过控制关键帧来改变动画的播放效果,对手机端必须加上-webkit-
其中0%和100%可用from和to代替
1 div{ 2 width:100px;height:100px;background:black; 3 animation:here 5s linear infinite alternate-reverse; 4 } 5 @-webkit-keyframes here{ 6 0% {capacity:0;} 7 25% {capacity:0.25;} 8 50% {capacity:0.5;} 9 75% {capacity:0.75;} 10 100% {capacity:1;} 11 }
原文链接:https://www.cnblogs.com/shige720/p/11268555.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:html中a标签的4个伪类样式
下一篇:UI设计中,文本底部添加下换线
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 6.动画 2020-05-24
- 2.CSS3选择器 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash