What rules need to be applied when using css3 animation?-CSS Tutorial-php.cn

What rules need to be applied when using css3 animation?

(*-*)浩

Release： 2019-06-04 18:02:56

Original

5601 people have browsed it

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

Copy after login

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>

Copy after login

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!