How to use css to achieve left and right movement effects-CSS Tutorial-php.cn

How to use css to achieve left and right movement effects

青灯夜游

Release： 2021-07-14 17:45:14

Original

3719 people have browsed it

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;}}".

How to use css to achieve left and right movement effects

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>

Copy after login

Rendering:

How to use css to achieve left and right movement effects

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;}}

Copy after login

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% from (same as 0%) to (same as 100%) Note: You can use an animated keyframes-selectors.
css-styles	Required. One or more legal CSS style attributes

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%
from (same as 0%)
to (same as 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!