动画

动画

动画示例代码

transition

过度动画

其为众多 <single-transition> 的值缩写。（当两个时间同时出现是，第一个时间为动画长度，第二个时间为动画延时）

  2. transition: <single-transition> [',' <single-transition>]*
  4. <single-transition> = [none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time>
  7. transition: none;
  8. transition: left 2s ease 1s, color 2s;
  9. transition: 2s;
transition-property
  2. transition-property: none | <single-traisition-property> [ ',' <single-transition-property>]*
  4. <single-transition-property> = all | <IDENT>
  6. transition-property: none;
  7. <!-- 默认值为 none -->
  8. transition-property: all;
  9. transition-property: left;
  10. transition-property: left, color;
transition-duration
  2. transition-duration: <time>[, <time>]*
  4. transition-duration: 0s;
  5. transition-duration: 1s;
  6. transition-duration: 1s, 2s, 3s;
transition-delay
  2. transition-delay: <time>[,<time>]*
  4. transition-delay: 0s;
  5. transition-delay: 1s;
  6. transition-delay: 1s, 2s, 3s;
transition-timing-function
  2. transition-timing-function: <single-transition-timing-function>[',' <single-transition-timing-function>]*
  4. <!-- 默认函数为 ease -->
  5. <single-transition-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]]?)
  7. <!-- 对于 cubic-bezier 的曲线，前两个值为 P1 的坐标，后两值为 P2 的坐标 -->
  9. transition-timing-function: ease;
  10. transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  11. transition-timing-function: linear;
  12. transition-timing-function: cubic-bezier(0, 0, 1, 1);

动画 - 图1

animation

  2. animation: <single-animation> [',' <single-animation>]*
  4. <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>
  6. animation: none;
  7. animation: abc 2s ease 0s 1 normal none running;
  8. animation: abc 2s;
  9. animation: abc 1s 2s both, abcd 2s both;
  10. <!-- 调用多个动画 -->

动画可自动运行，但transition需要触发。

animation-name

animation-name 的名字可自由定义。

  2. animation-name: <single-animation-name>#
  4. <single-animation-name> = none | <IDENT>
  6. animation-name: none;
  7. animation-name: abc;
  8. animation-name: abc, abcd;
animation-duration

与 transition-duration 属性值类似。

  2. animation-duration: <time>[, <time>]*
  4. animation-duration: 0s;
  5. animation-duration: 1s;
  6. animation-duration: 1s, 2s, 3s;
animation-timing-function

其与之前的 transition-timing-function 完全一模一样。

  2. animation-timing-function: <timing-function>#
  4. <single-timing-function> = <single-transition-timing-function>
  6. animation-timing-function: ease;
  7. animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  8. animation-timing-function: linear;
  9. animation-timing-function: cubic-bezier(0, 0, 1, 1);
  10. animation-timing-function: ease, linear;
animation-iteration-count

其用于动画执行的次数（其默认值为 1）。

  2. animation-iteration-count: <single-animation-iteration-count>#
  4. <single-animation-iteration-count> = infinite | <number>
  6. animation-iteration-count: 1;
  7. animation-iteration-count: infinite;
  8. animation-iteration-count: 1, 2, infinite;
animation-direction

其用于定义动画的运动方向。

  2. animation-direction:<single-animation-direction>#
  4. <single-animation-direction> = normal | reverse | alternate | alternate-revers
  6. animation-direction: reverse
  7. <!-- 动画相反帧的播放 -->
  8. animation-direction: alternate
  9. <!-- 往返执行动画 -->
  10. animation-direction: alternate-revers
  11. <!-- 相反的往返动画 -->
animation-play-state

其用于设定动画的播放状态。

  2. animation-play-state: <single-animation-play-state>#
  4. <single-animation-play-state> = running | paused
  6. animation-play-state: running;
  7. animation-play-state: pasued;
  8. animation-play-state: running, paused;
animation-delay

其用于设置动画的延时，同 transition-delay 值相同。

  2. animation-delay: <time>[, <time>]*
  3. anim
  4. animation-delay: 0s;
  5. animation-delay: 1s;
  6. animation-delay: 1s, 2s, 3s;
animation-fill-mode

其用于设置动画开始时，是否保持第一帧的动画和动画在结束时时候保持最后的状态。

  2. animation-fill-mode: <single-animation-fill-mode>[',' <single-animation-fill-mode>]*
  4. <single-animation-fill-mode> = none | backwards | forwards | both
  6. animation-fill-mode: none;
  7. <!-- 不做设置 -->
  8. animation-fill-mode: backwards;
  9. <!-- 动画开始时出现在第一帧的状态 -->
  10. animation-fill-mode: forwards;
  11. <!-- 动画结束时保留动画结束时的状态 -->
  12. animation-fill-mode: both;
  13. <!-- 开始和结束时都应保留关键帧定义的状态（通常设定） -->
  14. animation-fill-mode: forwards, backwards;
@keyframes

其用于定义关键帧。

  2. <!-- 写法一 -->
  3. @keyframes abc {
  4.   from {opacity: 1; height: 100px;}
  5.   to {opacity: 0.5; height: 200px;}
  6. }
  8. <!-- 写法二 -->
  9. @keyframes abcd {
  10.   0% {opacity: 1; height: 100px;}
  11.   100% {opacity: 0.5; height: 200px}
  12. }
  14. @keyframes flash {
  15.   0%, 50%, 100% {opacity: 1;}
  16.   25%, 75% {opacity: 0;}
  17. }
  19. <!-- 例子 -->
  20. animation: abc 0.5s both;
  21. animation: flash 0.5s both;
  22. animaiton: abc 0.5s both, flash 0.5s both;

动画 - 图2