过渡 - transition

Posted 2022-01-06 anyw3c

过渡 - transition 是变形transfrom其中一种效果，定义为一种状态过渡到另一种状态的过程，今天学习到css3动画，特此记录下过渡的使用和一些效果。

实例1：

    <div class="box"></div>
    <p>鼠标移动到 .box 元素上，查看过渡效果。</p>

.box
        width: 100px;
        height: 100px;
        background: red;
        margin: 0 auto; 
        
        transition-duration: 1s;  /*花费时间*/
        transition-property: all; 
        transition-delay:0s; /* 延迟 */
        transition-timing-function: linear; /*匀速*/
    
.box:hover
        width:200px;
        background: #00FFFF;
    

效果图：

注：当指针移出元素时，它会逐渐变回原来的样式。

实例2：
在例子中使用所有过渡属性 - 使用简写

.box
        .box
            width: 100px;
            height: 100px;
            background: red;
            margin: 0 auto; 
            
            transition:1s all 0s linear;
        

效果图还是这样：

--------------------------------------------------
下面是我的简单总结

总：

transition:2s all;

transition:2s 1s all linear；

注：1s是延迟 linear过渡的属性

分开写：

1.transition:2s; 给它本身＋这个过渡的属性：所需时间

2.transition-timing-function:linear; 匀速

5.transition: -delay timing-function -duration;

transition-timing-function 属性

值	描述
linear	匀速
ease	慢快慢
ease-in	慢开始
ease-out	慢结束
ease-in-out	慢开始和结束

  参考文章：

runoob