animation 属性目前还存在浏览器兼容性问题,建议使用 PostCSS 或手动添加浏览器前缀。本文学习使用 animation 属性创建简单动画。
animation 是复合属性,其子属性有:
(1) animation-delay 动画延时 (2) animation-direction 动画在每次运行完后是反向运行还是重新回到开始位置重复运行 (3) animation-duration 动画一个周期的时长 (4) animation-iteration-count 动画重复次数,infinite无限次重复动画 (5) animation-name 指定由 @keyframes (6) animation-timing-function 设置动画速度曲线,默认是 “ease” (7) animation-fill-mode 指定动画执行后跳回到初始状态还是保留在结束状态 此外,还有 animation-play-state 属性,但是不能简写到 animation 属性中,该属性允许暂停和恢复动画。
基本语法
animation-name: first_animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* 简写 */
animation: first_animation 5s linear 2s infinite alternate;
animation: name duration timing-function delay iteration-count direction;
@keyframes 用于规定动画如何从一种样式逐渐变化为另一种样式,其基本用法如下:
@keyframes first_animation {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@keyframes first_animation {
from {background: red;}
50% { background: orange }
to {background: yellow;}
}
关键词 “from” 和 “to”,等同于 0% 和 100%,表示动画开始状态和结束状态。中间状态由浏览器自动推算。
animation-iteration-count 指定动画播放的次数,默认值为 1。可以指定具体的次数,也可以使用关键字 infinite 让动画无限次播放。
animation-name: first_animation;
animation-duration: 5s;
animation-iteration-count: 1;
/* 等同于 */
animation: first_animation 5s infinite;
animation-fill-mode 指定动画执行后跳回到初始状态还是保留在结束状态。
animation-fill-mode : none | forwards | backwards | both;
none: 不改变默认行为 forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义) backwards:让动画回到第一帧的状态(在第一个关键帧中定义) both:根据 animation-direction 轮流应用 forwards 和 backwards 规则
animation-direction 指定对象动画运动的方向,有以下四种取值:
normal:正常方向,默认 reverse:动画反向运行,方向始终与normal相反 alternate:动画会循环正反方向交替运动 alternate-reverse:动画从反向开始,再正反方向交替运动
animation-play-state 用于手动控制动画的状态,有 paused 和 running 两种取值:
running:默认值,表示动画正常运动 paused:表示暂停动画