CSS3之transition属性

最新推荐文章于 2023-01-12 08:16:21 发布

Programmer.杨

最新推荐文章于 2023-01-12 08:16:21 发布

阅读量382

点赞数

分类专栏：前端技术-CSS 文章标签： css3 html5

本文链接：https://blog.csdn.net/YWB88888888/article/details/103571610

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

transition:

作用：
         设置元素当过渡效果，也就是控制元素从一种样式转化到另一种样式的时间、速度变化曲线等属性
说明：
         如果该属性持续时间为 0，transition不会有任何效果
用法示例：
         transition: transition-property transition-duration transition-timing-function transition-delay;

transition-property:

作用：
         定义应用过渡效果的CSS属性名称
说明：
         必须始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果
常用值：
         (none)： 没有属性会获得过渡效果
         (all)： 所有属性都将获得过渡效果
         (property)： 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔

transition-duration:

作用：
规定完成过渡效果需要花费的时间 （秒(s)或毫秒(ms)）
常用值：
(time)： 规定完成过渡效果需要花费的时间 （秒(s)或毫秒(ms)）。默认值是 0，意味着不会有效果

transition-delay:

作用：
         指定何时将开始切换效果
说明：
         当该属性为负值时，该属性的值会与transition-duration的值做加法运算，显示效果会不完整
常用值：
         (time)： 指定秒或毫秒数之前要等待切换效果开始

transition-timing-function:

作用：
         指定切换效果的速度
常用值：
         (ease)： 规定慢速开始，然后变快，然后慢速结束的过渡效果
         (ease-in)： 规定以慢速开始的过渡效果
         (ease-out)： 规定以慢速结束的过渡效果
         (ease-in-out)： 规定以慢速开始和结束的过渡效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之transition属性</title>
    
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            margin: 20px;
            background-color: skyblue;
    
            /* 设置过渡属性 */
            transition-property: all;
            /* 设置过渡时间 */
            transition-duration: 2s;
            /* 设置过渡开始时间 */
            transition-delay: 0s;
        }
        div:hover {
            width: 50px;
            height: 50px;
        }
        
        .showdiv1 {
            /* 设置过渡时序函数 */
            transition-timing-function: linear;
        }

        .showdiv2 {
            /* 设置过渡时序函数 */
            transition-timing-function: ease;
        }

        .showdiv3 {
            /* 设置过渡时序函数 */
            transition-timing-function: ease-in;
        }

        .showdiv4 {
            /* 设置过渡时序函数 */
            transition-timing-function: ease-out;
        }

        .showdiv5 {
            /* 设置过渡时序函数 */
            transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
    <div class="showdiv1"></div>
    <div class="showdiv2"></div>
    <div class="showdiv3"></div>
    <div class="showdiv4"></div>
    <div class="showdiv5"></div>
    <div class="showdiv6"></div>
</body>
</html>

Programmer.杨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
CSS3之transition属性

transition:作用：         设置元素当过渡效果，也就是控制元素从一种样式转化到另一种样式的时间、速度变化曲线等属性说明：         如果该属性持续时间为 0，transition不会有任何...
复制链接

扫一扫