初步入门css过渡

# css过渡

我们可以使用css过渡实现许许多多的动画效果，我们经常搭配着:hover使用

简写方式transition:<要过渡的属性> <过渡的时间> <时间曲线(可以省略)> <何时开始(可以省略)>;

过渡属性`transition-property`

过渡的属性可以使css样式里任意的属性值，颜色，边距，宽度都可以，如果都像变化，那么写一个all即可。

过度时间`transition-duration`

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。

时间曲线transition-timing-function(可以省略)

时间曲线有：ease(默认) ，

transition-timing-function: ease

transition-timing-function: ease-in

transition-timing-function: ease-out

transition-timing-function: ease-in-out

transition-timing-function: linear

transition-timing-function: step-start

transition-timing-function: step-end

transition-timing-function: steps(4, end)

何时开始transition-delay（可以省略）

CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

如何使用

口诀：谁做动画给谁加;
比如实现如下效果

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: purple;
            /* 变化的宽度 时间1s */
            transition: width 1s;
        }

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

如果想多个属性变化

可以用逗号隔开

transition: width 1s,height 1s;

在这个情况下我们只定义width和height 所以我们可以用all代替

练习——制作一个进度条

进度条

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid purple;
            border-radius: 7px;
            margin: 100px auto;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: width 1s;
            border-radius: 7px;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>