keyframes
CSS @keyframes Rule （CSS @ keyframes规则）
The @keyframes at-rule is the basis for keyframe animations used to animate (gradually change from one style to another) many CSS properties. This rule allows specifying what should happen at specific moments during the animation by defining styles for keyframes (or waypoints) along the animation sequence. （@ keyframes at-rule是用于动画化（逐渐从一种样式更改为另一种样式）许多CSS属性的关键帧动画的基础。此规则允许通过沿动画序列定义关键帧（或路点）的样式来指定动画期间特定时刻应发生的情况。）
The @keyframes is one of the CSS3 properties. （@ keyframes是CSS3属性之一。）
The @keyframes rule and its identifier are followed by a rule sets (i.e. style rules with selectors and declaration blocks, as in normal CSS code) delimited by curly braces. （@ keyframes规则及其标识符后跟一个规则集（即带有选择器和声明块的样式规则，如在普通CSS代码中） ，由大括号分隔。）
The keyframes in the animation sequence
The keyframes in the animation sequence （动画序列中的关键帧）
In curly braces, keyframe selectors are put, which define keyframes in the animation sequence when the styles should be changed. During the animation sequence, the set of CSS styles can be changed many times. （在大括号中，放置关键帧选择器，该选择器在应更改样式的动画序列中定义关键帧。在动画序列中， CSS样式集可以多次更改。）
The keyframe selector
The keyframe selector （关键帧选择器）
The keyframe declaration block includes CSS properties and their values. 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. （关键帧声明块包括CSS属性及其值。 关键帧选择器可以从百分比（ ％ ）或关键字“from” （与0 ％相同）和“to” （与100 ％相同）开始。0 ％是动画的起点， 100 ％是终点。）
The acceptable prefixes
The acceptable prefixes （可接受的前缀）
The @keyframes rule is fully supported by major browsers. However, for some prefixes are used:
-webkit- Google Chrome 4.0 （- -webkit-谷歌浏览器4.0）
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-o- Opera 12.0
Syntax
Syntax （语法）
@keyframes animationname {keyframes-selector {css-styles;}}
The @keyframes as a keyword
The @keyframes as a keyword （@ keyframes作为关键字）
The @keyframes rule consists of a keyword “@keyframes” followed by an identifier (chosen by the developer), which defines the animation. To bind the animation to a certain element this identifier is referred to as a value for the animation-name property. （@ keyframes规则由一个关键字“@ keyframes”后跟一个标识符（由开发人员选择）组成，该标识符定义了动画。要将动画绑定到特定元素，此标识符被称为animation-name属性的值。）
This is how it looks like:
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
（/*或使用动画速记属性*/）
animation: your-animation-name 1s …;
}
Example of the @keyframes rule with the background-color property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 50px;
animation: backgrounds 4s infinite;
}
@keyframes backgrounds {
0% {
background-color: #8ebf42
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #cccccc;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="element">The background of this text is animated.</div>
</body>
</html>
In this example, we animate the background-color property. First, we set an identifier for the animation - bouncing. Then we set keyframe selectors - 0%, 50%, and 100% and define values for the property - green, blue and grey. It means that the background color at the starting point (0%) will be light green until it reaches another keyframe (50%). In the middle of the animation sequence, the background will turn to light blue (from 50%-100%), and at the endpoint (100%) it will be grey.
Example of the @keyframes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 10px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
@-webkit-keyframes element {
0% {
top: 0px;
background: #1c87c9;
width: 100px;
}
100% {
top: 200px;
background: #8ebf42;
width: 150px;
}
}
@keyframes element {
0% {
top: 0px;
background: #1c87c9;
width: 100px;
}
100% {
top: 200px;
background: #8ebf42;
width: 150px;
}
}
</style>
</head>
<body>
<h2>@keyframes rule example</h2>
<div></div>
</body>
</html>
Example of using the @keyframes
to make a falling image:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
（HTML）
body {
height: 90%;
}
.container {
margin: 30px auto;
min-width: 320px;
max-width: 600px;
height: 90%;
overflow: hidden;
}
img {
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-animation: fall 5s infinite;
animation: fall 5s infinite;
}
@-webkit-keyframes fall {
from {
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
opacity: 1;
}
to {
-webkit-transform: rotate(90deg) translateX(200px);
transform: rotate(90deg) translateX(200px);
opacity: 0.1;
}
}
@keyframes fall {
from {
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
opacity: 1;
}
to {
-webkit-transform: rotate(90deg) translateX(200px);
transform: rotate(90deg) translateX(200px);
opacity: 0.1;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="container">
<img src="/build/images/w3cdoc-logo-black.png" alt="w3cdoc" width="150" height="50" />
</div>
</body>
</html>
Values
Values （价值）
| Value | Description |
|---|---|
| animationname | Specifies the name of the animation. This value is required. |
| keyframes-selector | Specifies the percentage of the animation duration. |
| Values are: |
0-100% from (same as 0%) to (same as 100%)
This value is required.| |css-styles|CSS style properties. This value is required.| |initial|Makes the property use its default value.| |inherit|Inherits the property from its parents element.|