动画animation

动画

确定产生动画效果的帧名
- animation-name
定义关键帧名
- animation-name：<single-animation-name> [',' <single-animation-name>]* <single-animation-name> = none | <IDENT>
animation-name:none;
animation-name:abc;
animation-name:abd,abdck;
可以实现帧动画

animation-duration

定义动画执行的时间

• animation-duration:<time> [, <time>]*
  animation-duration:0s;不执行动画

animation-timing-function

可已改变运动轨迹中的某些位置的速度
- animation-timing-function:<single-timing-function> [, <single-timing-function>] *
- <single-timing-function> = <single-transiton-timing-function>

animation-timing-function:ease;//两头慢中间快
animation-timing-function:cubic-bezier(0.25,0.2,0.25,1);
animation-timing-function:linear;//匀速
animation-timing-function:cubic-bezier(0,0,1,1);

animation-iteration-count

确定执行动画的次数，默认值为1；

animation-iteration-count:1;//动画执行一次；
animation-iteration-count:infinite;//动画无限循环；

animation-direction

定义动画运动方向

animation-direction:<single-animation-direction> [',' <single-animation-direction>]*
<single-animation-direction> = normal | reverse |alternate | alternate-reverse

single-animation-direction的值为：
normal—-正常方向
reverse—-和定义的相反方向执行
alternate——往返执行
alternate-reverse——-相反方向往返执行；

animation-play-state

动画播放状态设置，比如暂停，播放
默认值为播放状态：running

animation-play-state:<single-animation-play-state> [',' <single-animation-play-state>]*

 - <single-animation-play-state> = running | paused
比如：
animation-play-state:running;
animation-play-state:paused;
animation-play-state:running, paused;//   

animation-delay

动画延时设置

animation-delay:<time> [',' <time>]*
比如：
animation-delay:0s;
animation-delay:1s;
animation-delay:1s,2s,3s;

animation-fill-mode

动画开始或结束的时候帧的状态

animation-fill-mode:<single-animation-fill-mode> [',' <single-animation-fill-mode>]*

<single-animation-fill-mode> = none | backwards |forwards | both;

none:不做设置
backwards:开始的时候保持动画第一帧的状态
forwards:结束的时候保持动画最后一帧的状态
both:两者兼有；

animation语法简写

animation:<single-animation> [',' <single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

@keyframes

关键帧设置

@keyframes abc{
    from{opacity:1;height:100px;}//第一帧
}   to{opacity:0.5; height:200px;｝//最后一帧

@keyframes abc{
    0%{}//第一帧
    100%{}//最后一帧
}

@keyframes abc{
    0%,50%,100%{opacity:0.5;}
    25%,75%{opacity:0;}//帧按照百分的话，此列中有5帧。
}

调用帧：使用animation

animation:abc 0.5s both;//使用了abc关键帧的定义
animation:flash 0.5s both;
animation:abc 0.5s both, flash 0.5s both;//两个关键帧都有使用