CSS过渡与动画学习笔记

前端

2023-11-02 02:38:46

理解CSS过渡与动画

CSS过渡（transition）和动画（animation）都是CSS中用于创建动画效果的工具。它们都可以让元素在不同的状态之间平滑地过渡，但它们的工作方式不同。

过渡（transition）：
- 允许您为元素的属性指定过渡效果，当元素从一个值更改为另一个值时，会自动应用该效果。
- 常用于创建简单的动画效果，例如元素的淡入淡出、颜色改变或大小改变等。
动画（animation）：
- 允许您为元素创建更复杂的动画效果，可以控制动画的持续时间、延迟时间、循环次数等。
- 常用于创建复杂的动画效果，例如元素的旋转、位移、缩放等。

使用CSS过渡

要使用CSS过渡，您需要使用transition属性。transition属性有四个属性值：

transition-property： 指定要过渡的属性，例如color、background-color、width、height等。
transition-duration： 指定过渡的持续时间，单位是秒（s）或毫秒（ms）。
transition-timing-function： 指定过渡的缓动函数，决定了过渡的速度变化。
transition-delay： 指定过渡的延迟时间，单位是秒（s）或毫秒（ms）。

例如，以下代码将为元素的背景颜色创建一个淡入效果：

.element {
  background-color: #fff;
  transition: background-color 1s ease;
}

.element:hover {
  background-color: #000;
}

当您将鼠标悬停在元素上时，背景颜色将从白色逐渐变为黑色，过渡时间为1秒，缓动函数为ease。

使用CSS动画

要使用CSS动画，您需要使用animation属性。animation属性有四个属性值：

animation-name： 指定动画的名称，用于引用动画关键帧。
animation-duration： 指定动画的持续时间，单位是秒（s）或毫秒（ms）。
animation-timing-function： 指定动画的缓动函数，决定了动画的速度变化。
animation-iteration-count： 指定动画的循环次数，可以是数字或infinite（无限循环）。

例如，以下代码将为元素创建一个旋转动画：

.element {
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}