First, the definition and usage
By @keyframes rules, the ability to create animations.
A predetermined percentage change in time of occurrence, either by keyword "from" and "to", is equivalent to 0% and 100%.
0% is the end time of the start time of the animation, the animation of 100%.
Second, grammar
@keyframes animationname {
from{css-styles;}
to{css-styles;}
}
@keyframes animationname {
0%{css-styles;}
100%{css-styles;}
}
Three, animation properties
| Attributes |
description | Property Value |
| animation-name | The name of the animation. | |
| animation-duration | Complete with animation time | |
| animation-delay | delay. | |
| animation-iteration-count | Animations are played. | |
| animation-timing-function | Animation speed curve. | ease: gradually slows down, Default linear: uniform ease-in: acceleration ease-out: deceleration ease-in-out: acceleration and deceleration |
| animation-direction | Whether in turn Reverse Play animation | normal: default value, normal animation playback; reverse: reverse the animation playback; alternate: Animation forward play several times in odd, even several times reverse play; alternate-reverse: the animation to play in reverse several times odd, even several times forward play; initial: Set the attribute to its default value; finherit: This property is inherited from the parent element. |
| animation-play-state | The animation is running or paused | paused: Pause Animation running: animation runs |
| animation-fill-mode | When the animation does not play a style to apply to the | node: The default value, and the end of the movie were as expected, upon completion of the last frame in the animation, the animation is reversed to the initial frame at forwards: animation continue to apply after the end position of the last keyframe backwards: rapid application of the initial frame of the animation elements when applying an animation style both: animation elements have both forwards and backwards effects |
Fourth, examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>keyframes</title>
<style>
*{margin:0;padding: 0;}
div{
width:400px;height:400px;
border:1px solid #333;
margin:0 auto;
position:relative;
}
p{
width:50px;height:50px;
background:purple;
border-radius:50%;
position:absolute;
left:0;top:175px;
animation:pmove 5s 2s infinite linear alternate;
}
@keyframes pmove{
0%{left:0px;top:175px;background:purple;}
25%{left:175px;top:350px;background:palevioletred;}
50%{left:350px;top:175px;background:plum;}
75%{left:175px;top:0px;background:sandybrown;}
100%{left:0px;top:175px;background:salmon;}
}
tr{height:30px;line-height:30px;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
