CSS动画的实现方式：transition和animation的对比

翻滚的胖子
2023-06-21 10:08:02
HTML CSS JavaScript

CSS动画是Web前端开发中常用的技术之一，实现了更加丰富的页面效果。本文将重点介绍CSS动画的两种实现方式：transition和animation的对比。

一、transition

transition是CSS的一个属性，它可以在指定的时间段内平滑地改变CSS的属性值。例如：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

上述代码表示，当鼠标悬停在.box元素上时，它的宽度、高度和背景色会在2秒钟内平滑地过渡到新的值。

transition属性有以下几个参数：

transition-property：要过渡的CSS属性名称，可以同时指定多个。
transition-duration：过渡时间，单位为秒（s）或毫秒（ms）。
transition-timing-function：过渡方式，如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier等。
transition-delay：过渡延迟，指定过渡效果开始前的延迟时间。

需要注意的是，当CSS属性值发生变化时，才会触发过渡效果。

二、animation

animation是CSS的另一个属性，它可以在指定的时间段内实现更加复杂的动画效果。例如：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myanimation 2s infinite;
}
@keyframes myanimation {
  0% {
    transform: rotate(0deg);
    background-color: red;
  }
  50% {
    transform: rotate(180deg);
    background-color: blue;
  }
  100% {
    transform: rotate(360deg);
    background-color: green;
  }
}

上述代码表示，.box元素会在2秒钟内无限循环地执行myanimation动画。

animation属性有以下几个参数：

animation-name：动画名称，在@keyframes规则中定义。
animation-duration：动画持续时间，单位为秒（s）或毫秒（ms）。
animation-timing-function：动画方式，如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier等。
animation-delay：动画延迟，指定动画效果开始前的延迟时间。
animation-iteration-count：动画循环次数，如infinite表示无限循环。
animation-direction：动画方向，如normal、reverse、alternate、alternate-reverse。
animation-fill-mode：动画填充模式，如none、forwards、backwards、both。
animation-play-state：动画播放状态，如running、paused。

需要注意的是，animation属性需要配合@keyframes规则使用，@keyframes规则中定义了动画的关键帧，即动画效果在哪些时间点发生变化。