@keyframes规则

  1. 书写：@keyframes my_animation_name {0% {css_styles;} 50% {css_styles;} 100% {css_styles;}}
  3. 或者 @keyframes my_animation_name {from {css_styles;} to {css_styles;}}

举例：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>帧动画(animation)属性</title>
  6.     <style>
  8.       @keyframes myanimation { /* 开始创建动画帧 */
  9.         % {
  10.           width: 100px;
  11.           background-color: red;
  12.         }
  13.         20% {
  14.           width: 160px;
  15.           background-color: blue;
  16.         }
  17.         40% {
  18.           width: 220px;
  19.           background-color: blue;
  20.         }
  21.         60% {
  22.           width: 280px;
  23.           background-color: yellow;
  24.         }
  25.         80% {
  26.           width: 340px;
  27.           background-color: yellow;
  28.         }
  29.         100% {
  30.           width: 400px;
  31.           background-color: orange;
  32.         }
  33.       }
  35.       div {
  36.         width: 100px;
  37.         height: 100px;
  38.         background-color: red;
  40.         /* 设置帧动画效果 */
  42.         -webkit-animation-name: myanimation;
  43.         -webkit-animation-duration: 5s;
  44.         -webkit-animation-timing-function: linear;
  45.         -webkit-animation-delay: .5s;
  46.         -webkit-animation-iteration-count: infinite; /* 设置动画的播放次数 */
  47.         /*-webkit-animation-direction: reverse; 动画是否反向播放 */
  48.         -webkit-animation-state: runing; /* 指定动画是否正在播放或暂停 */
  50.         animation-name: myanimation;
  51.         animation-duration: 5s;
  52.         animation-timing-function: linear;
  53.         animation-delay: .5s;
  54.         animation-iteration-count: infinite;
  55.         /*animation-direction: reverse; 动画是否反向播放 */
  56.         animation-state: runing;
  57.       }
  59.     </style>
  60.   </head>
  61.   <body>

效果：
PZIAM(2W@$T(OTD43{@OIQY.png

animation属性

  1. animation: animation-name||animation-duration||animation-timing-function||animation-delay||animation-iteration-count||animation-direction||animation-state;
  • -name,表示定义的帧动画名称，这里的name就是”my_animation_name”。
  • -duratin，表示动画完成所需的时间。
  • -timing-function，表示动画的过渡类型。linear表示匀速；ease表示慢速开始，中间加速，慢速结束；ease-in表示慢速开始；ease-out表示慢速结束；ease-in-out表示慢速开始和结束；
  • -delay表示动画延迟多少时间后开始执行。
  • -iteration-count表示动画执行的次数：animation-iteration-count: n||infinite; 有限的循环次数或者是无限循环。
  • -direction表示动画在循环中是否反向播放。
  1. normal，正常播放
  2. reverse，反向播放。
  3. alternate，奇数次正常播放，偶数次反向播放。
  4. alternate-reverse，奇数次反向播放，偶数次正常播放。
  • -play-state指定动画是否运行或暂停。
  1. running，动画运行
  2. paused，动画暂停

  • steps(n,start/end):逐帧动画

    steps(n,start/end)

    第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示
    第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态，第二个参数决定从一帧到另一帧的中间间隔是用开始帧还是结束帧来进行填充：
    start 第一帧是第一步动画结束
    end 第一帧是第一步动画开始

  • steps(N, start)将动画分为N段，动画在每一段的起点发生阶跃(即图中的空心圆 → 实心圆),动画结束时停留在了第 N 帧

  • steps(N, end)将动画分为N段，动画在每一段的终点发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆)，停留在了 N+1 帧。

image.png
应用于：雪碧图

requestAnimationFrameAPI

requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

  1. var progress = 0;
  2. var rafId = null
  3. //回调函数
  4. function render() {
  5.     progress += 1; //修改图像的位置
  6.     if (progress < 100) {
  7.            //在动画没有结束前，递归渲染
  8.           rafId=window.requestAnimationFrame(render);
  9.     }
  10. }
  11. //第一帧渲染
  13. rafId=window.requestAnimationFrame(render);
  14. 如何停止
  15. cancelAnimationFrame(rafId)