1. 首页
  2. CSS 菜鸟教程
  3. CSS - 动画

CSS - 动画

CSS 动画允许在不使用 JavaScript 的情况下在不同样式之间创建平滑过渡。

什么是CSS动画？

在 CSS 中，我们可以根据持续时间、用户交互或状态变化动态更改元素的样式，称为 CSS 动画。它是使用“@keyframes”规则来实现的，用于创建动画，并使用动画属性将其应用于元素。

@keyframes规则

“@keyframes”规则用于定义动画的关键帧，指定动画元素在动画的各个阶段的外观。请考虑以下定义关键帧规则的代码。

.box{
	 	 animation: colorChange 5s infinite;
}

@keyframes colorChange {
	 	 0% {
	 	 	 	 background-color: red;
	 	 }
	 	 50% {
	 	 	 	 background-color: green;
	 	 }
	 	 100% {
	 	 	 	 background-color: blue;
	 	 }
}

此代码将为类为“.box”的元素定义动画，动画的名称为 colorChange，运行 5 秒，重复无限次。

关键帧规则是为名为 colorChange 的动画定义的。

  • 在动画总持续时间的 0%（即 0 秒）时，背景颜色将为红色。
  • 在总时间的 50% （即 2.5 秒）时，背景颜色变为绿色。
  • 在总持续时间的 100%（即 5 秒）时，颜色变为蓝色。

Animation Delay 属性

我们可以使用 animation-delay 属性设置启动动画的延迟。请看以下示例

您还可以为 animation-delay 属性设置负值。如果您使用负值 -n，则动画将开始，就好像它已经播放了 n 秒一样。

例

在此示例中，球将在 2 秒后开始向左移动。

