当前位置：首页 > news >正文

CSS -- CSS使用过渡(transition)添加动画

news 来源：原创 2024/11/18 4:28:03

CSS 3过渡

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

过渡动画：是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本），但是不会影响页面布局。

我们现在经常和:hover 一起搭配使用。

语法：

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

属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
花费时间： 单位是秒（必须写单位）比如 0.5s
运动曲线： 默认是 ease （可以省略）
**何时开始：**单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）

记住过渡的使用口诀：谁做过渡给谁加

<!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>CSS3 过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例：动态进度条：鼠标放上去，自动增加到最后

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>进度条</title>
        <style>
            .box {
                width: 200px;
                height: 7px;
                padding: 1px 1px;
                border: 1px solid orange;
                border-radius: 7px;
            }
            .box_in {
                width: 0px;
                height: 100%;
                background-color: red;
                border-radius: 5px;
                transition: width 1s ease-in-out;
            }
            .box:hover .box_in {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box_in"></div>
        </div>
    </body>
</html>