1,动画的基本使用
动画(animation)是CSS3中具有颠覆性的特征之一,可通过多个节点来精确控制一个或一组动画,常用来实现赋值的动画效果
相比较过渡,动画可以实现更多变化、控制、连续自动播放等效果
制作动画分为两步:
1,先定义动画
2,再使用(调用)动画
1,用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width200px;
}
}
from 和 to等价于 0% 和100%
2,元素使用动画
div{
width:20px;
height:200px;
background-color:pink;
调用动画
animation-name:动画名称;
持续时间
animation-duration:持续时间;
}
3, 动画序列:
1,可以做多个状态的变化 keyframe 关键帧
2,里面的百分比要是整数
3,里面的百分比就是总时间的划分
2,动画属性
animation-name:move; 动画名称
animation-duration:2s; 持续时间
animation-timing-function:ease; 运动曲线
animation-delay:0s; 何时开始
animation-iteration-count:0; 重复次数(infinite无穷)
animation-direction:normal; 是否反方向播放(alternate反方向)
animation-fill-mode:backwards(回到起始 ); 动画结束后的状态 forwards 停留在结束
animation-play-state:running; 鼠标经过动画是否在运行或暂停 paused(暂停)
速度曲线 animation-timing-function细节:
ease 默认,动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
linear 动画从头到尾的速度是相同的。匀速
steps() 指定了时间函数中的间隔数量(步长)
3,动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
animation:name duration timing-function delay iteration-count direction fill-mode;
animation:move 5s ease 2s infinite alternate ;
简写属性里面不包括animation-play-state,常和鼠标经过等其他配合使用