动画
@keyframes
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
实例:
/*设置动画*/
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
/*调用动画*/
div
{
animation:myfirst 5s;
}
设置动画渐变方式可以使用from…to,等同于0%…100%,或者设置多个百分节点。
如下:
@keyframes myfirst
{
0%{color:#fff}
25%{color:#ff0000}
50%{color:#ff5200}
100%{color:#000}
}
@keyframes规则和动画属性
animation所有动画属性的简写
animation-name
规定 @keyframes 动画的名称。
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。值可以设置2s表示2秒
animation-timing-function
规定动画的速度曲线。默认是 “ease”。
有以下值:
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始,然后加快,在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-fill-mode
规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-delay
规定动画何时开始。默认是 0。比如设置2s,表示2s后再开始执行动画。可以设置负数,比如设置-2s表示跳过2秒进入动画周期。
animation-iteration-count
规定动画被播放的次数。默认是 1,表示播放一次,如果需要设置永久循环可以设置infinite
animation-direction
规定动画是否在下一周期逆向地播放。默认是 “normal”。
有如下属性值:
normal默认值,动画按正常播放。
reverse动画反向播放。
alternate动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
alternate-reverse动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。
animation-play-state
规定动画是否正在运行或暂停。默认是 “running”。注意:在JavaScript中使用此属性在一个周期中暂停动画。
有如下属性值:
paused指定暂停动画
running指定正在运行的动画
例如:
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
/*等同于*/
div{
animation: myfirst 5s linear 2s infinite alternate;
}