Animation(动画)
人类具有视觉暂留的特性,人的眼睛在看到一幅画或一个物体后,在0.34秒内不会消失。
动画原理:
通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅,利用视觉暂留的原理,在一幅画还没有消失前,播放下一幅画。就会给人造成一种流畅的视觉变化效果。
css3动画
使元素从一种样式逐渐变化为另一种样式的效果
animation属性是一个简写属性形式: (可以用来描述可动画的属性)
可动画属性的列表:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
简写属性animation
animation:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
在每个动画定义中,顺序很重要:
可以被解析为 <time>的第一个值被分配给animation-duration,
第二个分配给 animation-delay。
关键帧(@keyframes)
语法:
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
animiationName:必写项,定义动画的名称
keyframes-selector:必写项,动画持续时间的百分比
from:0%
to:100%
css-style:css声明
animation-name
指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列
值:
none
特殊关键字,表示无关键帧。
keyframename
标识动画的字符串
animation-duration
指定一个动画周期的时长。
默认值为0s,表示无动画。
值:
一个动画周期的时长,单位为秒(s)或者毫秒(ms),**无单位值无效**。<br>
注意:负值无效,浏览器会忽略该声明,但是一些早起的带前缀的声明会将负值当作0s
animation-timing-function
定义CSS动画在每一动画周期中执行的节奏。
对于关键帧动画来说,timing function作用于一个关键帧周期而非整个动画周期,即从关键帧开始,到关键帧结束。
动画的默认效果:由慢变快再变慢
值:
linear:线性过渡,等同于贝塞尔曲线(0,0,1,1)
ease:平滑过渡,等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快,等同于贝塞尔曲线(0.42,0,1,1)
ease-out:由快到慢,等同于贝塞尔曲线(0,0,0.58,1)
ease-in-out:由慢到快再到慢,等同于贝塞尔曲线(0.42,0,0.58,1)
cubic-bezier(1,1,2,3)
steps(n,[start|end])
传入一到两个参数,第一个参数意思是把动画分成 n 等分,然后动画就会平均地运行。
第二个参数 start 表示从动画的开头开始运行,相反,end 就表示从动画的结尾开始运行,
默认值为 end。
animation-delay
定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)
值:<time>
从动画样式应用到元素上到元素开始执行动画的时间差。
该值可用单位为秒(s)和毫秒(m s)。**如果未设置单位,定义无效**
animation-iteration-count
定义动画执行的次数(属于动画内的范畴)
值:
infinite
无限循环播放动画.
<number>
动画播放的次数 不可为负值.
animation-direction
定义动画执行的方向
值:
normal
每个循环内动画向前循环,换言之,每个动画循环结束,
动画重置到起点重新开始,这是默认属性。
alternate
动画交替反向运行,反向运行时,动画按步后退,
同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。
计数取决于开始时是奇数迭代还是偶数迭 代
reverse
反向运行动画,每周期结束动画由尾到头运行。
alternate-reverse
反向交替, 反向开始交替
animation-fill-mode
属于动画外的范畴,定义动画在动画外的状态
animation-fill-mode: none || backwards || forwards || both
管理所有动画外的状态!
什么是动画外的状态
from之前
animation-delay
to之后
值:
none : 动画外的状态保持在动画之前的位置
backwards :from之前的状态与from的状态保持一致
forwards :to之后的状态与to的状态保持一致
both :动画外的状态与from和to的状态保持一致
animation-play-state
定义了动画执行的运行和暂停
值
running
当前动画正在运行。
paused
当前动画以被停止。