animation 简写是一个 CSS 属性，可以更轻松地在样式之间应用动画。
成分属性
此属性是以下 CSS 属性的简写：
- animation-delay
- animatiom-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
可能的值
以下是 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>
