CSS3 过渡

2019年9月14日 183次阅读 来源: Chinaxiang

概览

CSS 过渡（ transition ）用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 transition 后，将按一个曲线速率变化。这个过程可以自定义。

CSS3 过渡和 CSS3 动画 具有类似的效果，但相对要简单不少。

过渡是作用在某个CSS属性上，而动画是作用在某个动画规则上，这点要注意。

小试牛刀

还是先看一个完整的小例子，来体会过渡的魅力吧。

<!DOCTYPE html>
<html>
<head>
<style> 
    div {
        width: 100px;
        height: 100px;
        background: blue;
        transition: width 2s;
        -moz-transition: width 2s; /* Firefox */
        -webkit-transition: width 2s; /* Safari and Chrome */
        -o-transition: width 2s; /* Opera */
    }

    div:hover {
        width:300px;
    }
</style>
</head>
<body>

<div></div>

</body>
</html>

《CSS3 过渡》

要实现过渡，必须规定以下两点：

  • 规定您希望把效果添加到哪个 CSS 属性上

  • 规定效果的时长

过渡属性

过渡通过 transition 简写属性或其对应的具体属性来决定哪些属性发生动画效果 (明确地列出这些属性 transition-property)，何时开始 (设置 transition-delay), 持续多久 (设置 transition-duration) 以及如何动画 (定义transition-timing-function 函数，比如匀速地或先快后慢)，下面分别介绍之。

transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

transition-property: none; /* 没有过渡效果 */
transition-property: width; /* 宽度变化将获得过渡效果 */
transition-property: all; /* 所有属性变化将获得过渡效果 */
transition-property: width, height; /* 宽度和高度变化将获得过渡效果 */

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-duration: 2s;/* 等价于2000ms */

transition-timing-function

transition-timing-function 属性规定过渡效果的速度曲线。

这部分同 CSS3 动画中的 animation-timing-function ，不多赘述。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

transition-delay

transition-delay 属性规定过渡效果何时开始（以秒或毫秒计，允许负值）。

transition-delay: 2s;

transition

上述具体属性的简写属性。

transition: property duration timing-function delay;

示例：

div {
    width: 100px;
    transition: width 1s linear 2s;
    /* Firefox */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}
div:hover {
    width: 500px;
}

小结

过渡可以让属性的变化过程持续一段时间，而不是立即生效，这样可以很好的增强用户体验。

过渡是用来控制属性的持续，必须至少具备 属性 和 持续时间 两个条件才能产生效果。

过渡相对于动画来说较简单，一般会结合 2D/3D 变换来产生各种动画效果。

    原文作者：Chinaxiang
    原文地址: https://segmentfault.com/a/1190000003910132
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