Home >Web Front-end >CSS Tutorial >How to use css to achieve left and right movement effects
How to use css to achieve left and right movement effects
- 青灯夜游Original
- 2021-07-14 17:45:143720browse
In css, you can use "@keyframes" rules and animation attributes to achieve left and right motion effects. The main syntax is "@keyframes animation name {0% {left:0px;}50%{left:200px;} 100% {left:0px;}}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can use "@keyframes" rules and animation attributes to achieve left and right movement effects.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
Description:
Using @keyframes rules, you can create animations. Animation is created by gradually changing from one CSS style setting to another.
You can change the CSS style settings multiple times during the animation process.
Specify when the change occurs using %, or the keywords "from" and "to", which are the same as 0% to 100%. 0% is when the animation starts, 100% is when the animation is finished.
Syntax:
@keyframes animationname {keyframes-selector {css-styles;}}| Value | Description |
|---|---|
| animationname | Required. Define the name of the animation. Defined by the animation attribute. |
| keyframes-selector | Required. Percentage of animation duration. Legal values: 0-100% Note: You can use an animated keyframes-selectors. |
| css-styles | Required. One or more legal CSS style attributes |
(Learning video sharing: css video tutorial)
The above is the detailed content of How to use css to achieve left and right movement effects. For more information, please follow other related articles on the PHP Chinese website!