css3 animated themes

一、transition

　　1, transition elements when the style is changed, to add an element of transition animation.

1.1, transition-delay time of the delay, how long the animation delay execution (s | ms) defaults 0s

1.2, when animated transition-duration, how long the animation completes (s | ms) Default 0s

1.3, the style defaults transition-property to be animated all

1.4, transition-timing-function animation

1.4.1, linear uniform

1.4.2, ease buffer (default)

1.4.3, ease-in acceleration

1.4.4, ease-out deceleration

1.4.5, ease-in-out accelerated and then decelerated

1.4.6、cubic-bezier()

The above can Bezier curve motion https://cubic-bezier.com/ determined parameters

2, the element is not displayed by the display has rendered the process elements, before completion of rendering the page element, transition effects can not afford, it is possible to add delay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #transitionTips{
        width: 100px;
        height: 100px;
        transition: 2s;
        background-color: red;
    }
    </style>
</head>
<body>
    <!--transition在使用时的问题-->
    <div id="transitionTips" style="display:none">

    </div>
    <button id="showTipsBtn">显示transitionTips</button>

    <script>
    var showTipsBtn = document.querySelector ( " #showTipsBtn " ); 
    showTipsBtn.onclick = function () {
         var transitionTips = document.querySelector ( " #transitionTips " );
         IF (transitionTips.style.display == " none " ) {
             // element is not displayed by the display has rendered the process elements, before completion of rendering the page element, transition effects can not afford, it is possible to add the delay 
        //      transitionTips.style.display = "Block"; 
        // transitionTips.style. = width "500px"; 
        transitionTips.style.display="block";
        setTimeout(function(){
        transitionTips.style.width="500px";
        },500);
        }else{
            transitionTips.style.width="100px";
            transitionTips.style.display="none";
        }
    }
    </script>
</body>
</html>

3, transitionend event monitor elements transtion animation is finished

testTransition.addEventListener ( 'transitionend', function () { 
Alert ( "the animation execution" ); 
});

Two, animation

　　1、

css3 animated themes

Guess you like