[关闭]
@guoxs 2015-06-20T07:28:25.000000Z 字数 3804 阅读 2143

CSS 动画

CSS


transition-property(过渡)

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

transition-duration(过渡时间)

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

transition-timing-function

  1. transition-timing-function:<single-transition-timing-function>[','<single-transition-timing-function>]*
  2. <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]]?)(步数)
  3. transition-timing-function:ease;两头慢中间快
  4. transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);等价ease;
  5. transition-timing-function:linear;
  6. transition-timing-function:cubic-bezier(0,0,1,1);等价linear;
  7. transition-timing-function:ease,linear;

transition-delay 延时

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

transition

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

animation-name

  1. animation-name:<single-animation-name>[',' <single-animation-name>]*
  2. <single-animation-name> = none|<INDEX>
  3. animation-name:none;
  4. animation-name:abc;
  5. animation-name:abc,abcd;
  6. 动画标记

animation-duration

  1. animation-duration:<time>[,<time>]*
  2. animation-duration:0s;不执行动画
  3. animation-duration:1s;

animation-timing-function

  1. animation-timing-function:<single-timing-function>[','<single-timing-function>]*
  2. <single-timing-function> = <single-transition-timing-function>
  3. animation-timing-function:ease;两头慢中间快
  4. animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);等价ease;
  5. animation-timing-function:linear;
  6. animation-timing-function:cubic-bezier(0,0,1,1);等价linear;
  7. animation-timing-function:ease,linear;

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

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

animation-direction

  1. animation-direction:<single-animation-direction>[','<single-animation-direction>]*
  2. <single-animation-direction> = normal(正向)|reverse(反向)|alternate(往返)|alternate-reverse(反向往返)
  3. animation-directionreverse;

animation-play-state

  1. animation-play-state:<single-animation-play-state>[','<single-animation-play-state>]*
  2. <single-animation-play-state> = running|paused
  3. animation-play-state:running;
  4. animation-play-state:paused;
  5. animation-play-state:running,paused;
  6. 控制动画运行与停止

animation-delay

  1. animation-delay:<time>[,<time>]*
  2. animation-delay:1s;
  3. animation-delay:2s;
  4. animation-delay:1s,2s,3s;

animation-fill-mode()

  1. animation-fill-mode:<single-animation-fill-mode>[','<single-animation-fill-mode>]*
  2. <single-animation-fill-mode> = none(不做设置,开始时保持第一帧状态)|backwards(开始时保持第一帧状态)|forwards(结束时保持最后一帧状态)|both
  3. animation-fill-mode:none;
  4. animation-fill-mode:forwards;
  5. animation-fill-mode:forwards,backwards;

animation

  1. animation:<single-animation>[','<single-animation>]*
  2. <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>
  3. animation:none;
  4. animition:abc 2s ease 0s 1 normal none running;
  5. animation:abc 2s;
  6. animition:abc 1s 2s both, abcd 2s both;

@keyframes

  1. @keyframes abc{
  2. from{opacity:1;height:100px;}
  3. to{opacity:0,5;height:200px;}
  4. }
  5. @keyframes abc{
  6. 0%{opacity:1;height:100px;}
  7. 100%{opacity:0,5;height:200px;}
  8. }
  9. @keyframes flash{
  10. 0%,50%,100%{opacity:1;}
  11. 25%,75%{opacity:0;}
  12. }闪烁效果
  13. 使用:
  14. animationabc 0.5s both,flash 0.5s both;
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注