How does CSS achieve animation effects -- mobile?
May 29, 2021 Article blog
When developing a Web page, inserting a picture or shape that is always fixed in one place can cause visual fatigue for viewers. I f you can make the motion effect, you can solve this problem perfectly. S o how do you achieve motion effect-panning in a Web page? This article W3Cschool teaches you how CSS can animate - move.
To achieve the effect:
Ideas
First, we create a new square, which can be defined directly with
<rect></rect>
> labels
<svg></svg>
The animation effect can then be defined with
<animate>
Several common properties < the > are defined as follows:
- attributeName: specify which property needs to be animated;
- from: specifies the starting value of the property;
- to: specify the end value of the property;
- dur : specify when the animation will run (duration);
- fill: "freeze|remove": specify whether the animation stays at the end of the playback or returns to the starting position after it has been played;
- repeatCount: specify the number of times the animation repeats, unlimited repeat animation: indefinite;
The specific code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>平移动画- 编程狮(w3cschool.cn)</title>
</head>
<body>
<svg width="500" height="150">
<rect width="150" height="150" fill="red"> <!-- 创建一个正方形 -->
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
</body>
</html>
That's how CSS works with animation -- the whole thing that moves. For more CSS-related tutorials, follow the W3Cschool website.
Related CSS effects: How CSS sets picture rotation, and how CSS achieves shadow effects