CSS3_动画

标签：播放   位置   ase   sel   dong   selector   live   贝塞尔   ima   

动画

使元素从一种样式逐渐变化到另一种样式的

• 原理

人眼在看到画面的0.34 秒内，画面不会消失

在一幅画面还没消失之前，播放下一张画面

• 关键帧 @keyframes

•            /* 动画的名称 */
  @keyframes animationname {
      keyframes-selector {    /* （关键帧的选择器，动画持续时间的百分比，参照花费的总时间） 或者 （from 代表 0%，to 代表 100%%） */
          /* cssStyles; */
      }
  }
  
  /**** 实例 ****/
  #box {
      width: 200px;
      height: 200px;
      background-color: olive;
      
      animation-name: yidong;    /* 1. 动画的名称 */
  
      animation-duration: 10s;    /* 2. 动画持续时间 */
      
      animation-delay: 3s;    /* 4. 动画执行前等待的时间 */
     
      animation-fill-mode: both;    /*  */
      
      /* 检测的是关键帧的区间（0%-50%，50%-100%） */
      animation-timing-function: linear;    /* 3. 设置动画的类型
                                                  （默认值 ease， 
                                                    还有 linear，
                                                        贝塞尔曲线cubic-bezier(0.07, 1.4, 0.86, 1.47)，
                                                        1个区间跳2次 steps(2)） */
  }
  
  @keyframes yidong {
      0% { transform: translateX(0px); }    /* 等同于 from {} */
  
      50% { transform: translateX(20px); }
  
      100% { transform: translateX(20px); }    /* 等同于 to {} */
  }

用来控制动画变化的关键位置（而非所有位置）

• 编写位置

帧函数 编写在 控制元素样式的 外面

animation 的属性 编写在 控制元素样式里面

• 动画执行完以后，立刻恢复原来状态。

CSS3_动画

标签：播放   位置   ase   sel   dong   selector   live   贝塞尔   ima   

原文地址：https://www.cnblogs.com/tianxiaxuange/p/9957963.html