一文看懂CSS3动画

文将使用CSS3动画keyframes创建一个页面加载器，加载时带着三个黄色圆点破浪形移动。它将向您展示如何为加载页面设计HTML样式，创建动画的keyframes，并使用keyframes的动画延迟。

以下是你将在本教程结束时制作的内容。

图中的三个黄色圆点，在页面加载过程中，呈现波浪形的跳动。

首先，先创建一个基本的html文件：

<p>A simple representation of an animated bouncing loader!</p>

<div class="loader">

<span></span>

</div>

文中添加了一个名为loader类的div。这个div负责创建所有页面加载器元素。在这个div中，添加了三个连续的span元素，每个元素表示一个页面加载器圆点。

第二步为页面定义基本的CSS：

/*_ OPTIONAL: Styles for the demo. *_/

body {

background: #2C294F;

padding: 2rem;

}

p {

font: 1rem/1.45 "Operator Mono";

color: #A599E9;

text-align: center;

}

这个代码块定义了p标记和主体的可选CSS样式。背景颜色，字体大小等属性可以根据自己的爱好更改。不过这些都不是动画所必须的样式，只是为了方便呈现动画效果。

关键的定义是下面的.loader样式：

/_ CSS for animated bouncing loader. _/

.loader {

display: flex;

justify-content: center;

align-items: center;

}

这里我们使用Flexbox，也就是display:flex; 它将弹跳的页面加载器水平和垂直放置在页面中间。

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

默认情况下，页面加载器的形状是方形的。我们要给它一个圆形形状，可以将边界半径设置为50%。.loader > span:nth-child(n)是指loader父元素下的第n个子元素。animation-delay是动画延迟时间。

这里最有趣的部分是animation属性。我们使用了一个名为bouncingLoader的动画keyframes，它每0.6s运行一次，并且无限重复。

定义动画的keyframes。keyframes用于定义动画行为，并让我们完全控制CSS动画的一个周期。我们将它定义为@keyframes，后面跟着动画的名字，在本例中是bouncingLoader。

在@keyframe规则中，使用from和to两个关键字来指定动画的起始点和结束点。同样地，你也可以用0%表示起点，用100%表示动画的终点。

此外，如果您想要多个动画转换，您可以定义一个百分比范围，每个百分比包含一个样式选择器列表。这些百分比可以以任何顺序列出。这些百分比的简单表示如下所示：

/_ Define the animation called bouncingLoader. _/

@keyframes bouncingLoader {

from {

width: 0.1rem;

height: 0.1rem;

opacity: 1;

transform: translate3d(0);

}

to {

width: 1rem;

height: 1rem;

opacity: 0.1;

transform: translate3d(0, -1rem, 0);

}

这使用了from和to关键字，它们定义了圆点的宽度、高度和不透明度等基本样式属性。Loader中每个圆圈的宽和高从0.1rem到width:1rem;和height:1rem; 除此之外，为了创建弹跳效果，使用CSS transform属性更改给定元素的坐标，从而转换每个圆点的位置。

使用这个transform属性，采用了translate3D()函数，它接受三个输入来解释(x, y, z)坐标的变化。因为我们希望我们的装载机在波动运动中运行，我们需要主要沿着y轴平移，保持x轴和z轴不变。因此，结束点的值为(0，-1rem, 0)。

最后一部分。既然已经为@keyframe编写了代码，现在就该设置并运行它了。动画的运行是通过以下几行代码实现的（上面已显示过一次）:

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

使用animation属性和/或它的子属性对想要动画的元素进行样式设置。使用此属性可以控制动画的时间、持续时间和其他细节。

这里你已经使用了以下动画的子属性:

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;

animation-name: 定义你的动画的名字，在我的例子中是加载器。

animation-duration: 配置动画完成一个循环的时间长度。

animation-iteration-count: 表示你希望动画循环在停止前播放多少次。

animation-direction: 定义动画播放的方向。

除了这些，还有其他几个子属性。你可以在Mozilla Web文档中获得详细信息。

基于这些，本文的动画定义如下:

animation: bouncingLoader 0.6s infinite alternate;

这行代码做了以下三件事:

告诉loader元素使用keyframes bouncingLoader。

设置动画的长度为0.6秒。

无限次地运行动画。在完成一个循环后，动画的方向就会发生变化，也就是反转。

你已经为弹跳加载器的第一个圆点定义了这些属性。为了瞄准第二个(2)和第三个(3)圆点，你使用了第n个子(n)选择器，它允许你选择和瞄准一个或多个元素，它们是父元素的第n个子元素。此外，对于其余的span元素，您刚刚定义了动画延迟，因此每个元素不会同时开始动画，而是延迟了定义时间后才开始，结果就是破浪形状。

深入探索CSS动画的魅力-附带动画实例

**开篇：揭秘CSS动画世界**

CSS动画作为现代网页设计中不可或缺的一部分，赋予了网页前所未有的生动性和互动性。从微妙的过渡效果到炫酷的视觉特效，CSS动画以其高效、易用的特点吸引了无数前端开发者。在这篇深度解析文章中，我们将一起走进CSS动画的世界，从基础知识到高级技巧，通过一系列详尽的实例，揭示CSS动画背后的秘密及其在实际项目中的应用场景。

---

### **一、CSS动画基础概念与关键帧动画(Keyframes)**

**标题：** 掌握@keyframes规则，构建动画流程

CSS动画的核心在于`@keyframes`规则，它允许开发者定义动画序列中的不同关键帧状态。例如，创建一个元素从左到右移动的简单动画：

```html

<!DOCTYPE html>

<head>

<style>

@keyframes moveRight {

0% { left: 0; }

100% { left: calc(100% - 50px); }

}

.animatedElement {

position: relative;

width: 50px;

height: 50px;

background-color: red;

animation: moveRight 2s ease infinite;

}

</style>

</head>

<body>

</body>

</html>

```

在这个例子中，我们定义了一个名为`moveRight`的动画，使其在2秒内从屏幕左侧移动到右侧。通过`animation`属性将此动画应用于`.animatedElement`类。

---

### **二、CSS动画属性详解与应用**

**标题：** 理解动画属性，掌控动画生命周期

CSS动画由一系列可控制属性组成，包括但不限于：

- `animation-name`: 定义使用的@keyframes名称；

- `animation-duration`: 设置动画完成一个周期所需的时间；

- `animation-timing-function`: 控制动画速度曲线（如ease、linear、ease-in-out）；

- `animation-delay`: 动画开始前的延迟时间；

- `animation-iteration-count`: 动画重复次数（如无限循环使用`infinite`）；

- `animation-direction`: 控制动画是否反向播放；

- `animation-fill-mode`: 定义动画在执行前后元素的状态。

---

### **三、CSS动画进阶：叠加与合成模式**

**标题：** 探索层叠与合成，实现复杂动画效果

CSS动画可以叠加和组合，利用`animation-play-state`属性暂停或恢复动画，结合`animation-composite`属性来处理多个动画间的堆叠顺序与效果：

```html

<style>

.combinedAnimation {

/* 假设已有两个动画定义 */

