Home > Article > Web Front-end > Detailed explanation of the usage of Animation animation property in CSS3

Detailed explanation of the usage of Animation animation property in CSS3

高洛峰Original: 2017-03-08 13:31:082108browse

To use animation animation, you must first familiarize yourself with keyframes and the grammatical rules of Keyframes: naming starts with "@keyframes", followed by the "name of animation" plus a pair of curly brackets "{}", brackets Here are some style rules for different time periods. Different keyframes are expressed by from (equivalent to 0%), to (equivalent to 100%) or percentage (in order to get the best browser support, it is recommended to use percentage). Define a simple animation as follows:

@keyframes myfirst /*定义动画名*/
    {   
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式，0%可以换成from*/
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%可以换成to*/
    }

@Keyframes is defined. To make it work, it must be bound to a selector through animation, otherwise the animation will have no effect. The animation properties are listed below:

Detailed explanation of the usage of Animation animation property in CSS3

Set all the above properties below

animation-name:myfirst;   
animation-duration:5s;   
animation-timing-function:linear;   
animation-delay:1s;   
animation-iteration-count:infinite;   
animation-direction:alternate;   
animation-play-state:running;

All the above codes can be abbreviated as follows:

animation:myfirst 5s linear 2s infinite alternate;   
animation-play-state:running;

##Browser Compatibility

Internet Explorer 10, Firefox and Opera support @keyframes rules and animation attributes.

Chrome and Safari require the prefix -webkit-.

Note: Internet Explorer 9, and earlier, does not support @keyframe rules or animation properties.

The following is a complete code example of the keyframes and animation attributes introduced above:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation演示</title>
    <style>
    p   
    {   
    width:100px;   
    height:100px;   
    background:red;   
    position:relative;   
    animation-name:myfirst;   
    animation-duration:5s;   
    animation-timing-function:linear;   
    animation-delay:1s;   
    animation-iteration-count:infinite;   
    animation-direction:alternate;   
    animation-play-state:running;   
    /* Safari and Chrome: */   
    -webkit-animation-name:myfirst;   
    -webkit-animation-duration:5s;   
    -webkit-animation-timing-function:linear;   
    -webkit-animation-delay:1s;   
    -webkit-animation-iteration-count:infinite;   
    -webkit-animation-direction:alternate;   
    -webkit-animation-play-state:running;   
    }   

    @keyframes myfirst /*定义动画名*/   
    {   
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式，0%相当于from*/   
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%相当于to*/   
    }   

    @-webkit-keyframes myfirst /* Safari and Chrome */   
    {   
    0%   {background:red; left:0px; top:0px;}   
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;}   
    }   
    </style>
</head>
<body>
    <p>该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    <p></p>
</body>
</html>

The above code demonstrates the movement of a square along a square trajectory , the cardinal number of times moves in the forward direction, and the even number of times moves in the reverse direction, with color changes during the movement. Readers can run the code to observe the specific effects.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

The above is the detailed content of Detailed explanation of the usage of Animation animation property in CSS3. For more information, please follow other related articles on the PHP Chinese website!

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：Detailed explanation of the usage of Transition animation property in CSS3Next article：Detailed explanation of the usage of Transition animation property in CSS3

See more

Detailed explanation of the usage of Animation animation property in CSS3

Related articles