A. Animation Animation
1. The meaning of
Animation of CSS3 is made in the form of keyframes. Make it with the transform property.
2. The animation syntax
The animation property is a shorthand property that sets the following six animation properties;
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| value | describe |
|---|---|
| name | The name that needs to be bound to the selector Keyframes |
| duration | Specify when the animation needs to be completed |
| timing-function | Specifies the speed curve of the animation |
| delay | Specifies the delay time before the animation starts |
| iteration-count | Specifies the number of times an animation should be performed |
| direction | Specifies whether the animation is played in rotation |
| fill-mode | Specifies the style to be applied to an element when the animation does not play (when the animation is complete, or when the animation has a delay that does not start playing) |
| play-state | Specifies whether the animation is running or paused |
Next, the value of each attribute will be analyzed:
1. timing– the function attributes
| value | describe |
|---|---|
| linear | The speed of the animation is consistent from beginning to end |
| ease | By default, start slowly, speed up slowly, and slow down before you finish |
| ease-in | Slow start |
| ease-out | Low end |
| ease-in-out | Low speed Start end |
| cubic-bezier(n,n,n,n) | Its own value in the cubic- Bezier function. Possible values range from 0 to 1. |
2.iteration-count
| value | describe |
|---|---|
| <number> | The number of animation plays is n, which can be a decimal |
| infinite | Animation playback loop |
3.direction
| value | describe |
|---|---|
| normal | By default, the animation plays normally |
| alternate | Animation in odd number of times (1, 3, 5…) Forward, in even number of times (2, 4, 6…) Play in reverse. |
| reverse | Reverse playback |
| alternate-reverse | Animation in odd number of times (1, 3, 5…) Play backwards, in even numbers (2, 4, 6…) Forward play. |
4.fill-mode
| value | describe |
|---|---|
| none | By default, the animation does not apply any styles to the target element before or after the animation executes |
| forwards | The target retains the style of the last frame of the animation, which is determined by animation-direction and animation-rotund-count |
| backwards | Animation takes the style of the corresponding first frame and keeps animation-delay |
| both | Animations will perform forwards and backwards actions |
5.play-state
| value | describe |
|---|---|
| running | The animation is currently running |
| paused | The current animation has been stopped |
3. Add the transform properties
Specific properties can refer to www.w3school.com.cn/cssref/pr_t…
4. The real
This example implements looped animation
- The HTML code
<div class="mainBox">
<div class="sun">
<img src=".. /image/1.jpg">
</div>
<div class="earth">
<img src=".. /image/1.jpg">
</div>
</div>
Copy the code- CSS code
.mainBox {
position: relative;
width: 600px;
height: 600px;
}
.sun {
position: absolute;
width: 100px;
height: 100px;
top: 250px;
left: 250px;
}
.mainBox img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.earth {
position: absolute;
width: 100px;
height: 100px;
top: 250px;
left: 450px;
transform-origin: -150px 50px;
animation: rotate 5s linear forwards;
}
@keyframes rotate {
to {
transform: rotate(360deg)
}
}
Copy the code- The effect
Animate with clip-path
Clip-path :circle(40% at 50% 50%) clip-path: Circle (40% at 50% 50%) clip-path: Circle (40% at 50% 50%) clip-path: Circle (40% at 50%) clip-path: Circle (50%, 50%) Clip-circles can be used to animate shapes
Clip – path of actual combat
- The HTML code
<div class="imgBox">
<img src=".. /image/1.jpg">
</div>
Copy the code- CSS code
.imgBox img {
clip-path: circle(10% at 50% 50%);
transition: clip-path 8s ease-in-out;
}
.imgBox img:hover {
clip-path: circle(40% at 50% 50%)
}
Copy the code- The effect
