css3动画专题

Posted 2022-05-03 baojiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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、

以上是关于css3动画专题的主要内容，如果未能解决你的问题，请参考以下文章