<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 	 .ball {
	 	 	 	 	 	 width: 50px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 position: absolute;
	 	 	 	 	 	 left: 0;	

	 	 	 	 	 	 animation-name: moveRight;
	 	 	 	 	 	 /* Set duration */
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 /* Set delay for animation */
	 	 	 	 	 	 animation-delay: 2s;	
	 	 	 	 }

	 	 	 	 @keyframes moveRight {
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 left: calc(100% - 50px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="container">
	 	 	 	 <div class="ball"></div>
	 	 </div>
</body>
</html>

设置动画迭代计数

我们可以使用 animation-iteration-count 属性设置动画应重复的次数。

CSS 规范不支持此属性的负值。它可以将值作为正整数（例如，1、2、3 等）或关键字“无限”

例

在此示例中，我们将球迭代计数设置为无限。

<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 	 .ball {
	 	 	 	 	 	 width: 50px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 position: absolute;	
	 	 	 	 	 	 left: 0;	

	 	 	 	 	 	 animation-name: moveRight;
	 	 	 	 	 	 /* Set duration */
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 /* Set number of time animation repeats */
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 }

	 	 	 	 @keyframes moveRight {
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 left: calc(100% - 50px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="container">
	 	 	 	 <div class="ball"></div>
	 	 </div>
</body>
</html>

Animation Direction 属性

我们可以使用 animation-direction 属性指定动画的运行方向。

以下是 animation-direction 属性的有效值

  • normal：动画照常播放（向前播放）。这是默认设置。
  • reverse：动画以相反方向（向后）播放。
  • alternate：动画首先向前播放，然后向后播放。
  • alternate-reverse：动画首先向后播放，然后向前播放。

例

在这个例子中，我们使用内联css来设置动画方向属性。

<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 	 .ball {
	 	 	 	 	 	 width: 50px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 position: relative;
	 	 	 	 	 	 left:0;
	 	 	 	 	 		
	 	 	 	 	 	 animation-name: moveRight ;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 }
	 	 	 	 @keyframes moveRight {
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 left: calc(100% - 50px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>animation-direction: normal</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-direction: normal; ">
	 	 </div>

	 	 <h2>animation-direction: reverse</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-direction: reverse;">
	 	 </div>

	 	 <h2>animation-direction: alternate</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-direction: alternate;">
	 	 </div>

	 	 <h2>animation-direction: alternate-reverse</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-direction: alternate-reverse;">
	 	 </div>
</body>
</html>

动画定时功能

在 CSS 中，animation-timing-function 属性用于定义动画的速度曲线。它可以采用以下值。

  • ease：动画将开始缓慢，然后快速，然后缓慢结束（默认值）。
  • linear：动画从头到尾以相同的速度进行。
  • ease-in：启动缓慢的动画。
  • ease-out：动画结束缓慢。
  • ease-in-out：开始和结束缓慢的动画。
  • cubic-bezier(n,n,n,n)：这使我们能够定义自己的速度值。要了解更多信息，请查看立方贝塞尔函数文章。

例

<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 	 .ball {
	 	 	 	 	 	 width: 50px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 position: relative;
	 	 	 	 	 	 left:0;
	 	 	 	 	 		
	 	 	 	 	 	 animation-name: moveRight ;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 }
	 	 	 	 @keyframes moveRight {
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 left: calc(100% - 50px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>linear</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-timing-function: linear;">
	 	 </div>

	 	 <h2>ease</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-timing-function: ease;">
	 	 </div>

	 	 <h2>ease-in</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-timing-function: ease-in;">
	 	 </div>

	 	 <h2>ease-out</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-timing-function: ease-out;">
	 	 </div>
	 		
	 	 <h2>ease-in-out</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-timing-function: ease-in-out;">
	 	 </div>
	 		
	 	 <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2>
	 	 <div class="ball"	
	 	 	 	 	style="animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">
	 	 </div>
</body>
</html>

设置动画填充模式

animation-fill-mode 属性指定动画不播放时（开始之前、结束之后或两者兼而有之）时目标元素的样式。

animation-fill-mode 属性可以具有以下值：

  • none：动画在启动之前或之后都不会应用任何样式。这是默认设置。
  • forwards：在动画结束时，元素将保持最后一个关键帧规则设置的样式。
  • backwards：在动画结束时，元素将保持第一个关键帧规则设置的样式。
  • both：动画将遵循前进和后退的规则。

请查看以下代码的输出以更深入地理解：

<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 background-color: green;
	 	 	 	 	 	 color: white;
	 	 	 	 	 	 font-size: 16px;
	 	 	 	 	 	 margin: 20px;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-name: changeColor;
	 	 	 	 }

	 	 	 	 /* Animation Definition */
	 	 	 	 @keyframes changeColor {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 background-color: blue;
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 background-color: red ;
	 	 	 	 	 	 }
	 	 	 	 }

	 	 	 	 /* Animation Fill Modes */
	 	 	 	 .none {
	 	 	 	 	 	 animation-fill-mode: none;
	 	 	 	 }

	 	 	 	 .forwards {
	 	 	 	 	 	 animation-fill-mode: forwards;
	 	 	 	 }

	 	 	 	 .backwards {
	 	 	 	 	 	 animation-fill-mode: backwards;
	 	 	 	 	 	 animation-delay: 2s;
	 	 	 	 }

	 	 	 	 .both {
	 	 	 	 	 	 animation-fill-mode: both;
	 	 	 	 	 	 animation-delay: 2s;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="box none">None</div>
	 	 <div class="box forwards">Forwards</div>
	 	 <div class="box backwards">Backwards</div>
	 	 <div class="box both">Both</div>
</body>
</html>

Animation Shorthand 属性

在 CSS 中，animation 属性是以下属性的简写

例：

<html lang="en">
<head>
	 	 <style>
	 	 .box {
	 	 	 	 padding: 20px;
	 	 	 	 background-color: #3498db;
	 	 	 	 color: white;
	 	 	 	 font-size: 16px;
	 	 	 	 /* Name, duration, timing function, delay, repeat, direction, fill mode */
	 	 	 	 animation: changeColor 2s ease-in-out 1s infinite alternate both;
	 	 }

	 	 /* Animation Definition */
	 	 @keyframes changeColor {
	 	 	 	 0% {
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 }
	 	 	 	 100% {
	 	 	 	 	 	 background-color: #e74c3c;
	 	 	 	 }
	 	 }

	 	 </style>
</head>

<body>
	 	 <div class="box">Animate Me!</div>
</body>
</html>

CSS 动画属性列表

以下是 animation 属性的子属性：

属性 描述
animation-composition 指示当许多动画同时对同一属性产生效果时要应用的复合操作。
animation-delay 指示动画是应从动画的开头开始，还是应从动画的某个位置开始，以及从元素加载到动画序列开始之间应经过的时间量。
animation-direction 指示动画的初始迭代是向前还是向后，以及之后的迭代是应沿同一方向继续还是每次执行序列时都应更改方向。.
animation-duration 指示动画完成一个周期所需的时间。
animation-fill-mode 描述动画应用于其目标的运行前和运行后样式。
animation-iteration-count 指示动画应重复出现的次数。
animation-name 它给出了描述动画关键帧的@keyframes规则的名称。
animation-play-state 指示是应播放还是暂停动画序列。
animation-timing-function 描述用于指定动画中的关键帧过渡的加速度曲线。
<< CSS - transition（过渡）属性 CSS - 多列布局 >>