CSS3中的Transition过度与Animation动画属性使用要点

让我们来详细讲解一下“CSS3中的Transition过渡与Animation动画属性使用要点”的完整攻略。

Transition 过渡

概述

CSS3 的过渡（transition）属性可以为元素的属性添加过渡效果。当元素从一种样式变换为另一种样式时，过渡效果会平滑的呈现出来。过渡不是立刻执行的，而是在一个指定的时间段内逐渐实现。

transition 属性

transition: property duration timing-function delay;

• property：要过渡的属性，比如 width, height, background-color, transform 等。
• duration：过渡的持续时间，以秒（s）或毫秒（ms）为单位。
• timing-function：过渡的时间函数，比如 ease, ease-in, ease-out, ease-in-out, linear.
• delay：调整动画开始前的延迟时间，以秒（s）或毫秒（ms）为单位。

示例

<div class="box normal"></div>
<button class="change-color">变色</button>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 1s ease-in-out;
}

.normal {
  background-color: red;
}

.change {
  background-color: blue;
}

document.querySelector('.change-color').addEventListener('click', () => {
  document.querySelector('.box').classList.toggle('change');
})

说明

上述示例中，我们创建了一个正方形的红色盒子，当点击 “变色” 按钮时，通过添加 .change 类，将盒子的 background-color 属性进行过渡，持续 1s，时间函数为 ease-in-out。

Animation 动画

概述

CSS3 的动画（animation）属性可以为元素添加复杂的动画效果。它允许动画对象在一段时间内从一种样式逐渐变为另一种样式，同时支持关键帧（keyframe）的设置和使用。

animation 属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name：定义一个动画名称。在 @keyframes 规则中定义的名称
• duration：动画的持续时间，以秒（s）或毫秒（ms）为单位。
• timing-function：动画的时间函数，比如 ease, ease-in, ease-out, ease-in-out, linear.
• delay：调整动画开始前的延迟时间，以秒（s）或毫秒（ms）为单位。
• iteration-count：动画的播放次数，可以设置为具体的数字次数，或者 infinite 表示无限循环。
• direction：定义动画的方向，可以是 normal, reverse, alternate, 或 alternate-reverse。
• fill-mode：指定动画完成后填充的模式，可以是 none, forwards, backwards, both。
• play-state：指定动画的播放状态，可以是 running, paused。

示例

<div class="box normal"></div>
<button class="change-position">变形</button>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 2s linear infinite alternate;
}

.normal {
  background-color: red;
}

.move {
  left: 200px;
  top: 200px;
  transform: rotate(360deg);
}

@keyframes move {
  0% {
    left: 0;
    top: 0;
    transform: rotate(0);
  }
  50% {
    left: 200px;
    top: 200px;
    transform: rotate(180deg);
  }
  100% {
    left: 0;
    top: 0;
    transform: rotate(360deg);
  }
}

document.querySelector('.change-position').addEventListener('click', () => {
  document.querySelector('.box').classList.toggle('move');
})

说明

上述示例中，我们创建了一个正方形的红色盒子，通过添加 .move 类，让盒子在 2s 的持续时间内依照 @keyframes 规则执行移动和旋转的动画效果。在 @keyframes 中我们定义了三个关键帧，分别是起始状态、中间状态和结束状态。

总结

• CSS3 的过渡和动画属性为网页的交互效果提供了很大的帮助。
• 过渡提供了简单的过渡效果，可以让网站在互动时更为平滑自然。
• 动画则提供了复杂的动画效果，可以让网站在视觉上更为丰富、多彩。
• 在实际使用中，我们需要根据实际需求选择过渡或动画，并在设置时合理搭配使用，避免出现视觉混乱或过度的效果。