美文网首页饥人谷技术博客
使用transition样式让效果的变化更加平滑

使用transition样式让效果的变化更加平滑

作者: 大春春 | 来源:发表于2016-12-25 15:57 被阅读0次

一、CSS3样式transition介绍

  • 作用:transition在英文中的意思是过渡和转变,顾名思义,在CSS中添加这个样式可以让一些效果的变化产生过渡效果而让人不会感觉突兀;

  • transition属性的值
    transition属性有四个常用值;
    1.property:属性(设置效果的CSS样式名);
    2.duration:持续时间(设置效果持续的时间);
    3.timing-function:过渡效果的时间线(设置效果的快慢变化);
    该值有五个可选选项:
    linear 规定以相同速度开始至结束的过渡效果。
    ease 规定慢速开始,然后变快,然后慢速结束的过渡效果。
    ease-in 规定以慢速开始的过渡效果。
    ease-out 规定以慢速结束的过渡效果。
    ease-in-out 规定以慢速开始和结束的过渡效果。
    此外还可以使用cubic-bezier(n,n,n,n)函数对n进行数字设置来控制效果的时间线;
    4.delay:过渡效果延迟多少时间再展示(设置过渡效果的触发时机);

  • transition属性的写法(缩写)
    transition: property duration timing-function delay;

    transition写法

二、小例子展示transition样式的使用

  • 使用transition样式的propertyduration使鼠标移动上去后背景色产生淡入淡出的效果
未变化前 变化中 变化完成
  • 使用propertydurationtiming-function使div宽度变宽,切变化速度由块到慢;
    代码如下(效果无法截图显示,可自行复制展示):

    <!DOCTYPE html> 
    <html> 
    <meta charset="uft-8">
    <head> 
    <style>
        div {
            width: 200px;
            height: 200px;
            background: yellow;
            transition: width 5s ease;
        }
        div:hover {
            width: 1000px;
        }
    </style> 
    </head> 
    <body> 
         <div></div>
    </div> 
    </body> 
    </html>
    

三、注意点

  1. 因为transition是CSS3的新样式,所以要考虑兼容性问题,下面是transition在各大浏览器上的兼容性;
transition兼容性

2.transition的property值可使用all来使多种效果同时过渡;

参考链接w3school

相关文章

网友评论

    本文标题:使用transition样式让效果的变化更加平滑

    本文链接:https://www.haomeiwen.com/subject/noarvttx.html