CSS动画效果

transition-property

transition-property:none|<single-transition-property>[','<single-transition-property>]*
<single-transition-property>=all|<IDENT>
transition-property:none;默认没有过渡效果
transition-property:all;所有属性都有过渡效果
transition-property:left;
transition-property:left,color;

transition-duration 过渡效果执行时间

transition-duration:<time>[,<time>]*
transition-duration:0s;
transition-duration:1s;
transition-duration:1s,2s,3s;

transition-timing-function

transition-timing-function:<single-transition-timing-function>[','<single-transition-timing-function>]*
<single-tansition-timing-function>=ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)|
step-start|step-end|
steps(<integer>[,[start|end]]?)
ease两头慢中间快
linear线性 匀速
ease-in开始慢
ease-out结束慢
transition-timing-function：ease;
transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);
transition-timing-function:linear;
transition-timing-function:cubic-bezier(0,0,1,1);
transition-timing-function:ease,linear;

transition-delay 动画延时

transition-delay:<time>[,<time>]*
transition-delay:1s;

transition

transition:<single-transition>[','<single-transition>]*
<single-transition>=[none|<single-transition-property>]||
<time>||<single-transition-timing-function>||<time>
transition:2s;duration

transition与animation的区别：
1.transition需要触发，animation自动触发的
2.animation可以做多帧动画

关键帧

animation-name

animation-name:<single-animation-name>[',' <single-animation-name>]*
<single-animation-name> = none| <IDENT>

animation-duration

animation-duration:<time>[,<time>]*
animation-duration:0s;
animation-duration:1s;

animation-timing-function

animation-timing-function:<single-timing-function>[',' ,<single-timing-function>]*
<single-timing-function> = <single-transition-timing-function>

animation-iteration-count 执行次数

animation-iteration-count:<single-animation-iteration-count>[',' <single-animation-iteration-count>]*
<single-animation-iteration-count> = infinite|<number>

animation-direction动画执行方向

animation-direction:<single-animation-direction>[',' <single-animtion-direction>]*
<single-animation-direction> =normal|reverse|alternate|alternate-reverse
alternate往返动画

animation-play-state

animation-play-state:<single-animation-play-state>[',' <single-animation-play-state>]*
<single-animation-play-state> = running|paused

animation-delay

animation-delay:<time>[,<time>]*

animation-fill-mode

动画在开始的时候是否要保持第一帧的状态，动画在结束的时候是否要保持最后一帧的状态
animation-fill-mode:<single-animation-fill-mode>[',' <single-animation-fill-mode>]*
<single-animation-fill-mode> = none|backwards|forwards|both
animation-fill-mode:backwards;开始的时候保持第一帧的状态
animation-fill-mode:forwards,backwards;
animation-fill-mode: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%{opacity:1;height:100px;}
100%{opacity:0.5;height:200px;}
}
@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
animation:flash 0.5s both;