How to use animation attribute? Detailed explanation of animation attribute-CSS Tutorial-php.cn

How to use animation attribute? Detailed explanation of animation attribute

云罗郡主

Release： 2018-11-20 17:01:41

forward

4576 people have browsed it

The content of this article is about how to use the animation attribute? A detailed explanation of the animation attribute has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

animation-duration attribute

In CSS3, we can use the animation-duration attribute to set the duration of the animation, which is the total time it takes to complete from 0% to 100%. The animation-duration property is similar to the transition-duration property in CSS3 transitions.

Syntax:

animation-duration:时间；

Copy after login

Description:

The animation-duration attribute value is a time, the unit is s (seconds), it can be a decimal such as 0.5s.

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-duration属性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
        #div1{-webkit-animation-duration:2s;margin-bottom:10px;}
        #div2{-webkit-animation-duration:4s;}
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>

Copy after login

The effect is as follows:

How to use animation attribute? Detailed explanation of animation attribute

Analysis:

In this example, we set #div1 The element animation duration is 2s, and the element animation duration of #div2 is set to 4s. From online testing, we can clearly see the effect.

Let me say here that CSS3 animation is often combined with CSS3 deformation to achieve gorgeous and complex animation effects.

The above is a complete introduction to how to use the animation attribute? A detailed explanation of the animation attribute. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to use animation attribute? Detailed explanation of animation attribute. For more information, please follow other related articles on the PHP Chinese website!