CSS3_动画

动画

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

• 原理

人眼在看到画面的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_动画

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