CSS 动画

CSS

---

transition-property（过渡）

transition-property:none|<sigle-transition-property>[','<sigle-transition-property>]*
<sigle-transition-property> = all|<INDEX>
sigle-transition-property:none; 瞬间变化
sigle-transition-property:all; 所有属性都过渡。
sigle-transition-property:color; 颜色过渡。

transition-duration(过渡时间)

transition-duration:<time>[,<time>]*
transition-duration:0s; 无动画。
transition-duration:1s;

transition-timing-function

transition-timing-function:<single-transition-timing-function>[','<single-transition-timing-function>]*
<single-transition-timing-function> = ease(慢进慢出)|linear（匀速）|ease-in（慢进）|ease-out（慢出）|ease-in-out（慢进慢出，幅度比ease大）|cubic-bezier(<number>,<number>，<number>,<number>)（自定义函数，确定贝塞尔曲线四点坐标）|step-start|step-end|steps(<integer>[,[start(这步开始进行变化)|end]]?)(步数)
transition-timing-function:ease;两头慢中间快
transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);等价ease;
transition-timing-function:linear;
transition-timing-function:cubic-bezier(0,0,1,1);等价linear;
transition-timing-function:ease,linear;

transition-delay 延时

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

transition

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

animation-name

animation-name:<single-animation-name>[',' <single-animation-name>]*
<single-animation-name> = none|<INDEX>
animation-name:none;
animation-name:abc;
animation-name:abc,abcd;
动画标记

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-timing-function:ease;两头慢中间快
animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);等价ease;
animation-timing-function:linear;
animation-timing-function:cubic-bezier(0,0,1,1);等价linear;
animation-timing-function:ease,linear;

animation-iteration-count(动画执行次数)

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

animation-direction

animation-direction:<single-animation-direction>[','<single-animation-direction>]*
<single-animation-direction> = normal(正向)|reverse（反向）|alternate（往返）|alternate-reverse（反向往返）
animation-direction：reverse;

animation-play-state

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:1s;
animation-delay:2s;
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
animation-fill-mode:none;
animation-fill-mode:forwards;
animation-fill-mode:forwards,backwards;

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>
animation:none;
animition:abc 2s ease 0s 1 normal none running;
animation:abc 2s;
animition:abc 1s 2s both, abcd 2s both;

@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：abc 0.5s both,flash 0.5s both;