49. CSS3 animation-timing-function属性设置动画播放方式
animation-timing-function
属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。
语法规则:
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
它和transition
中的transition-timing-function
一样,具有以下几种变换方式:ease
、ease-in
、ease-in-out
、ease-out
、linear
和cubic-bezier
。对应功能如下:
在调用 move 动画播放中,让元素样式从初始状态到终止状态时,先加速再减速,也就是渐显渐隐效果。
实例演示:
让元素样式从初始状态到终止状态时,逐渐变慢。
HTML 代码:
<div><span></span></div>
CSS 代码:
@keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:.1s; animation-iteration-count:infinite; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 49. CSS3 animation-timing-function属性设置动画播放方式
码云笔记 » 49. CSS3 animation-timing-function属性设置动画播放方式