CSS中过渡效果（transition）

最新推荐文章于 2024-04-09 12:02:27 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2024-04-09 12:02:27 发布

阅读量7.5k

点赞数 12

分类专栏： CSS 文章标签： css html5 html css3

本文链接：https://blog.csdn.net/shao_xuan_/article/details/120851118

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS中过渡效果（transition）

过渡（无继承性）
兼容性
练习
总结

过渡（无继承性）

CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。

1、transition-property属性

transition-property 属性用于指定应用过渡效果的CSS属性的名称。
基本语法格式：

transition-property: none | all | property;

属性值	描述
none	没有属性获得过渡效果
all	所有属性都将获得过渡效果
property	定义应用过渡效果的CSS属性名称，多个名称之间用逗号分隔

2、transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式：

transition-duration:time;

3、transition-timing-function属性

transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。
基本语法格式：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值	描述
linear	指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)
ease	指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,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)	定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。

4、transition-delay属性

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式：

transition-delay:time;

time为正数:过渡动作会延迟触发。
time为负数：过渡动作会从该时间点开始，之前的动作被截断。

5、transition属性

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
基本语法格式：

transition：property duration timing-function delay;

使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。
例如：transition:border-radius 5s ease-in-out 2s;

兼容性

在这里插入图片描述
出自：css参考手册

练习

<!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>Document</title>
</head>
<style>
    .test{
        overflow: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .test li{
        float: left;
        width: 170px;
        height: 100px;
        margin: 0 5px;
        padding: 10px;
        border: 1px solid red;
        color: #000;
        transition-property: border-color background-color color;
        transition-duration: 1s;
        transition-timing-function: ease-in;
    }
    .test li:hover{
        border: orange;
        background-color: orchid;
        color: palegreen;
    }
</style>
<body>
    <h1>将鼠标移动到矩形上</h1>
    <ul class="test">
        <li>本次设定的过渡属性是:border-color,backgroung-color,color</li>
    </ul>
</body>
</html>

总结

1、transition(过渡)是指为了添加鼠标移到某种元素时，其可以从一种样式转变到另一种样式。
2、指定效果持续时间（时间默认为零，若不指定，则没有效果）。
3、实际开发中一般使用简写：
控制单个样式transition：属性名过渡所需时间过渡方式延迟时间
控制多个样式transition：属性名1 过渡所需时间过渡方式延迟时间，属性名2 过渡所需时间过渡方式延迟时间(以此类推，中间以逗号隔开)

努力做一只合格的前端攻城狮

关注

12
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS中过渡效果（transition）

CSS中过渡效果（transition）过渡（无继承性）1、transition-property属性2、transition-duration属性3、transition-timing-function属性4、transition-delay属性5、transition属性兼容性练习总结过渡（无继承性）CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。1、transition-pro
复制链接

扫一扫