animation: moveRight 2s ease, fadeInOut 1s linear;

animation-fill-mode: both;

}

/* 针对某个事件，例如悬停时暂停所有动画 */

.combinedAnimation:hover {

animation-play-state: paused;

}

</style>

```

---

### **四、CSS动画与JavaScript联动**

**标题：** 使用JavaScript操控CSS动画，增强交互性

尽管CSS动画本身具备丰富的特性，但结合JavaScript可以实现更灵活的动态控制。下面是一个简单的示例，通过JavaScript触发CSS动画：

```html

<div id="animateOnHover" class="hiddenContent">Hover me!</div>

<style>

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.hiddenContent {

opacity: 0;

animation-duration: 1s;

animation-fill-mode: both;

}

.visibleContent {

animation-name: fadeIn;

}

</style>

const animateOnHover = document.getElementById('animateOnHover');

animateOnHover.addEventListener('mouseover', () => {

animateOnHover.classList.add('visibleContent');

});

animateOnHover.addEventListener('mouseout', () => {

animateOnHover.classList.remove('visibleContent');

});

</script>

```

---

**五、响应式与无障碍CSS动画**

**标题：** 考虑不同设备与用户需求，打造包容性动画

在设计CSS动画时，务必考虑响应式布局与无障碍访问。确保动画在不同尺寸的屏幕上适配良好，并针对视障用户提供替代内容或禁用动画。

---

**结语：**

深入挖掘CSS动画技术，不仅能创造出美轮美奂的用户体验，更能展现前端开发者细腻的艺术触觉与卓越的技术实力。实践这些动画实例，不断拓展想象空间，让网页设计充满生命力，从而引领用户在浏览过程中享受无与伦比的互动乐趣。随着浏览器技术的不断发展，CSS动画的未来充满了无限可能，让我们共同期待并创造更多的精彩瞬间。

页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gif动画图，上图就是效果图。

用CSS3制作动画图，你需要了解两个css属性。

其一是 @keyframes

因为它限定了CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。浏览器兼容的时候需要在keyframes上加前缀，-webkit-, -ms- 或 -moz- 。

keyframes中有两个属性，from和to，from里面的内容定义动画开始的状态，to记录动画结束的状态。@keyframes后面紧跟的是动画的名字，这个可以自定义取名字，比如我取 gifname，页面某个标签元素使用这个动画时候，就需要用到这个名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比来表示动画的过程，可以用百分比的话，就可以把动画的内容定义得更加丰富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一个div元素上用到这个动画

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 与 Chrome */
}

其二是 animation

刚刚我们在div元素中看到的animation就是我们要认识的第二个属性。animation其实是一堆属性的简写。比如看下面一句代码：

 animation:gifname 2s step-start 1s infinite alternate;

这一句其实可以写成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：动画名称

这里是引入 @keyframes 动画的名称。

animation-duration：动画的持续时间

单位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：动画的过度类型

属性值 :默认是 "ease"

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

step-start:马上跳到动画每一结束帧的状态

animation-delay：动画延迟时间

默认是 0。

animation-iteration-count：动画循环次数

默认是 1。属性值infinite 代表无数次。

animation-direction：动画是否在下一周期逆向地播放

属性值

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

另外还有两项属性：

animation-fill-mode:设置动画播放后的效果

取值:

none:初始样式,不改变默认行为.(默认行为)

forwards:动画播放结束后保持最后一个状态;

backwards:结束后保持第一个状态;

animation-play-state :检索或设置对象动画的状态

属性值

animation-play-state:running | paused;

running:运动

paused: 暂停

animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

到此为止，属性我们都学习完了，开始实践部分：

首先准备好我们需要的图片，这里我使用了九张图片。

我把九张图片放在九个<li></li>标签里。所有li标签用ul标签包含起来。然后把ul放在一个div标签里，div设置成一张图片的大小，然后通过逐帧移动ul元素实现动画。

最后的处理，把超出div元素的部分隐藏即可。然后就得到了文章开始时候的图片了。

最关键的，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css动画</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后唠叨一句，该动画不支持IE9及更早版本的IE浏览器。

喜欢的话，就点赞支持一下吧！

在线咨询

上一篇：JavaScript全局变量、局部变量与作用域链揭秘
下一篇：收藏 - 5个高质量免费视频下载网站，无版权，无水印，放心使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一文看懂CSS3动画

其一是 @keyframes

其二是 animation

您的项目需求