Home >Web Front-end >Front-end Q&A >How to use css @keyframes rule

How to use css @keyframes rule

青灯夜游Original: 2019-05-30 16:25:523991browse

@keyframes is a rule of CSS that can be used to define the behavior of a period of CSS animation; it needs to be used together with the animation attribute to create simple animation effects. Use animation properties to control the appearance of animations and bind animations to selectors.

How to use css @keyframes rules?

Animations can be created through @keyframes rules.

Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

animationname: Required. Defines the name of the animation.

keyframes-selector: required. Percentage of animation duration.

Legal values:

● 0-100%

● from (same as 0%)

● to (same as 100% )

css-styles Required. One or more legal CSS style attributes

Description:

The principle of creating animation is to gradually change one set of CSS styles into another set of styles . This set of CSS styles can be changed multiple times during the animation.

Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.

Note: Please use the animation property to control the appearance of the animation and bind the animation to the selector.

css @keyframes attribute 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%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

Rendering:

How to use css @keyframes rule

The above is the detailed content of How to use css @keyframes rule. For more information, please follow other related articles on the PHP Chinese website!

css 选择器 animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css nav-up attributeNext article：How to use css nav-up attribute

See more

How to use css @keyframes rule

Related articles