CSS3过渡

作者: 挥剑斩浮云 | 来源:发表于2018-01-27 14:44 被阅读0次

05_css中的过渡和动画效果了解吗
08_dayCSS动画
CSS3动画
CSS3 过渡
《响应式Web设计：HTML5和CSS3实战(第2版)》08章
CSS3-目录
九、CSS新特性
CSS3之过渡
CSS学习笔记——一些属性
web前端入门到实战：CSS3中的变形（transform）、过

transition语法简写

语法：transition：属性  持续时间  过渡方法  延迟时间;

在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果（仔细理解这句话）
语法：transition:属性持续时间过渡方法延迟时间;
说明：其实transition属性是一个复合属性，主要包含4个子属性：
（1）transition-property：对元素的哪一个属性进行操作；
（2）transition-duration：过渡的持续时间；
（3）transition-timing-function：过渡使用的方法（函数）；
（4）transition-delay：可选属性，指定过渡开始出现的延迟时间；

过渡属性transition-property

在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现过渡效果
语法：transition-property取值;默认值为：all；默认为所有可以进行国度的css属性；如果提供多个属性值，以逗号进行分隔
说明：transition-property：属性的取值是一个“CSS属性名”。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 transition-property属性</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:50px;
            background-color:#14C7F3;
            transition-property:height;
            transition-duration:0.5s ;
            transition-timing-function:linear;
            transition-delay:0;
        }
        div:hover
        {
            height:100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

分析：这里使用transition-property属性指定了过渡动画所操作的CSS属性是height当鼠标移动到div元素上时，元素的高度会在0.5s内从50px过渡到100px=
对于CSS3过渡动画，大多数情况下都是配合:hover伪类来使用

过渡时间transition-duration

语法：transition-duration  时间;
说明：transition-duration  属性取值是一个时间，单位为s（秒），可以为小数如0.5s

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3过渡</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            border-radius:0;
            background-color:#14C7F3;
            transition-property:border-radius;
            transition-duration:0.5s;
            transition-timing-function:linear;
            transition-delay:0;
        }
        div:hover
        {
            border-radius:50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器效果

过渡方式transition-timing-function

在CSS3中，我们可以使用transition-timing-function属性来定义过渡方式。所谓的“过渡方式”主要用来指定动画在过渡时间内的速率

语法：transition-timing-function:取值;

说明：transition-timing-function属性取值共有5种，具体如下：
transition-timing-function属性取值

延迟时间transition-delay

我们可以使用transition-delay属性来设置动画开始的延迟时间

语法：transition-delay:时间;

说明：transition-delay属性取值是一个时间，单位为s（秒），可以为小数如0.5s；transition-delay属性默认值为0，也就是说当我们没有设置transition-delay属性时，过渡动画就没有延迟时间
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 transition-delay属性</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            border-radius:0;
            background-color:#14C7F3;
            transition-property:border-radius;
            transition-duration:1s ;
            transition-timing-function:linear;
            transition-delay:2s;
        }
        div:hover
        {
            border-radius:50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>