动画（animation）

二.动画

注意: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%