设置动画未播放时元素的 CSS 样式-猿码集

什么是 CSS 动画？

CSS 动画指的是使用 CSS 样式属性来创建动画效果的技术。通过使用关键帧或过渡的方式，我们可以在网页中为元素添加运动效果和动态变化。CSS 动画有很多优缺点，其中最大的优点就是它可以大幅度提升用户体验，吸引用户留在网站上浏览更多内容，提升网站的互动性和可达性。

但是，在一个网页中使用大量的 CSS 动画可能会对网页性能造成一定的负面影响，导致网页加载速度变慢。因此，在设计网页时，我们需要注意平衡用户体验和网页性能的关系，合理使用 CSS 动画。

CSS 动画配置

为了实现 CSS 动画效果，我们需要定义元素的初始状态和结束状态，并指定这些状态之间的动画过渡。可以使用以下选项来配置 CSS 动画：

animation-name

animation-name 选项用来指定动画名称。动画名称是由 @keyframes 定义的动画序列的名称。


/* 定义名为 move 的动画序列 */
@keyframes move {
  from {  
      /* 初始状态 */ 
      opacity: 0;
  }
  to {
      /* 结束状态 */
      opacity: 1;
  }
}
/* 将动画序列应用到元素 */
div {
  animation-name: move;
}

animation-duration

animation-duration 选项用来指定动画持续时间，单位是秒或毫秒。


/* 定义名为 move 的动画序列 */
@keyframes move {
  from {  
      /* 初始状态 */ 
      opacity: 0;
  }
  to {
      /* 结束状态 */
      opacity: 1;
  }
}
/* 将动画序列应用到元素 */
div {
  animation-name: move;
  animation-duration: 3s; /* 3 秒 */
}

animation-timing-function

animation-timing-function 选项用来指定动画的速度曲线，即如何描述过渡的速度。

速度曲线的取值可以是以下几种：

ease-in：缓慢开始，然后逐渐加速

ease-out：从开始时就比较快，然后逐渐减速

ease-in-out：先缓慢开始，然后加速过渡，到达目标速度时再减速过渡

linear：匀速过渡


/* 定义名为 move 的动画序列 */
@keyframes move {
  from {  
      /* 初始状态 */ 
      opacity: 0;
  }
  to {
      /* 结束状态 */
      opacity: 1;
  }
}
/* 将动画序列应用到元素 */
div {
  animation-name: move;
  animation-duration: 3s; /* 3 秒 */
  animation-timing-function: ease-in-out;
}

animation-delay

animation-delay 选项用来指定动画开始之前的等待时间，单位是秒或毫秒。


/* 定义名为 move 的动画序列 */
@keyframes move {
  from {  
      /* 初始状态 */ 
      opacity: 0;
  }
  to {
      /* 结束状态 */
      opacity: 1;
  }
}
/* 将动画序列应用到元素 */
div {
  animation-name: move;
  animation-duration: 3s; /* 3 秒 */
  animation-timing-function: ease-in-out;
  animation-delay: 1s; /* 开始之前等待 1 秒 */
}

animation-iteration-count

animation-iteration-count 选项用来指定动画循环的次数，可以是一个整数或 infinite。


/* 定义名为 move 的动画序列 */
@keyframes move {
  from {  
      /* 初始状态 */ 
      opacity: 0;
  }
  to {
      /* 结束状态 */
      opacity: 1;
  }
}
/* 将动画序列应用到元素 */
div {
  animation-name: move;
  animation-duration: 3s; /* 3 秒 */
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3; /* 循环 3 次 */
}

animation-direction

animation-direction 选项用来指定动画运行的方向，有以下几种取值：

normal：从初始状态运动到结束状态

reverse：从结束状态运动到初始状态

alternate：正反两个方向交替运行

alternate-reverse：正反两个方向交替运行，但是第一次是从结束状态开始


/* 定义名为 move 的动画序列 */
@keyframes move {
  from {  
      /* 初始状态 */ 
      opacity: 0;
  }
  to {
      /* 结束状态 */
      opacity: 1;
  }
}
/* 将动画序列应用到元素 */
div {
  animation-name: move;
  animation-duration: 3s; /* 3 秒 */
  animation-timing-function: ease-in-out;
  animation-direction: alternate; /* 正反方向交替 */
}