css3中的动画学习分享
标签:doctype lazy char 计数 utf-8 https ext nat tle
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation)。
css3动画:
使元素从一种样式逐渐变化为另一种样式的效果。
动画原理:通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅,利用视觉暂留的原理,在一幅画还没有消失前,播放下一幅画。就会给人造成一种流畅的视觉变化效果。
animation属性是一个简写属性形式: (可以用来描述可动画的属性)
可动画属性的列表:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Css3的动画中,我们不得不提到关键帧(@keyframes)
语法:
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
animiationName:必写项,定义动画的名称
keyframes-selector:必写项,可以是关键帧form(0%)和to(100%)可以是百分比,代表的是时间的百分比(时间点)
from:0%
to:100%
css-style:css声明
animation:
animation-name属性指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列
值: none特殊关键字,表示无关键帧。
keyframename标识动画的字符串
animation-duration属性指定一个动画周期的时长。
默认值为0s,表示无动画。
值:一个动画周期的时长,单位为秒(s)或者毫秒(ms),无单位值无效。注意:负值无效,浏览器会忽略该声明,但是一些早起的带前缀的声明会将负值当作0s
animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。对于关键帧动画来说,timing function作用于一个关键帧周期而非整个动画周期,即从关键帧开始,到关键帧结束。
动画的默认效果:由慢变快再变慢
animation-delay定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)
值:从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m s)。如果未设置单位,定义无效
animation-iteration-count定义了动画执行的次数(属于动画内的范畴)
值:infinite无限循环播放动画.
动画播放的次数 不可为负值.
animation-direction定义了动画执行的方向
值:normal 每个循环内动画向前循环,换言之,每个动画循环结束,动画重置到起点重新开始,这是默认属性。
alternate动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse 反向运行动画,每周期结束动画由尾到头运行。
alternate-reverse反向交替,反向开始交替
animation-fill-mode属于动画外的范畴,定义动画在动画外的状态
值:backwards:from之前的状态与form的状态保持一致
forwards:to之后的状态与to的状态保持一致
botn:backwards+forwards
animation-play-state定义了动画执行的运行和暂停
值:running当前动画正在运行。
paused当前动画以被停止。
注意:在每个动画定义中,顺序很重要:可以被解析为 的第一个值被分配给animation-duration, 第二个分配给 animation-delay。
最后,我们通过一张动画帧图制作一个简易动画,原图如下:
CSS3动画效果图如下:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #test{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); width: 146px; height: 244px; background: url(test.png) no-repeat; background-position:0 0; animation: move 1s steps(7,end) infinite ; } @keyframes move{ from{ background-position: 0 0; } to{ background-position:-1024px 0; } } </style> </head> <body> <div id="test"> </div> </body> </html>
好了,今天的分享就到这里,当然,可能存在些许错误望大家海涵并在评论区多多指正交流,谢谢大家花费时间阅览!
标签:doctype lazy char 计数 utf-8 https ext nat tle
原文地址:https://www.cnblogs.com/demosoftware/p/14551852.html