详解css3系列：transition属性

最新推荐文章于 2024-04-25 16:16:15 发布

liuyingming910

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量490

点赞数

本文链接：https://blog.csdn.net/liuyingming910/article/details/42457765

版权

transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

1. transition过渡属性

transition 属性是一个简写属性，用于设置四个过渡属性：

语法
transition: property duration timing-function delay;

值描述
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。

all：表示针对所有元素。

none：表示没有元素。

ident：指定CSS属性列表

注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。transition可以和transform同时使用。

transition:<过渡属性名称>  <过渡时间>  <过渡模式>

transition-timing-function 的五种取值：

1.ease                    逐渐变慢
2.linear                   匀速
3.ease-in                 缓慢开始（加速）
4.ease-out               缓慢结束（减速）
5.ease-in-out           缓慢开始，缓慢结束（先加速后减速）
6.cubic-bezier          贝塞尔曲线（matthewlein.com/ceaser）

过渡模式比如宽过渡，高过渡和all过渡

看一个实例：

<style type="text/css"> 
        .trans1{
            -webkit-transition:0.5 ease;
            -moz-transition:0.5s ease;
            -webkit-transition-property:all;
            -moz-transition-property:all;
            position:absolute;
            left:10px;
            top:50px;
            height:100px;
            width:150px;
            background:#EF4900;
            color:white;
        }
        .trans2{
            -webkit-transition:0.5 ease;
            -moz-transition:0.5s ease;
            -webkit-transition-property:width;
            -moz-transition-property:width;
            position:absolute;
            left:350px;
            top:50px;
            height:100px;
            width:150px;
            background:#EF4900;
            color:white;
        }
        .trans3{
            -webkit-transition:0.5s ease;
            -moz-transition:0.5s ease;
            -webkit-transition-property:height;
            -moz-transition-property:height;
            position:absolute;
            left:780px;
            top:50px;
            height:100px;
            width:150px;
            background:#EF4900;
            color:white;
        }
        .trans1:hover{
            width:300px;
            height:300px;
        }
        .trans2:hover{
            width:400px;
        }
        .trans3:hover{
            height:500px;
        }
    </style>

<body>
    <div class="trans1">变换所有的属性</div>
    <div class="trans2">只变换宽度属性</div>
    <div class="trans3">只变换高度属性</div>
</body>

点击下方result查看demo：

http://jsfiddle.net/px0v52jn/

liuyingming910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解css3系列：transition属性

transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。1. transition过渡属性transition 属性是一个简写属性，用于设置四个过渡属性：语法transition: property duration timing-fun
复制链接

扫一扫