[CSS3] CSS3 animation — I am one step closer to the cool front end
The blog instructions
Part of the information involved in this article comes from the Internet, as well as my own summary and views. The purpose of sharing is to build the community and consolidate myself. If the information cited infringement, please contact me to delete! Thank god I was here. Thank you for coming!
instructions
CSS3 can animate HTML elements without using JavaScript or Flash.
In order to learn the front end of the dynamic effect, I simply did everything. For now, I’m going to do a wave of CSS animation.
What is animation
⭕ Old rules, question beginning.
Specify keyframes on the time nodes that need to change. Keyframes are the style defined at the moment. For example, IF I move 5m to the left in 1s and 15m to the left in 3s, then there will be two key frames. Because of these two key frames, the picture will be shifted and the animation will be generated.
The following statement sums it up nicely: animation gradually changes elements from one style to another.
CSS3 animation mainly relies on @keyframes and animation to achieve.
Browser support for @keyframes and animation
@ keyframes rules
The @keyFrames rule is to create an animation.
The @keyframes rule specifies a CSS style and the animation will gradually change from the current style to the new style.
@keyframes myfirst
{
from {background: red; }to {background: yellow;}
}
Copy the code
The above is a simple animation. The keywords “from” and “to” are equal to 0% and 100%. 0% is the beginning of the animation, 100% is the completion of the animation. That’s going from red to yellow.
For best browser support, 0% and 100% selectors are the best choices.
animation
Now that we have the keyframe for the animation, we need to implement and bind the keyframe to a DOM.
grammar
You can write attributes together or separately.
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Copy the code
animation-name
Specifies the name of the keyframe to bind to the selector
grammar
animation-name: keyframename|none; // keyframename specifies the name of the keyframe to bind to the selectorCopy the code
animation-duration
The animation specifies how many seconds or milliseconds it takes to complete
grammar
animation-duration: time;
// timeSpecifies how long it takes for the animation to finish playing.Copy the code
animation-timing-function
Specify how the animation will complete a cycle
grammar
animation-timing-function: value;
Copy the code
Animation function
-
Linear animation has the same speed from beginning to end.
-
Help ease the default. The animation starts at a low speed, then speeds up and slows down before ending.
-
Ease-in animation starts at a low speed
-
Ease-out animation ends at a low speed.
-
Ease-in-out animations start and end at low speeds.
-
Steps (int, start | end) specifies the number of intervals in time function (step).
There are two arguments. The first argument specifies the number of intervals between functions, which is a positive integer (greater than 0).
The second parameter is optional and indicates whether the animation is continuous from the beginning or end of the time period.
-
Cubic – Bezier (n,n,n,n) Bezier curve
For a Bessel curve of a website, you will thank 🙏 my ha! address
animation-delay
Defines when the animation starts, in seconds (s) or milliseconds (ms).
grammar
animation-delay: time;
// timeDefines the time, in seconds or milliseconds, to wait before the animation beginsCopy the code
animation-iteration-count
Defines how many times the animation should play.
grammar
animation-iteration-count: value; // Infinite specifies that the animation should play an infinite number of times (forever)Copy the code
animation-direction
Whether to loop alternately and play the animation backwards.
This is a highly playable property.
grammar
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Copy the code
Argument parsing
- Normal Default value. Press the animation to play normally.
- Reverse The animation is played in reverse.
- Alternate animation in odd numbers (1, 3, 5…) Forward, in even number of times (2, 4, 6…) Play in reverse.
- Alternate -reverse animation at odd times (1, 3, 5…) Play backwards, in even numbers (2, 4, 6…) Forward play.
- The inherited property of initial
- Inherit Indicates the inherited property
animation-fill-mode
Property specifies the style to be applied to the element when the animation does not play (when the animation is complete, or when the animation has a delay before playing begins).
Use this property if you need to take into account the state of the animation, such as leaving the animation unchanged.
grammar
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Copy the code
Argument parsing
- None The default value. The animation does not apply any styles to the target element before or after the animation executes.
- Forwards at the end of the animation (determined by animation-rotund-count), this property value will be applied to the animation.
- Backwards animations will apply property values defined in keyframes that start the first iteration of the animation during the animation-delay definition.
- Both animation follows the rules of forwards and backwards.
- The inherited property of initial
- Inherit Indicates the inherited property
animation–play-state
Specifies whether the animation is running or paused.
grammar
animation-play-state: paused|running; // paused specifies the paused animation // running specifies the running animationCopy the code
case
Color change
The color of div changes from red to yellow
code
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Animation test</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 6s;
}
@keyframes myfirst
{
from {background:red; }to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Copy the code
The effect
Clockwise movement
Move the div clockwise
code
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Animation test</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px; }25% {background:yellow; left:200px; top:0px; }50% {background:blue; left:200px; top:200px; }75% {background:green; left:0px; top:200px; }100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Copy the code
The effect
conclusion
In fact, I also see these basic animations, in fact, it is not complicated to achieve, those complex animations are also built through such basic animations. But is there a question of how to remember the use of such attributes?
This question is the same as asking how you can’t remember the shortcut keys of PS because you haven’t used them very often. After drawing hundreds of complex animations, I believe you will have a better understanding of this animation!
Look forward to the animation case of the following pattern! It’s only just begun!
Thank you
Universal network
As well as hard-working self, personal blog, GitHub test, GitHub
Public number – return child mo, small procedure – small return blog
If you feel helpful to you, might as well give me a thumbs up 👍, continue to pay attention to ha!