CSS3-过渡

最新推荐文章于 2020-09-13 16:13:26 发布

net_chengsheng

最新推荐文章于 2020-09-13 16:13:26 发布

阅读量336

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_29548433/article/details/75189246

版权

css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一. CSS3过渡介绍

在 CSS3 之前，我们要向在页面上显示一个动画效果：

① 通过 Flash 动画的方式

② 通过 JavaScript 来实现

在css3有了过渡这个概念，当一个元素从一种样式变换为另一种样式时为元素添加效果。

二. 浏览器支持

在 w3shool.com.cn 上我们通过查看css3过渡介绍中就可以看到支持哪些浏览器

这里写图片描述

三. 过渡属性

属性	描述
transition-property	规定应用过渡的 CSS 属性的名称。默认值 all
transition-duration	定义过渡效果效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是”ease”。
transition-delay	规定过渡效果何时开始。默认是 0。
transition	简写属性，可以同时设置上面四个属性值。

3.1 transition-property属性介绍

/*给width设置过渡效果*/
div {
    transition-property:width;
}

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。默认值
property	定义哪个属性有过渡效果。例如：width, height

3.2 transition-duration属性介绍

/*设置过渡时长3s*/
div {
    transition-duration:3s;
}

值	描述
time	规定完成过渡效果需要花费的时间。默认值是 0，意味着没有效果。

3.3 transition-timing-function属性介绍

/*匀速执行过渡效果*/
div {
    transition-timing-function: linear;
}

值	描述
linear	规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))。
ease	规定慢速开始，逐渐变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,0.1))。
ease-in	规定以慢速开始的过渡效果(cubic-bezier(0.42,0,1,1))。
ease-out	固定以慢速结束的过渡效果(cubic-bezier(0,0,0.58,1))。
ease-in-out	规定以慢速开始和结束的过渡效果(cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的值。

3.4 transition-delay属性介绍

/*过渡效果在开始1秒后执行*/
div {
    transition-delay:1s;
}

值	描述
time	规定在过渡效果开始之前需要等待的时间。

3.5 transition属性介绍

/*transition: property duration timing-function delay*/
div {
    transition: width 1s linear 0.1s;
}

值	描述
transition-property	规定设置过渡效果的 CSS 属性。
transition-duration	规定过渡效果的执行时长。
transition-timing-function	规定过渡效果的速度曲线。
transition-delay	规定过渡效果何时开始。

四. 示例

鼠标放在盒子上，让盒子宽度发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画</title>
    <style>

        .div {
            /*盒子宽度为浏览器当前宽度的40%*/
            width: 40%;
            /*高度为固定200px*/
            height: 200px;
            /*行高为200px 设置行高，是让文字垂直居中*/
            line-height: 200px;
            /*文本水平居中*/
            text-align: center;
            /*背景颜色为红色*/
            background-color: red;

            /*设置过渡，过渡是在样式发生改变的时候执行*/
            transition: 2s width linear  0.1s;
        }

        /*鼠标放在盒子上的是后，改变样式，样式此时发生了改变，执行过渡效果*/
        .div:hover {
            width: 20%;
        }

    </style>
<body>
    <div class="div">盒子</div>
</body>
</html>