CSS - animation 简写属性_CSS 菜鸟教程

animation 简写是一个 CSS 属性，可以更轻松地在样式之间应用动画。

成分属性

此属性是以下 CSS 属性的简写：

可能的值

以下是 animation 速记属性的所有可能值的列表。

<single-easing-function> - 指定过渡的类型。该值需要来自 <easing-function> 中的值列表。
<single-animation-iteration-count> - 动画的播放次数。该值需要位于 animation-iteration-count 中的选项中。
<single-animation-direction> - 动画的播放方向。该值需要介于 animatiom-direction 提供的值中。
<single-animation-fill-mode> - 选择在执行动画之前和之后应应用于动画目标的样式。该值必须来自 animation-fill-mode 列表。
<single-animation-play-state> - 确定动画当前是否正在播放。animation-play-state 中的值之一必须是 value。

一个或多个单个动画（用逗号分隔）组成 animation 属性。

每个 animation 属性定义为：

<time> 值出现零次、一次或两次。
以下值出现零次或一次
- <single-easing-function>
- <single-animation-iteration-count>
- <single-animation-direction>
- <single-animation-fill-mode>
- <single-animation-play-state>
动画的名称，可选，可以是 <string>、<custom-ident> 或 none。

语法

animation = <single-animation>#	
<single-animation> = <time[0s,∞]>||<easing-function>||<time>||<single-animation-iteration-count>||<single-animation-direction>||<single-animation-fill-mode>||<single-animation-play-state>||[none|<keyframes-name> ]

适用于

所有 HTML 元素。

CSS 动画 - 基本示例

在以下示例中，使用 5 秒的缓入淡出动画，通过动画速记属性为框元素生成连续的交替上升效果。

<html>
<head>
<style>
	 	:root {
	 	 	 overflow: hidden;
	 	 	 background-color: lightcoral;
	 	 	 display: flex;
	 	 	 height: 400px;
	 	 	 justify-content: center;
	 	}
	 	.box {
	 	 	 background-color: lightgray;
	 	 	 border-radius: 10%;
	 	 	 height: 150px;
	 	 	 aspect-ratio: 1 / 1;
	 	 	 animation: 5s ease-in-out 0s infinite alternate box-rise;
	 	}
	 	@keyframes box-rise {
	 	 	 from {
	 	 	 transform: translateY(100vh);
	 	 	 }
	 	 	 to {
	 	 	 transform: translateY(0);
	 	 	 }
	 	}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS 动画 - 为多个属性制作动画

在下面的示例中，使用 animation 速记属性对多个属性进行平滑的动画处理。

<html>
<head>
<style>
	 	:root {
	 	 	 overflow: hidden;
	 	 	 background-color: lightgreen;
	 	 	 display: flex;
	 	 	 height: 400px;
	 	 	 justify-content: center;
	 	}
	 	.flower {
	 	 	 background-color: #ff69b4;	
	 	 	 border-radius: 15%;
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 animation: 3s ease-in-out 0s infinite alternate blooming-flower;
	 	}
	 	@keyframes blooming-flower {
	 	 	 from {
	 	 	 	 	transform: translateY(110vh) rotate(60deg);
	 	 	 	 	background-color: #00bfff;	
	 	 	 	 	box-shadow: 0 0 10px #00bfff;
	 	 	 }
	 	 	 to {
	 	 	 	 	transform: translateY(0) rotate(0);
	 	 	 	 	background-color: #ffd700;	
	 	 	 	 	box-shadow: 0 0 20px #ffd700;
	 	 	 }
	 	}
</style>
</head>
<body>
<div class="flower"></div>
</body>
</html>

CSS 动画 - 应用多个动画

在下面的示例中，animation 速记属性用于应用双动画序列。

<html>
<head>
<style>
	 	:root {
	 	 	 overflow: hidden;
	 	 	 background-color: #ffeb3b;	
	 	 	 display: flex;
	 	 	 height: 400px;
	 	 	 justify-content: center;
	 	}
	 	.firework {
	 	 	 background-color: #ff4500;	
	 	 	 border-radius: 50%;
	 	 	 width: 200px;
	 	 	 height: 120px;
	 	 	 animation: 3s linear 0s infinite alternate explode-firework, 4s linear 0s infinite alternate color-shift;
	 	}
	 	@keyframes explode-firework {
	 	 	 from {
	 	 	 	 	transform: translateY(110vh) rotate(180deg);
	 	 	 	 	background-color: #ff0000;	
	 	 	 	 	box-shadow: 0 0 10px #ff0000;
	 	 	 }
	 	 	 to {
	 	 	 	 	transform: translateY(0) rotate(0);
	 	 	 	 	background-color: #0000ff;	
	 	 	 	 	box-shadow: 0 0 20px #0000ff;
	 	 	 }
	 	}
	 	@keyframes color-shift {
	 	 	 from {
	 	 	 	 	filter: hue-rotate(0deg);
	 	 	 }
	 	 	 to {
	 	 	 	 	filter: hue-rotate(360deg);
	 	 	 }
	 	}
</style>
</head>
<body>
<div class="firework"></div>
</body>
</html>

CSS 动画 - 级联多个动画

在以下示例中，使用 animation shorthand 属性以平滑的方式将两个不同的动画级联在一起。

<html>
<head>
<style>
	 	:root {
	 	 	 overflow: hidden;
	 	 	 background-color: #ff7f50;	
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 200px;
	 	}
	 	.shape {
	 	 	 background-color: #9acd32;	
	 	 	 width: 120px;
	 	 	 height: 120px;
	 	 	 border-radius: 30%;
	 	 	 animation: 2s ease-in-out 0s infinite alternate ascent, 2s linear 0s infinite alternate swing;
	 	}
	 	@keyframes ascent {
	 	 	 from {
	 	 	 	 	transform: translateY(110vh);
	 	 	 }
	 	 	 to {
	 	 	 	 	transform: translateY(0);
	 	 	 }
	 	}
	 	@keyframes swing {
	 	 	 from {
	 	 	 	 	transform: translateX(90vw);
	 	 	 }
	 	 	 to {
	 	 	 	 	transform: translateX(10vw);
	 	 	 }
	 	}
</style>
</head>
<body>
<div class="shape"></div>
</body>
</html>

<< CSS - padding-right CSS - border-top-left-radius 属性 >>