Table of contents
foreword
Achieving animation effects is an important part of improving user experience at the front end. From CSS animation to JS animation frames, each technology has its unique advantages and applicable scenarios. This article will share with you the native animation technology of browser CSS
There are two forms of animation in css, namely Transition (transition, elements gradually change from one style to another) and Animation (animation, elements change styles through several steps)
Transition
The transition attribute is used to define when the element initiates the start and end states of the entire transition, as well as the value change rules of each transition attribute. It is a simple, easy-to-use CSS technique that produces gorgeous transition effects that increase the interactivity and user appeal of web pages
Attributes
transition-property: Transition controls which property, defaults to all, can be multiple properties, separated by commas.
transition-duration: The duration of the transition, the default is 0, and the unit is seconds (s) or milliseconds (ms).
transition-timing-function: Set the speed curve of the transition (bezier curve later), the default ease is gradual. It can be linear, ease progressive, ease-in acceleration, ease-out deceleration, etc.
transition-delay: Control when the transition starts (delay), the default is 0, and the unit is seconds (s) or milliseconds (ms).
The following is a basic writing method, the transition time is 1 second, the delay is 1 second, it takes effect for the left attribute, and the transition speed curve is ease-out
transition-duration: 1s;
transition-property: left;
transition-timing-function: ease-out;
transition-delay: 1s;abbreviation
Multiple sub-properties above can be achieved with the following shorthand to achieve the same effect.
transition: transition-property transition-duration transition-timing-function transition-delay;
tips : The order of the parameters has no effect, the parameters have two times, the duration is written first, and the delay is written later
Take a look at the following example. We trigger the transition animation through hover, which takes effect for the left attribute. The transition time is 0.5 seconds, and the execution is delayed by one second. The animation effect is uniform, that is, the whole process after hover is 1.5 seconds
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
html,
body {
width: 100%;
height: 100%;
position: relative;
}
.box {
width: 200px;
height: 200px;
left: 0;
position: absolute;
background: lightblue;
}
.box:hover {
left: 100px;
transition: left 0.5s linear 1s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
The effect is as follows
Advanced usage
- transition-property can set all to apply to all properties. When there are multiple properties that need to be set to different transition effects, they can be separated by commas, such as
.box:hover {
left: 100px;
width: 400px;
transition: left 1s linear 1s, width 1s ease-in-out;
}
- If you want to make the animation less rigid when the trigger fails (cancel the hover operation), you can consider adding the same transition to the original style. We use the previous CSS variable to define the transition animation using variables for easy reuse.
html,
body {
width: 100%;
height: 100%;
position: relative;
--box-transition: left 1s linear 1s, width 1s ease-in-out;
}
.box {
width: 200px;
height: 200px;
left: 0;
position: absolute;
background: lightblue;
transition: var(--box-transition);
}
.box:hover {
left: 100px;
width: 400px;
transition: var(--box-transition);
}
- The transition-timing-function has the following common methods:
- linear: uniform linear
- ease: Specifies the transition effect, which starts slowly, then speeds up, and then ends slowly
- ease-in: Specifies transition effects that start slowly
- ease-out: specifies the transition effect that ends slowly
- ease-in-out: Specifies a transition that starts and ends slower
- steps(int, start | end): Specifies a step function with two arguments. The first argument specifies the number of intervals in the function. The second parameter refers to the calculation from the beginning or the end of each step. You can refer to the picture below. The
effect can refer to the gif below:
transition-timing-function: steps(3, end)
transition-timing-function: steps(3, start)
-
step-start: equivalent to steps(1, start)
-
step-end: equivalent to steps(1, end)
-
cubic-bezier(): Bezier curve function, you can refer to this website for online debugging
Animations
After talking about the transition of CSS, let's take a look at the animations animation, which is used by setting the animation (animation) attribute and @keyframes (keyframes).
The syntax is as follows
@keyframes keyframes
There are several ways to define keyframes, which are used to declare style properties at different stages
from&to
The from attribute can set the starting style, and the to can set the ending style. Both from and to can be set separately. We split the entire animation into multiple frames, the effect of the first frame is from, and the last frame is to.
@keyframes animationname {
from {
/* 开始样式 */
}
to {
/* 结束样式 */
}
}
@keyframes animationname1 {
from {
/* 开始样式 */
}
}
@keyframes animationname2 {
to {
/* 结束样式 */
}
}percentage
The 100% writing method can be understood as dividing an animation into multiple key points. For example, the total time of the entire animation is 4 seconds, and the corresponding style per second can use the following statement
@keyframes myAnimation {
0% {
left: 10px;
}
25% {
left: 40px;
}
50% {
left: 80px;
}
100% {
left: 100px;
}
}animation animation
Above we described the definition of key frames. If you need to define multiple animations or irregular animations, key frames are very important. So how should we use it after defining the animation? This is inseparable from the next animation animation properties
Attributes
Like transition, animation also has many configurable properties
- animation-name: Use the animation name defined by @keyframes.
- animation-duration: The duration of the animation. The property is the same as transition-duration
- animation-timing-function: The speed curve of the animation. Attributes are the same as transition-timing-function
- animation-delay: Specifies the animation delay time. The property is the same as transition-delay
- animation-iteration-count: Specifies the number of times the animation loops. Set infinite to indicate an infinite loop, or set a positive integer to indicate the number of times
- animation-direction: Specifies the animation direction. understood as reciprocating motion
- animation-fill-mode: Specifies the state when the animation ends.
- animation-play-state: Specifies whether to play or pause the animation. Paused is suspended, running is running
abbreviation
animation can abbreviate the above configuration in a style
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state
tips : Like the transition, the order of the parameters is not fixed, there are two times, the duration is written first, and the delay is written later
The following is an example, where the meaning of the configuration is to use myAnimation animation, delay one second to execute uniform animation, the animation process is 2 seconds, reciprocate 3 times, and do not reset the position after completion
@keyframes myAnimation {
from {
left: 0px;
}
to {
left: 100px;
}
}
.box-move {
animation: myAnimation 2s linear 1s 3 alternate forwards running;
}The effect is as follows
Advanced usage
Since attributes 2, 3, and 4 are the same as transition, let me introduce attributes 6, 7, and 8 above.
- animation-direction is used to control the direction of animation. If the process of an animation is A->B, the default is normal, which means A->B; set to reverse means B->A; when animation-iteration-count is set to infinite: alternate means A->B->A->B......, the effect is as follows: alternate-reverse means B->A->B->A..., the effect is
as
follows
:
- animation-fill-mode refers to setting the state of the frame before the first frame or the frame after the last frame .
When it is set to forwards, it means that the last frame of the animation will keep the status quo and will not be reset to the first frame;
when it is set to backwards, the previous frame (frame -1) of the animation remains the same as the first frame; when it is set
to both, it means that it has both forwards and backwards effects - animation-play-state: Specifies whether to play or pause the animation. Paused is suspended, and running is running.
The common operation is to control animation pause and play through js<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style> html, body { width: 100%; height: 100%; position: relative; transition: left 3s linear; } .box { width: 200px; height: 200px; top: 50px; position: absolute; background: lightblue; } @keyframes myAnimation { from { left: 0px; } to { left: 100px; } } .box-move { animation: myAnimation 1s infinite forwards alternate; } </style> </head> <body> <div class="box box-move"></div> <button id="play_pause">暂停/继续</button> <script> const btn = document.querySelector("#play_pause"); const box = document.querySelector(".box"); btn.addEventListener("click", () => { const { style } = box; if (style.animationPlayState === "paused") { return (style.animationPlayState = "running"); } style.animationPlayState = "paused"; }); </script> </body> </html>The effect is as follows
Bezier Curve
What kind of sparks can the Bezier curve and front-end animation collide with? It can be said that the relationship between the two is very close. Most of the front-end animations use uniform animation, and the effect is relatively blunt. If you want the animation to look smoother and more in line with human observation, you need to use Bezier curves
A Bezier curve is a curve composed of a series of control points. Its shape is determined by these control points, rather than being described by a specific mathematical formula like a polynomial curve.
A Bezier curve usually consists of three or more control points. When the number of control points is three, it is called a quadratic Bézier curve; when it is four, it is called a cubic Bézier curve; and so on.
The advantage of using control points to define a Bézier curve is that you can directly control the shape of the curve, and you can easily modify these points without recalculating the entire curve.
We can simulate Bezier curves (cubic Bezier curves) on this website
Summarize
This article shares with you the effect of using transition to achieve style change transition and animation animation effect from the two major animation properties of CSS. Transition is suitable for a single style property transition. Its advantages are good compatibility, high performance, and smooth transition style changes. Animations uses @keyframes and animation properties to achieve complex animation effects. It has higher flexibility and can define any key frame and timeline, and realize any property change animation. In actual development, we can choose the appropriate technology according to the needs of the project, so that they can play the greatest role
The above is the whole content of the article, I hope it can be helpful to you, and you can comment or private message related questions. Finally, if you think the article is good, I hope Sanlian will support the blogger, thank you!
Related code: myCode: some small cases or projects based on js - Gitee.com