一步一步带你认识CSS的动画效果：animation与transition的区别和用法详解

2024-01-07 10:08:42

在CSS系列——一步一步带你认识transition过渡效果这篇文章中，我给大家详细讲解了transition过渡的用法，能够实现比较友好的过渡效果，但是功能比较有限，如果要想实现比较漂亮的动画效果，就需要我们今天要请出主角animation登场了。首先，我们来看看animation和transition的区别和用法。

animation与transition的区别

animation和transition都是CSS中的动画效果，但它们之间也有着一些区别。

语法不同 ：animation的语法是animation: <animation-name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode>;，而transition的语法是transition: <property> <duration> <timing-function> <delay>;。
作用对象不同 ：animation可以作用于任何CSS属性，而transition只能作用于CSS的少数属性，如color、background-color、border-color等。
动画效果不同 ：animation可以实现更加复杂的动画效果，如旋转、缩放、位移等，而transition只能实现简单的过渡效果，如颜色渐变、背景色渐变等。
执行次数不同 ：animation可以设置动画的执行次数，而transition只能执行一次。
暂停和恢复不同 ：animation可以暂停和恢复，而transition不能。

animation的用法

animation的用法比较简单，只需在CSS中添加animation属性即可。animation属性的值由以下几个部分组成：

：动画的名称。
：动画的持续时间。
：动画的缓动函数。
：动画的延迟时间。
：动画的执行次数。
：动画的执行方向。
：动画的填充模式。

例如，以下代码将创建一个持续2秒的动画，从红色渐变到蓝色：

animation: my-animation 2s ease-in-out;

@keyframes my-animation {
  0% {
    color: red;
  }
  100% {
    color: blue;
  }
}

实例

/* 简单的动画效果 */
.example {
  animation: fadein 2s ease-in-out;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 复杂的动画效果 */
.example {
  animation: rotate-scale 2s ease-in-out;
}

@keyframes rotate-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}