Home > Article > Web Front-end > What are the benefits of animation in css3
What are the benefits of animation in css3
- 青灯夜游Original
- 2022-01-13 16:04:421842browse
The benefits of implementing animation in css3: 1. The browser can optimize the animation (no animation when the element is invisible, reducing the impact on FPS); 2. The implementation code is relatively simple; 3. Hardware acceleration can be used; 4. Does not occupy the main thread.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Generally speaking, there are only three properties of CSS3 animation: transform, transition, and animation.
transition:1s (transition animation effect): from a specific value of one person to another transition value
transform:rotate(300deg) x,y rotation transform:rotageX (300deg) transform:rotageY(300deg)
transform:scale(0.5,2) Scale x-axis, y-axis>1 enlarge<1 reduce
transform:translateX(100px)Translate x-axis transform:translateY(100px) Translate the y-axis
transform:translate(100px 100px) Translate the x, y-axis
transition:rotate(300deg) scale(0.5,2) While scaling, While rotating
transition:transform 1s specifies the effect on transform
transition:margin 1s specifies the effect on margin and directly changes the size and position, showing the changed structure, without transition and deformation time
The focus of animation is on the timeline and key frames, which is to create frames so that different frames change differently at different time nodes. On the one hand, animation based on animation and @keyframe also aims to achieve the separation of performance and behavior
Small example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逐帧动画</title>
<style type="text/css">
.a{
width: 1000px;
height: 400px;
background: #bbb;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.b{
font-size: 50px;
width: 400px;
height: 150px;
position: absolute;
top:-150px;
left: 50px;
text-align: center;
background: #aaa;
line-height: 150px;
animation:s 2s infinite;
}
.c{
font-size: 50px;
width: 400px;
height: 150px;
position: absolute;
bottom:-150px;
right: 50px;
background: #ccc;
line-height: 150px;
animation:ss 2s infinite;
}
@keyframes ss{
0%{
transform:translateY(0px);
background: #888;
}
50%{
transform:translateY(-90px);
background: #7dd;
}
50%{
transform:translateY(-150px);
background: #3aa;
}
}
@keyframes s{
0%{
transform:translateY(0px);
background: #888;
}
50%{
transform:translateY(90px);
background: #7dd;
}
50%{
transform:translateY(150px);
background: #3aa;
}
}
</style>
</head>
<body>
<header>
<div>
<div>啦啦啦啦啦啦啦啦</div>
<div>啦啦啦啦啦啦啦啦</div>
</div>
</header>
</body>
</html>Benefits of using css3 to implement animation
1. The browser can optimize the animation (the element is not visible No animation, reducing the impact on FPS)
2. The implementation code is relatively simple
3. Hardware acceleration can be used
4. Does not occupy the main thread
Disadvantages:
1. Poor compatibility.
2. The animation control is not flexible enough, the running process is weak, it cannot attach a binding callback function, cannot add a callback function at a specific position or bind a playback event, and there is no progress report.
(Learning video sharing: css video tutorial)
The above is the detailed content of What are the benefits of animation in css3. For more information, please follow other related articles on the PHP Chinese website!