css transition 过渡讲解
2017-02-15 22:29

css transition过渡

css transition过渡是一种简写形式.

transition的完全属性包括:

transition-property  过渡属性

transition-duration  过渡时间

transition-timing-function 速度曲线

transition-delay  延迟开始时间

这个属性用来定义元素两个状态之间的动画渐变。而这个transition过渡还可以用在伪类中的状态改变,比如:hover,:active。


transiton的简写语法如下:

transition: property duration timing-function delay

我们一般采用transition的简写形式,书写更方便。

transiton的写法例子

transition: margin-left 4s;

transition: margin-left 4s 1s;

transition: margin-left 4s ease-in-out 1s;
//定义两个属性的过渡
transition: margin-left 4s, color 1s;

transition: all 0.5s ease-out;

transition: left cubic-bezier(0.8,1,0.6,0.7);

transition 速度曲线

transition-timing-function速度曲线有几个简写值:

linear :  以线性相同的速度进行动画 (等于cubic-bezier(0,0,1,1))。

ease : 慢速开始,然后变快,慢速结束 (等于cubic-bezier(0.25,0.1,0.25,0.1))。

ease-in : 慢速开始,然后快速(等于cubic-bezier(0.42,0,1,1))。

ease-out : 慢速结束 (等于cubic-bezier(0,0,0.58,1))。

ease-in-out : 慢速开始,然后变快,慢速结束,跟ease的速度曲线很相似(等于cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(m,m,m,m) : m的值为0-1范围内的值。

速度曲线中cubic-bezier最具灵活性,对于贝塞尔曲线的取值,可以通过贝塞尔曲线详解这篇文章中的贝塞尔曲线工具直观获得。

transiton.png

利用transition我们实现上面的效果,鼠标进入时显示下面的文字。

<div class="transcont">
   <ul>
       <li>
           <img src="images/timg.jpg"/>
           <div class="tran_text">妹纸前端</div>
       </li>
   </ul>
</div>
.transcont{
    border:1px solid #bababa;
    background:#f1f1f1;
    padding:15px;
    margin:15px;
    position:relative;
    overflow:hidden;
}
.transcont ul{
    margin:0;
    padding:0;
    list-style:none;
    margin-right:-12px;
    font-size: 0;
}
.transcont ul li{
    display: inline-block;
    width:20%;
    box-sizing: border-box;
    padding-right:12px;
    position: relative;
    overflow: hidden;

}
.transcont ul li img{
    width:100%;
    position:relative;
    transition:left 5s;
}
//transition定义
.tran_text{
    position:absolute;
    bottom: -32px;
    left:0;
    right:12px;
    background:rgba(80,80,80,0.7);
    height:32px;
    line-height: 32px;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    transition:bottom 0.5s;
    pointer-events: none;
}
//hover改变bottom状态。
.transcont ul li img:hover + .tran_text{
    bottom:0px;
}


连接过去体验一下效果:transiton的hover过渡效果

这里要注意以下pointer-events:none属性,用来让tran_text不捕获鼠标事件,用来避免鼠标在tran_text底部文字上面时也会触发hover的移除效果。



原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(4456)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1