animation
CSS animation property （CSS动画属性）
The animation （动画） property is used to animate (gradually change from one style to another) CSS properties with discrete values: layout properties (border, height, width, etc.), properties defining position (left, top), font sizes, colors and opacities.
The animation property is one of the CSS3 properties. （Animation属性是CSS3属性之一。）
For understanding the animation properties a -webkit- prefix can be needed for older browsers. （为了理解动画属性，旧浏览器可能需要-webkit-前缀。）
（>观看视频课程 CSS -完整指南（包括Flexbox、Grid & Sass ））
Properties, which use a keyword as a value such as display: none; visibility: hidden; or height: auto; cannot be animated.
The @keyframes at-rule
The @keyframes at-rule （@ keyframes at-rule）
To use animation you must first specify what should happen at specific moments during the animation. This is defined with the @keyframes at-rule. （要使用动画，您必须首先指定在动画过程中的特定时刻应该发生什么。这是用@ keyframes at-rule定义的。）
The @keyframes rule consists of a keyword “@keyframes” followed by animation-name, which identifies the animation. The animation is then applied to an element by using this identifier as a value for the animation-name property. （@ keyframes规则由关键字“@ keyframes”后跟animation-name组成，用于标识动画。然后，通过使用此标识符作为animation-name属性的值，将动画应用于元素。）
In curly braces, we put keyframe selectors, which define keyframes (or waypoints) in the animation sequence when the styles should be changed. The keyframe selector can start with a percentage (%) or with the keywords “from” (same as 0%) and “to” (same as 100%). 0% is a starting point of the animation, 100% is the endpoint. （在大括号中，我们放置了关键帧选择器，这些选择器在应更改样式的动画序列中定义关键帧（或路点）。 关键帧选择器可以从百分比（ % ）或关键字“from” （与0%相同）和“to” （与100%相同）开始。0%是动画的起点， 100%是终点。）
Example of animation with the @keyframe rule:
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 4s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property.</div>
</body>
</html>
In this example, we bind the animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background color of the <div> element from “green” to “grey”.
Animation-related Properties
Animation-related Properties （动画相关属性）
Animation is the shorthand property used for setting all the animation properties in a single declaration. We are listing all standard animation-related properties below. （Animation是用于在单个声明中设置所有动画属性的速记属性。我们在下面列出了所有与动画相关的标准属性。）
Now let’s see animation-related properties in action. （现在，让我们来看看与动画相关的属性。）
Example of animation with some animation-related properties:
@keyframes pulse {
/* declare animation actions here */
}
.element {
animation-name: pulse;
animation-duration: 3.5s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
The same can be declared using the animation shorthand property
*/
.element {
animation: pulse 3.5s ease-in 1s alternate infinite none running;
}
Animation-name
Animation-name （动画轻松）
This property defines the name of the @keyframes rule you want to apply. （此属性定义要应用的@ keyframes规则的名称。）
animation-name: keyframe-name | none | initial | inherit
Example of the animation-name property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>
Animation-duration
Animation-duration （持续时间）
It defines the length of time (in seconds or milliseconds) that animation takes to complete one cycle. If this property is not specified, the animation will not occur. （它定义了动画完成一个周期所需的时间长度（以秒或毫秒为单位）。如果未指定此属性，则不会出现动画。）
animation-duration: time | initial | inherit
Example of the animation-duration property:
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #eee
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>
Animation-timing-function
Animation-timing-function （动画计时功能）
This property defines how an animation will progress over the duration of each cycle — not throughout the whole of the animation. （此属性定义动画如何在每个周期的持续时间内进行，而不是在整个动画中进行。）
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
Example of the animation-timing-function property with the “ease” value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
-webkit-animation: element 5s infinite;
/* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease;
/* Safari 4.0 - 8.0 */
animation: element 5s infinite;
animation-timing-function: ease;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>
Animation-delay
Animation-delay （动画延迟）
This property sets the time (in seconds or milliseconds) between the element being loaded and the start of the animation. （此属性设置正在加载的元素和动画开始之间的时间（以秒或毫秒为单位）。）
animation-delay: time | initial | inherit
Example of the animation-delay property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>
Animation-direction
Animation-direction （动画方向）
It defines whether the animation should play in reverse on alternate cycles or not. Its default resets on each cycle. （它定义了动画是否应在交替循环中反向播放。其默认值在每个循环中重置。）
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
The following values can be applied:
normal — (default) - animation is played forward (keyframes 0% - 100%) （-正常— （默认） -动画向前播放（关键帧0% - 100% ））
reverse — animation is played backwards (keyframes (100% - 0%) （-反向—动画向后播放（关键帧（ 100 ％ - 0 ％ ））
alternate — the animation is played forward, then it is reversed and repeated. （- alternate —动画向前播放，然后反转并重复播放。）
alternate-reverse — the animation is played backwards then forward. （- alternate-reverse -动画向后播放，然后向前播放。）
Example of the animation-direction property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards.</p>
<div></div>
</body>
</html>
Animation-iteration-count
Animation-iteration-count （动画迭代计数）
Sets the number of times an animation cycle should be played before stopping. The default value is one, but any positive integer value can be set. If you set infinite keyword, the animation will be played endlessly. （设置停止前应播放动画周期的次数。默认值为1 ，但可以设置任何正整数值。如果设置无限关键字，动画将无休止地播放。）
A zero or negative integer will never play the animation. （>零或负整数永远不会播放动画。）
animation-iteration-count: number | infinite | initial | inherit
Example of the animation-iteration-count property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
（HTML）
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: 3;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
Animation-fill-mode
Animation-fill-mode （动画延迟）
This property specifies a style for the element applied before or after the animation is executed. （此属性指定在执行动画之前或之后应用的元素的样式。）
animation-fill-mode: none | forwards | backwards | both | initial | inherit
It can assume the following values:
forwards - specifies that the element should keep the style values set by the last keyframe (depends on animation-iteration-count and animation-direction properties). （- forward -指定元素应保留由最后一个关键帧设置的样式值（取决于animation-iteration-count和animation-direction属性）。）
backwards - specifies that the element should get the style values set by the first keyframe (depends on animation-direction) and keep it within animation-delay period. （-向后-指定元素应获取由第一个关键帧设置的样式值（取决于动画方向）并将其保持在动画延迟期内。）
both - specifies that the animation should follow the rules for both forwards and backwards. （- both -指定动画应遵循前进和后退的规则。）
none - (default) specifies that no style will be applied to the element before or after the animation is executed （- none - （默认值）指定在执行动画之前或之后不会对元素应用任何样式）
Example of the animation-fill-mode property with the “forwards” value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
-webkit-animation: element 5s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation: element 5s;
animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: blue;
}
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>
Animation-play-state
Animation-play-state （动画播放状态）
This property specifies whether the animation is playing or paused. （此属性指定动画是正在播放还是已暂停。）
animation-play-state: paused | running | initial | inherit
The default value is running. （默认值为RUNNING。）
Example of the animation-play-state property with the “running” value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #ccc;
position: relative;
animation: play 10s;
animation-play-state: running;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-play-state example</h2>
<p>Here the animation-play-state is set to "running".</p>
<div></div>
</body>
</html>
Multiple Animations
Multiple Animations （多重动画）
It is possible to declare multiple animations on a selector, you just need to separate the values with commas. （可以在选择器上声明多个动画，您只需要用逗号分隔值。）
Example of multiple animations on a selector:
<!DOCTYPE html>
<html>
<head>
<style>
html,
（HTML）
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
}
@keyframes pulse {
0%,
（0% ，）
100% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
}
@keyframes nudge {
0%,
（0% ，）
100% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>