First, realize the two parts of the animation:
1. To use animation, you must first define the rules of the animation.
Define the rules in @keyframes
2. Apply animation elements: specify the keyframes for the start, end, and middle point styles of the animation
1. Define rules in @keyframes
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
from{
margin-left: 0;
}
to{
margin-left: 50%;
}
}
from and to are the two key frames of the animation, indicating the key frame style at the beginning and the key frame style at the end. The number in the form of a percent sign can also be used to describe the key frame, where from is consistent with the 0% effect, and to is consistent with the 100% effect.
When there are multiple keyframes, just set the corresponding keyframes. For example: 0%, 25%, 50%, 75%, 100%.
2. Apply animation elements
Keyframes that specify animation start, end, and midpoint styles
/*应用动画的元素*/
#div1:hover{
/*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
}
Effect picture:
complete code:
<style>
#div1{
width: 100px;
height: 100px;
border-radius: 50px;
background: pink;
}
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
from{
margin-left: 0;
}
to{
margin-left: 50%;
}
}
#div1:hover{
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
}
</style>
<body>
<div id="div1"></div>
</body>
3. Animation properties
animation-name: the name of the animation
animation-duration: specify the time for the animation to complete
animation-delay: specify the delay time for the start of the
animation animation-iteration-count: specify the number of times the animation should run
animation-direction: specify whether the animation is played forward and backward Play or alternately play the animation
animation-timing-function: Specify the speed curve of the animation
animation-fill-mode: The fill mode of the animation
animation: Shorthand for animation. The above properties can be set as a single property
4. Three musts for animation
1.animation-name: Animation name
2.animation-duration: Specifies the animation completion time, because the default time is 0
3…@keyframes rules
The above three, lack of any one can not achieve the animation effect.
5. animation: Shorthand syntax for animation
//animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
6. animation-direction: Specifies whether the animation is played forward, backward or alternately
Attributes:
1.normal: The animation plays normally (forward). Defaults
//normal向前运动
animation: mydonghua 2s linear 0.5s 3 normal;
2.reverse : The animation plays in the opposite direction (backwards)
//reverse 动画以反方向播放（向后）
nimation: mydonghua 2s linear 0.5s 3 reverse ;
3.alternate: the animation plays forward first, then backward
//alternate ：动画先向前播放，然后向后
nimation: mydonghua 2s linear 0.5s 3 alternate ;
4.alternate-reverse : The animation plays backward first, then forward
//alternate-reverse ：动画先向后播放，然后向前
nimation: mydonghua 2s linear 0.5s 3 alternate ;
7.animation-timing-function: Specify the speed curve of the animation
Attributes:
1.ease: Specify the animation that starts at a slow speed, then speeds up, and then ends slowly (default)
2.linear: Specifies the animation at the same speed from the beginning to the end
3.ease-in: Specifies the animation that starts at a slow
speed4 .ease-out: specifies the animation that ends at a slow speed
5.ease-in-out: specifies the animation that starts and ends slowly
8.animation-fill-mode specifies the fill mode of the animation
When the animation is not playing (before it starts, after it ends, or both), the animation-fill-mode property specifies the style of the target element.
Property value:
1.none Default value. The animation does not apply any styles to the element before or after it executes.
2. The forwards element will retain the style value set by the last keyframe, depending on the number of times and animation direction (depending on animation-direction and animation-iteration-count). Here we take 3 times and alternative as an example.
animation: mydonghua 2s linear 0.5s 3 alternate forwards ;
3. The backwards element will take the style value set by the first keyframe and keep that value during the animation delay. Depends on animation-direction
animation: mydonghua 2s linear 0.5s 3 alternate backwards ;
4.both animation will follow the forward and backward rules at the same time, thus expanding the animation properties in both directions.
animation: mydonghua 2s linear 0.5s 3 alternate both;
9. Describe keyframes as percentages
Set keyframes at 0%, 25%, 50%, 75%, and 100% to change the position of the element and the background color.
Full code:
<style>
#div1{
width: 100px;
height: 100px;
border-radius: 50px;
background: pink;
position: absolute;
}
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
0%{
top:0;
left: 0;
background-color: red;
}
25%{
top:100%;
left:25%;
background-color: orange;
}
50%{
top:0;
left: 50%;
background-color: purple;
}
75%{
top:100%;
left: 75%;
background-color: green;
}
100%{
top: 0;
left: 95%;
background-color: blue;
}
}
#div1:hover{
/*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
animation: mydonghua 3s linear 0.5s 3 alternate forwards ;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
Renderings:
