CSS Animations 是一种强大的前端技术，可以帮助我们创造出各种动态效果与转场动画。通过使用 CSS Animations，我们可以实现一些很酷的效果，使网页更加生动和吸引人。在本篇博客中，我将向大家介绍如何使用 CSS Animations。
什么是 CSS Animations
CSS Animations 是一种使用 CSS 来实现动态效果和转场动画的技术。它通过定义一系列动画关键帧（keyframes），然后将这些关键帧应用于 HTML 元素上，以创建出流畅的动画效果。
通过使用关键帧，我们可以控制动画的起始状态、终止状态和中间的过渡效果。CSS Animations 也提供了丰富的属性和选项，可以让我们对动画进行更详细的控制。
如何使用 CSS Animations
使用 CSS Animations 可以分为以下几个步骤：
1. 创建关键帧
首先，我们需要创建一个或多个关键帧，来定义动画的不同状态。在关键帧中，我们可以指定元素在动画的不同时间点上的样式。
例如，我们要创建一个从左向右滑动的动画效果，可以在关键帧中定义元素的 left 属性从 0% 到 100% 之间的变化。
@keyframes slide-in {
0% {
left: -100%;
}
100% {
left: 0;
}
}
2. 应用动画
接下来，我们需要将关键帧应用到目标元素上，以触发动画效果。
.element {
animation-name: slide-in;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
在上述代码中，我们使用 animation-name 属性来指定动画名称，使用 animation-duration 属性来指定动画的持续时间，使用 animation-timing-function 属性来指定动画的过渡效果。
3. 触发动画
最后，我们需要为动画触发条件提供一个触发器，以便在满足条件时触发动画效果。触发器可以是用户的交互行为（如点击按钮），也可以是事件的发生（如页面加载完成）。
<button class="btn">点击触发动画</button>
const button = document.querySelector('.btn');
const element = document.querySelector('.element');
button.addEventListener('click', function() {
element.classList.add('animated');
});
在上述代码中，我们给按钮添加了一个点击事件监听器，当按钮被点击时，我们将目标元素的 animated 类添加上去。这个类在 CSS 中定义了动画的规则，进而触发动画效果。
动态效果与转场动画实例
这里给出一个实例，展示了如何使用 CSS Animations 创造一个简单的动态效果和转场动画。
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.transition {
width: 100px;
height: 100px;
background-color: blue;
animation-name: slide-in-out;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-out {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
<div class="box"></div>
<div class="transition"></div>
在上述代码中，我们创建了一个盒子，通过 pulse 动画使其在原始大小和稍大的状态之间循环缩放，以营造出一个脉动效果。
同时，我们还创建了另一个盒子，并使用 slide-in-out 动画使其从屏幕左侧滑入，再滑出到右侧，形成一个转场动画效果。
结语
CSS Animations 是一个非常有用的技术，可以帮助我们创造出各种动态效果与转场动画。通过定义关键帧和应用动画，我们可以轻松地为网页添加生动和吸引人的效果。希望本篇博客对你的前端开发工作有所帮助！
本文来自极简博客，作者：移动开发先锋，转载请注明原文链接：使用 CSS Animations 创造动态效果与转场动画
