让 CSS 动画开始和结束更加自然：两个小技巧

2023-11-18 09:30:12

概述

CSS 动画是创建交互式和吸引人的网页设计的重要组成部分。然而，动画的开始和结束方式可能会对用户体验产生重大影响。本文将介绍两个小技巧，可以帮助您使 CSS 动画开始和结束更加自然。

animation-delay 属性

animation-delay 属性可以延迟动画的开始时间。这对于在动画开始前设置场景非常有用。例如，您可以使用 animation-delay 属性来延迟一个元素的淡入动画，直到用户将鼠标悬停在该元素上。

.element {
  animation-delay: 2s;
  animation-name: fadeIn;
  animation-duration: 1s;
}

上面的代码将延迟元素的淡入动画 2 秒。当用户将鼠标悬停在元素上时，动画将开始。

animationiteration 事件

animationiteration 事件可以在动画每次迭代时触发一个事件监听器。这对于在动画结束时执行某些操作非常有用。例如，您可以使用 animationiteration 事件来在动画结束时隐藏一个元素。

.element {
  animation-name: fadeOut;
  animation-duration: 1s;
}

element.addEventListener('animationiteration', function() {
  this.style.display = 'none';
});

上面的代码将导致元素在淡出动画结束时隐藏。

实例演示

为了更直观地展示如何使用 animation-delay 属性和 animationiteration 事件，我们创建一个下载按钮的动画。该按钮将从右向左滑动，然后淡出。

<button id="download-button">Download</button>

#download-button {
  position: relative;
  left: 100px;
  top: 100px;
  width: 100px;
  height: 50px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  animation-name: slideInLeft;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-iteration-count: 1;
}

@keyframes slideInLeft {
  0% {
    left: 100px;
  }
  100% {
    left: 0px;
  }
}

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

#download-button.fadeOut {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

#download-button:hover {
  animation-play-state: running;
}