css3动画专题

一、transition

　　1、transition元素样式发生改变时，给元素添加一个过渡动画。

1.1、transition-delay 延迟时间，动画延迟多长时间执行(s|ms) 默认值0s 1.2、transition-duration 动画时长，动画用多长时间完成(s|ms) 默认值 0s 1.3、transition-property 要动画的样式 默认值 all 1.4、transition-timing-function 动画形式 1.4.1、linear 匀速 1.4.2、ease 缓冲(默认值) 1.4.3、ease-in 加速 1.4.4、ease-out 减速 1.4.5、ease-in-out 先加速再减速 1.4.6、cubic-bezier() 以上可以根据贝塞尔曲线运动 https://cubic-bezier.com/ 进行确定参数 2、元素由不显示到显示的过程有元素的渲染，元素在页面上渲染完之前，transition 是不起效果的，所以可以加延迟

<!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"){
            // 元素由不显示到显示的过程有元素的渲染，元素在页面上渲染完之前，transition 是不起效果的，所以可以加延迟
        //     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 事件，监听元素的 transtion 动画执行完毕

 testTransition.addEventListener(‘transitionend‘,function(){
alert("动画执行了");
});

二、animation 　　1、