【CSS基础】css3 transition过渡属性<四>

港控/mmm° 2022-07-14 06:50 195阅读 0赞

transition 过渡，顾名思义就是说一种变化是循序渐进的走过去，而不是瞬间变化(博主的烂理解)。  
请查看mdn的解释： [transition][]

实际上 transition 是 简写，它包含4个属性  
\- transition-property  
\- transition-duration  
\- transition-timing-function  
\- transition-delay

transition-property 指定哪个或哪些 CSS 属性用于过渡，比如你可以设置为width, height,background-color, transform(变形\[不是旋转，该属性包含多个效果: rotate\_这才是旋转, scale ….\]) [等等等…][Link 1]

transition-duration 指定过渡的时间,比如你需要设置一个hover效果，使一个div的宽度从50 到100 所花费的时间

transition-timing-function 你可以理解成物理中的加速度控制器，这个过渡的过程的时间函数，可以由快到慢，由慢到快,默认值是ease 变化弧度是又慢到快然后到慢 最后结束，[查看其它][Link 2]

transition-delay 过渡动作的开始时间的延时,默认是0，如果你设置成5s 意思就是说5秒过后才开始有这个过渡动作

下面是一个简单的例子:

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css"> body { padding-top: 20px; } .orange { width: 50px; height: 50px; background-color:orange; margin-bottom:20px; -webkit-transition: all 2s ease 0s; margin: 0 auto; } .active { -webkit-transition: all 2s ease 0s; -moz-transform:rotate(-50deg); -webkit-transform:rotate(-50deg); background-color: green; width: 100px; height: 100px; border: 1px solid black; } </style>
    </head> 
    <body>
    
        <div class="orange">
    
        </div>
        <input type="button" value="按钮" id="Btn" name="">
    
    <script src="./jquery.js"></script>
    <script type="text/javascript"> $('#Btn').on('click', function(){ if($('.orange').hasClass('active')) { $('.orange').removeClass('active') } else { $('.orange').addClass('active') } }) </script>
    </body>
    </html>

上面这个demo 的transform 只是添加了一个变形效果,也就是rotate(旋转), 我们可以在同一个transform里面添加多个变形效果,  
你可以这样

transform: rotate(-50deg) scale(1.5, 1.5) translate(-20%, 30px);

这样过渡效果 既有旋转 又有按比例放大 和根据中心点X Y轴位移的动画效果了！

[transition]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function