二.动画
注意:animation必须与@keyframes一起使用
动画帧 @keyframes
@keyframeanimationname{
keyframes-selector{css-styles}
keyframes-selector{css-styles}
}
animationname animation的名称
keyframes-selector 动画时间百分比
css-styles 一个或多个合法的css样式属性
@keyframes run{
0%{width:0px,background:red;}
100%{width:50px,background:green;}
}
动画属性
animation-name 动画名称
animation-duration 动画执行时间
animation-delay 动画效果延迟时间
animation-timing-function 动画速度曲线1). linear 匀速2). ease 慢块慢(默认)3). ease-in 慢入4). ease-out 慢出5). ease-in-out 慢入慢出6). cubic-bezier
animation-iteration-count 动画执行循环次数1) infinite 无限循环2) 默认1次
animation-direction 动画是否反响运动1) normal 默认 正常方向2) reverse 反方向运动3) alternate 动画先正后反方向运行4) alternate-reverse 先反后正方向运行
animation-play-state 动画执行状态1) running 运动,默认2) paused 暂停
animation-fill-mode 动画对象时间之外的状态1) none 默认 原始状态>动画>原始状态2) forwards 原始状态>动画>停在动画帧100%3) backwards (忽略原始状态)进入动画帧0%>动画>原始状态4) both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%
