Home > Article > Web Front-end > What rules need to be applied when using css3 animation?

What rules need to be applied when using css3 animation?

(*-*)浩Original: 2019-05-31 18:00:135586browse

CSS3 @keyframes Rules

## Tag definition and usage instructions

Using @keyframes rules, you can create animations.

Create animations 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 completed. (Recommended learning:
CSS3 Video Tutorial.)
For best browser support, you should always define selectors for 0% and 100%.

Note: Use the animation attribute to control the appearance of the animation, and also use the selector to bind the animation. .

Syntax

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

ValueDescriptionanimationname Required. Define the name of the animation. keyframes-selectorcss-styles Required. One or more legal CSS style properties



	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.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
    <style> 
        div
        {
        width:100px;
        height:100px;
        background:blue;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
        }
        
        @keyframes mymove
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
        
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
    </style>
</head>
<body>

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

<div></div>

</body>
</html>

The above is the detailed content of What rules need to be applied when using css3 animation?. For more information, please follow other related articles on the PHP Chinese website!

css css3 选择器 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 about "The Definitive Guide to CSS"Next article：How about "The Definitive Guide to CSS"

See more

What rules need to be applied when using css3 animation?

Related articles