CSS3过渡和动画如何协同工作

CSS3 过渡（Transitions）和动画（Animations）可以协同工作，以创建平滑且引人入胜的用户界面。它们之间的主要区别在于，过渡用于在两个状态之间平滑地改变属性值，而动画则可以在多个关键帧之间控制属性值的变化。

以下是如何将 CSS3 过渡和动画结合使用的一些建议：

1. 使用过渡作为动画的补充：在动画的关键帧之间，可以使用过渡来平滑地改变属性值。例如，在一个动画中，你可以在关键帧之间添加过渡，使属性值在关键帧之间平滑地变化。

@keyframes example {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: blue;
  }
}

.element {
  animation: example 3s infinite;
  transition: background-color 0.5s;
}

.element:hover {
  background-color: green;
}

在这个例子中，当鼠标悬停在 .element 上时，背景颜色会在绿色和当前动画值之间平滑过渡。

2. 使用动画作为过渡的补充：在某些情况下，你可能希望在过渡完成后触发动画。这可以通过 JavaScript 监听过渡结束事件来实现。

<div class="element"></div>

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
}

.element.active {
  background-color: blue;
  animation: example 2s forwards;
}

@keyframes example {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}

const element = document.querySelector('.element');

element.addEventListener('transitionend', () => {
  element.classList.add('active');
});

在这个例子中，当 .element 的过渡完成后，将触发动画。

3. 使用 JavaScript 控制过渡和动画：有时，你可能需要使用 JavaScript 来控制过渡和动画的播放。这可以通过修改元素的 style 属性或使用 classList 来实现。

const element = document.querySelector('.element');

element.addEventListener('click', () => {
  element.classList.toggle('active');
});

在这个例子中，当点击 .element 时，将切换 .active 类，从而触发动画。

总之，CSS3 过渡和动画可以协同工作，以创建更复杂和引人入胜的用户界面。通过结合使用它们，你可以实现平滑的属性值变化、在关键帧之间平滑过渡以及使用 JavaScript 控制动画和过渡。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>