苏飞论坛

标题: 【零基础学习web前端】CSS3-过渡 [打印本页]

作者: Amy 时间: 2018-12-9 20:36
标题: 【零基础学习web前端】CSS3-过渡
【零基础学习web前端】CSS3-过渡

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

使用CSS3过渡，我们可以通过改变CSS属性来创建动画。

我们可以控制时间，从值到值。

例如，我们可以在一秒钟内将元素的颜色从白色更改为黑色。

下表列出了所有过渡属性：

transition - 用于设置四个转换属性的简写属性
transition-delay - 指定过渡效果何时开始
transition-duration - 指定完成转换所需的秒数或毫秒数
transition-property - 指定转换所用的CSS属性的名称
transition-timing-function - 指定转换的速度曲线

要使用CSS3过渡创建动画，我们必须指定两个值：

更改CSS属性
效果持续时间

[HTML] 纯文本查看 复制代码

<div>苏飞论坛</div>

[CSS] 纯文本查看 复制代码

div {

        width: 100px;

        height: 100px;

        background: red;

        color: #fff;

        -webkit-transition: height 4s;

        transition: height 4s;

        }

效果：
(, 下载次数: 136)