[译]A Simple CSS Animation Tutorial

最新推荐文章于 2025-08-18 15:41:59 发布

转载最新推荐文章于 2025-08-18 15:41:59 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb8896c5188253feb58533e

文章标签：

#ui

本文介绍CSS动画的基本原理，包括关键帧、动画属性如duration、timing-function等的使用，适合初学者快速掌握如何创建简单的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文: A Simple CSS Animation Tutorial

看到这篇文章描述简单易懂，适合初学者，于是乎就想着记录和分享一下。

（正文）

以将黄色方块转变为蓝绿色圆型作为一个开始。

Animation

上图是来自于 CSS Visual Dictionary

在上述代码中.animateClass被赋给一个元素,动画随即起效。这个class链接到animationName上，animationName需要设定@keyframes规则。这则动画设置在3秒或者3000毫秒之间。 Note: 中间过程添加的特点的动画-提供了一个曲线来描述在特定时间节点上动画的相对速度。在接下来的内容中我们将覆盖释放过程和其他一些CSS动画属性。

动画是如何工作的

你可以运用动画在任何那些物理位置、维度、角度或者颜色可以变化的CSS属性上。使用关键帧（keyframes）实现基本动画非常简单。

CSS动画关键帧是使用@keyframes关键字指定的。关键帧让元素的状态维持在动画时间线的点上。

CSS动画引擎会自动的在关键帧之间进行插值。你所需要知道的只是设定动画起始和终点的CSS属性。然后用@keyframes animationName{...}创建一个特定名字的动画。

最后，创建一个特定的class来定义你的动画duration/direction/repeatability/ easing type...，链接到@keyframes上。下面将可视化这个过程。

CSS动画属性

8个独立的动画属性速记：

animation-name:
animation-duration
animation-timing-function
animation-delay: 动画开始前的延迟
animation-iteration-count: 动画出现的次数
animation-direction: forwards/backwards/ alternate sequence
animation-fill-mode: state of the animation when it is not playing
animation-play-state: specify whether animation is running or is paused

animation-name

.animationClass {
    animation-name: animationName;
    animation-fill-mode: normal;
    animation: normal 3000ms easa-in;
}

@keyframes animationName {
    0%{}
    100%{}
}
复制代码