css transition学习

css transition学习

transition英文意思是过渡，在css中用来展示过渡效果，它和animation很像，都可以展示网页的动效，那么它们有什么区别呢?主要记住一下这点，transition需要人为触发，比如鼠标点击，移上，移走等，而animation不需要人为触发，在页面加载滑动到特定位置或者其它时刻就可以自动展示动效不需要人为干预。

今天就来学一下css的transition的用法，用熟了可以做出很出彩的效果。

用法

如下所示transition属性可以有4个值，当然这4个值可以分开写

.someclass {
    /*[transition-property] [transition-duration] [transition-timing-function] [transition-delay]*/
    transition: all 4s ease 1s;
    /*以下为兼容性考虑*/
    -webkit-transition: all 4s ease 1s;
    -moz-transition: all 4s ease 1s;
    -o-transition: all 4s ease 1s;
}

等价于

.someclass {
    transition-property:all;
    transition-duration:4s;
    transition-timing-function:ease;
    transition-delay:1s;
    /*同样为了兼容性需要加上前缀*/
    /*...*/
}

下面简单解释一下四个属性的意思

• transition-property：用来指明哪些属性需要transition。有很多属性可以支持transition，all代表所有，如果你像我一样懒得具体指明就可以用all，具体有哪些属性可以看MDN：css可以transition的属性

• transition-duration：transition持续时间

• transition-timing-function：transition的动画函数，其实就是一个贝塞尔曲线函数。ease的贝塞尔曲线函数是cubic-bezier(0.25,0.1,0.25,1)，如果大家对贝塞尔曲线有兴趣可以看看这个模拟网站cubic-bezier，很有趣。

  css的默认的过渡效果及其贝塞尔曲线函数

  值	贝塞尔曲线函数
  linear	cubic-bezier(0,0,1,1)
  ease	cubic-bezier(0.25,0.1,0.25,1)
  ease-in	cubic-bezier(0.42,0,1,1)
  ease-out	cubic-bezier(0,0,0.58,1)
  ease-in-out	cubic-bezier(0.42,0,0.58,1)

• transition-delay：transition的延迟时间。比如1s,那么1s后开始transition

实例展示

好了，原理介绍完，开始展示实例

实例查看

• 例一：展示不同的transition-timing-function的效果
  本例中的四个方块分别有不同的timing-function，注意观察效果，如果看不到动态效果，可能需要换一台能看动图的电脑！
  
  主要代码：

<div class="demo">
    <div class="container">
        <div class="box">linear</div>
        <div class="box">ease</div>
        <div class="box">ease-in</div>
        <div class="box">ease-in-out</div>
        <div class="box">ease-out</div>
        <div class="tip">把鼠标放上来</div>
    </div>
</div>    

.container:hover .box{
    left: calc(100% - 70px);
}
.box{
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    position: absolute;
    left: 20px;
    color: #333;
}
.container>div.box:nth-of-type(1){
    border: 1px solid brown;
    transition: left 4s linear;
}
.container>div.box:nth-of-type(2){
    border: 1px solid blueviolet;
    transition: left 4s ease;
    top: 100px;
}
.container>div.box:nth-of-type(3){
    border: 1px solid red;
    top: 170px;
    transition: left 4s ease-in;
}

.container>div.box:nth-of-type(4){
    border: 1px solid lime;
    top: 240px;
    transition: left 4s ease-in-out;
}

.container>div.box:nth-of-type(5){
    border: 1px solid springgreen;
    top: 310px;
    transition: left 4s ease-out;
}

• 例二：transition-delay演示

本例中的四个小圆形的delay分别是0s,1s,2s,3s，可以看到它们都在设定的delay之后开始左移

主要代码：

<div class="demo">
    <div class="container">
        <div class="midcircle"></div>
        <div class="circle"><span>1</span></div>
        <div class="circle"><span>2</span></div>
        <div class="circle"><span>3</span></div>
        <div class="circle"><span>4</span></div>
        <div class="tip">把鼠标放上来</div>
    </div>
</div>

.midcircle{
    transition:background-color 4s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    background-color: red;
    transform: translateX(-50%) translateY(-50%);
}
.container:hover .midcircle{
    background-color: white;
}
.circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: coral;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.container:hover .circle{
    left: 40px;
}

.container>div.circle:nth-of-type(2){
    transition: left 4s ease;
}
.container>div.circle:nth-of-type(3){
    transition: left 4s ease 1s;
}
.container>div.circle:nth-of-type(4){
    transition: left 4s ease 2s;
}
.container>div.circle:nth-of-type(5){
    transition: left 4s ease 3s;
}

第一次写作时间：2020-05-20