美文网首页CSS
CSS3-过渡效果

CSS3-过渡效果

作者: riverhh | 来源:发表于2019-02-13 18:18 被阅读27次

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

    在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的过渡,为了方便演示采用hover切换两种状态,但是并不仅仅局限于hover状态来实现过渡。

    语法格式:

    transition: 要过渡的属性  花费时间  运动曲线  何时开始;
    

    如果有多组属性变化,还是用逗号隔开。

    属性 描述 CSS
    transition 简写属性,用于在一个属性中设置四个过渡属性。 3
    transition-property 规定应用过渡的 CSS 属性的名称。 3
    transition-duration 定义过渡效果花费的时间。默认是 0。 3
    transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
    transition-delay 规定过渡效果何时开始。默认是 0。 3
    • 如果想要所有的属性都变化过渡, 写一个all 就可以
    • transition-duration 花费时间 单位是 秒 s (这个秒是一定需要的)
    • 运动曲线 默认是 ease
    • 默认是 0s 立马开始

    运动曲线示意图:


    运动曲线示意图.png

    简单代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style >
            div {
                width: 200px;
                height: 250px;
                background-color: pink;
                /* 属性 花费时间 曲线  何时开始*/
                transition: width 2s ease-in 0s;
            }
            div:hover {
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    

    效果如下所示:


    过渡.gif

    相关文章

      网友评论

        本文标题:CSS3-过渡效果

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