CSS - animation-direction 属性

CSS animation-direction 属性指定了动画应遵循的方向：向前、向后或在这两个方向之间交替，创建来回移动。

使用速记属性动画是一次配置所有动画属性的一种常见且简单的方法。

语法

值	描述
normal	这是默认设置，使用此值时，动画将向前推进。
reverse	此值使动画向后方向前进。
alternate	此值使动画首先向前推进，然后向后方向前进
alternate-reverse	此值使动画首先向后方向前进，然后向向前前进。

CSS animation-direction 属性示例

下面列出的示例将说明具有不同值的动画方向属性。

向前移动动画

以下示例演示了 animation-direction，其值照常存在。

在这种情况下，动画通常沿正向移动播放。盒子开始向右移动。

例


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 /* Styling the container for the boxes */

	 	 	 	 .container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: space-around;
	 	 	 	 	 	 align-items: center;
	 	 	 	 }

	 	 	 	 /* Styling for the box with 'normal' animation */

	 	 	 	 .normal-box {
	 	 	 	 	 	 padding: 10%;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-timing-function: linear;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-name: moveNormal;
	 	 	 	 	 	 /* Animation moves continuously	
	 	 	 	 	 	 from start to end */
	 	 	 	 	 	 animation-direction: normal;

	 	 	 	 }

	 	 	 	 /* Keyframes for the 'moveNormal' animation */

	 	 	 	 @keyframes moveNormal {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 /* Moves the box horizontally	
	 	 	 	 	 	 	 	 to the right */
	 	 	 	 	 	 	 	 transform: translateX(200px);

	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation direction property </h2>
	 	 <div class="container">
	 	 	 	 <div class="normal-box"></div>

	 	 </div>
</body>

</html>

向后移动动画

以下示例演示了 animation-direction，值为 reverse。

在这种情况下，动画向后移动。这里考虑的盒子向后移动。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 /* Styling the container for the boxes */

	 	 	 	 .container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: space-around;
	 	 	 	 	 	 align-items: center;
	 	 	 	 }

	 	 	 	 /* Styling for the box with 'reverse' animation */

	 	 	 	 .reverse-box {
	 	 	 	 	 	 padding: 10%;
	 	 	 	 	 	 background-color: #e74c3c;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-timing-function: linear;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-name: moveReverse;
	 	 	 	 	 	 /* Animation oscillates backwards */
	 	 	 	 	 	 animation-direction: reverse;
	 	 	 	 }

	 	 	 	 /* Keyframes for the 'moveReverse' animation */

	 	 	 	 @keyframes moveReverse {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 /* Moves the box back	
	 	 	 	 	 	 	 	 and forth horizontally */
	 	 	 	 	 	 	 	 transform: translateX(200px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Direction Property</h2>
	 	 <div class="container">

	 	 	 	 <div class="reverse-box"></div>
	 	 </div>
</body>

</html>

前后运动动画

以下示例演示了 animation-direction，并将值作为备用值。

在这种情况下，动画首先向前移动，然后向后移动。这里考虑的盒子在前半个周期中向前移动，然后在后半个周期中向后移动。


	 <!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 /* Styling the container for the boxes */

	 	 	 	 .container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: space-around;
	 	 	 	 	 	 align-items: center;
	 	 	 	 }

	 	 	 	 /* Styling for the box with	
	 	 	 	 	 	'alternate' animation */

	 	 	 	 .alternate-box {
	 	 	 	 	 	 padding: 10%;
	 	 	 	 	 	 background-color: #e74c3c;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-timing-function: linear;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-name: moveAlternate;
	 	 	 	 	 	 /* Animation oscillates back and forth */
	 	 	 	 	 	 animation-direction: alternate;
	 	 	 	 }

	 	 	 	 /* Keyframes for the 'moveAlternate' animation */

	 	 	 	 @keyframes moveAlternate {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 /* Moves the box back	
	 	 	 	 	 	 	 	 	 	and forth horizontally */
	 	 	 	 	 	 	 	 transform: translateX(200px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Direction Property</h2>
	 	 <div class="container">

	 	 	 	 <div class="alternate-box"></div>
	 	 </div>
</body>

</html>

来回运动动画

以下示例演示了 animation-direction，其值为 alternate-reverse。

在这种情况下，动画首先向后移动，然后开始向前移动。这里考虑的盒子首先向后移动，然后向前移动。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 /* Styling the container for the boxes */

	 	 	 	 .container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: space-around;
	 	 	 	 	 	 align-items: center;
	 	 	 	 }

	 	 	 	 /* Styling for the box with 'alternate' animation */

	 	 	 	 .alternate-box {
	 	 	 	 	 	 padding: 10%;
	 	 	 	 	 	 background-color: #e74c3c;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-timing-function: linear;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-name: moveAlternate;
	 	 	 	 	 	 /* Animation oscillates back and forth */
	 	 	 	 	 	 animation-direction: alternate;
	 	 	 	 }

	 	 	 	 /* Keyframes for the 'moveAlternate' animation */

	 	 	 	 @keyframes moveAlternate {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 /* Moves the box back and
	 	 	 	 	 	 	 	 forth horizontally */
	 	 	 	 	 	 	 	 transform: translateX(200px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Direction Property</h2>
	 	 <div class="container">

	 	 	 	 <div class="alternate-box"></div>
	 	 </div>
</body>

</html>

支持的浏览器

属性
animation-direction	43.0	10.0	16.0	9.0	30.0

打印本页