transition、transform、animation三个属性的使用与区别详解

transition（过渡）

transform（变换）

animation（动画）

从三个属性就可以知道，tansition是一个过渡属性，就是一个属性从一个值过渡到另一个值，tansform变换，就是一个整体的位置（或整体大小）发生变换，animation动画，就是在一段时间内各种属性进行变化从而达到一个动画的效果。

 

一、transition（过渡）

W3C中对transition的描述是：css中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。

 

transition主要包含四个值，transition-property（执行变换的属性），transition-duration（执行变换的持续时间）,transition-timing-function(变换的速率变化模式),transition-delay(变换延迟时间)。

 

（1）transition-property

这只属性是用来指定元素中哪一个属性执行过渡效果，取值有

• none 没有属性需要执行过渡

• all 所有属性发生变化（默认值）

• indent 元素的某一个属性值

indent的取值覆盖了大部分的css取值，但是自适应的时候，宽度发生变化是不会触发的。

 

（2）transiton-duration

用来指定元素转换过程的持续时间，单位为s或ms，可以作用域任何元素。默认值为0

 

（3）transition-timing-function

transition-timing-function允许我们根据时间的推进去改变属性值的变换速率。主要有以下几个取值

• ease（逐渐变慢）

• linear（匀速）

• ease-in（加速）

• ease-out（减速）

• ease-in-out（加速然后减速）

• cubic-bezier（允许自定义一个时间曲线）

 

 

（4）transition-delay

用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多唱时间执行transition效果。

 

 

当我们想要改变不知一个css属性而是改变多个属性的时候，只要把几个transition的声明串在一起，用逗号分隔开，然后定义各自的效果。

 

因为transition-duration和transition-delay都是时间值，所以一定要把duration的值放在delay的前面。

 

 

transition的连写

transition: <property> <duration> <animation type> <delay

 

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀

.transform{

    width: 300px;

    height: 300px;

    position: absolute;

    font-size: 22px;

    color: white;

    background-color: brown;

    -webkit-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;

    -moz-transition: background-color 1s ease 0.1s ,width 1s linear 0.1s,height 1s ease-in-out 0.1s;

    -ms-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;

    -o-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;

    transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;

}

.transform:hover{

    background-color: gray;

    width: 350px;

    height: 350px;

}

 

 

二、transform（变换）

transform就是变换，改变，主要的值有以下几种

transform的所有变换都是围绕着x轴,y轴，中心点来进行变换的，那么这三个元素在哪里呢？

 

任何一个元素都有一个中心点，其中心点就是居于元素x轴和y轴的交点，像下面这个元素，图中绿色的点就是中心点了。

如果没有设置transform-origin的话，这个中心点默认就是下图中的center，那么css变形进行的旋转，位移所发，扭曲等操作都是以元素自己中心位置进行变形。

 

transform-origin这个属性，不同浏览器渲染的情况不同，所以要在它前面加上各种浏览器前缀

 

 

 

 

有了这个概念，下面再来说tansform-origin的取值

 

关键词	在下图中的编号
top = top center = center top	1
right = right center= center right	2
bottom = bottom center = center bottom	3
left = left center = center left	4
center = center center	5
top left = left top	6
top right  =  right top	7
bottom left= left bottom	8
bottom right = right bottom	9

 

 

 

 

 

 

 

 

知道了坐标轴的结构以及中心点的位置，下面就来说说这四个值

 

1.rotate（* deg）：围绕中心点2D旋转若干度，单位为deg。

如果*中的值为正数则顺时针旋转，如果是负值则逆时针旋转

.transform{

    width: 100px;

    height: 100px;

    position: absolute;

    font-size: 22px;

    color: white;

    background-color: brown;

    transform: rotate(30deg);

}

.transform2{

    width: 100px;

    height: 100px;

    position: absolute;

    font-size: 22px;

    color: white;

    background-color: brown;

    transform: rotate(-30deg);

}

2.translate（x,y）移动

translate有三种情况，translate(x,y),x轴和y轴同时移动（如果这里只设定一个值，证明x的值和y的值相同，同样的也是x轴和y轴同时移动），translateX(x),沿着x轴移动，translateY(y),沿着y轴移动。

当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点

 

transform: translate(200px,100px);

 

 

 

transform: translateX(100px);

 

transform: translateY(120px);

 

 

 

3.scale缩放

缩放和移动是极其相似的，它也是具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）；scaleX(x)就只是水平方向进行缩放（x轴缩放）；scaleY（y）仅缩放垂直方向（y轴）。但它们具有相同的缩放中心点和技术，其中心点就是元素的中心位置，缩放基数就是1（也就是参数是相对于1的多少倍），如果参数大于1元素就放大，反之元素就缩小。

transform: scale(1.5);

transform: scale(0.5);

 

transform: scaleX(0.5);

transform: scaleX(1.5);

 

transform: scaleY(1.5);

transform: scaleY(0.5);

 

 

4.skew扭曲（倾斜）

扭曲在我看来就是拉动四个角，往外拉，在水平方向拉，在垂直方向拉，水平方向和垂直方向同时拉。

先来看看只在水平方向拉

 

（1）skewX(* deg)按给定的角度沿x轴指定一个斜切变换（就是四个角在水平方向发生translate移动）。skewX是使元素以其中心为几点，并且在水平方向（x轴）进行扭曲变换。当skew()只指定一个值的时候，发生的也是水平扭曲

transform: skewX(30deg);//transform: skew(30deg);

 

transform: skewX(-30deg);

 

（2）skewY：按指定的角度沿y轴指定一个斜切变换（就是四个角往上下拉）

transform: skewY(30deg);

 

（3）skew（x,y）：：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。（就是四个角先在左右拉，拉完再继续上下拉动）

transform: skew(30deg,30deg);

 

 

5.其他属性

 

 

（1）transform-style

设置内嵌的元素在 3D 空间如何呈现。有两个值：flat：所有子元素在 2D 平面呈现；preserve-3d：保留3D空间

（2）perspective-origin

 

（3）backface-visibility

该属性用于隐藏内容的背面。默认情况下，背面可见的，也就是当翻转后，背面内容仍然可见。但是当backface-visibility设置为hidden的时候，旋转后内容将会被隐藏。

 

取值：visible,hidden

 

这三个值涉及3d有点难还没理解，稍后再说

https://www.cnblogs.com/zhangxiaopeng/p/5724832.html

 

 

 

三、animation（动画）

动画animation有两个关键

一个是animation本身的属性值，一个是keyframes的写法，keyframes比较简单，我们先来说说这个。

 

keyframes其实就是帧的集合，为什么这样说呢？

我们在上面看到了transition，发现它其实可以做很多动画对不对？但是有没有发现，transition它只允许在两种状态之间进行过度，没有中间的值。

而我们把一个动画看作是许多个帧的集合，我们可以去设定每个帧的呈现（每个时刻对应的css属性值），这样的动画就有更多的可变性了。

 

keyfram用@keyframs开头，后面接一个动画名，然后用大括号括起来，在里面写每一个关键帧的属性。

就像下面这样

@keyframes newframes {

    0%{

        

    }

    100%{

        

    }

}

其中0%可以用from来代替，100%可以用to来代替，但是这两个值不能省略，也不能只写0或只写100，否则不会有任何效果。

在0%到100%之间，我们可以设置任意多个关键帧来设定css的样式，从而达到一种动画一直在变化的效果。

 

再来看看animation有哪些属性

 

css3中的animation属性类似于transition属性，都是随着时间去改变元素的属性值，但是两者的区别就在于，transition一定要有一个事件触发才会产生效果。就像是hover，click等。但是animation不需要任何事件的触发也可以随着时间的变化去改变css属性值，从而产生一种动画的效果。

 

• animation-name(动画名，也就是keyfram中定义的动画名)

• animation-duration（动画持续时间）

• animation-timing-function（动画变化的速率）

• animation-delay（动画延迟播放的时间）

• animation-iteration-count（动画循环的次数，infinite是无限次）

• animation-direction（动画的方向）

• animation-play-state动画的播放状态

 

 

前5个属性值就很简单易懂了。就不再赘述，下面聊聊animation-direction和animation-play-state

 

animation-direction这个属性是用来指定元素播放的方向，只有两个值，默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。

另一个值是alternate，设定animation-direction为alternate，那么第一次播放到100%后就会从100%播放到0%，如此往返。

 

animation-play-state主要是用来控制元素动画的播放状态，主要有两个值running和pause，其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。

.animation{

    width: 300px;

    height: 300px;

    position: absolute;

    font-size: 22px;

    color: white;

    background-color: brown;

    animation: newframes 3s ease alternate infinite;



}



@keyframes newframes {

    0%{

        width: 300px;

        height: 300px;

        background-color: brown;

    }

    40%{

        width: 500px;

        height: 500px;

        background-color: seagreen;

    }

    60%{

        width: 400px;

        height: 400px;

        background-color: coral;

    }

    100%{



    }

}

 

 

简写方式：

transition: <name> <duration> <animation type> <delay><iteration><direction>

 

下面是例子

三者的混合使用

1.在导航中，当鼠标移到一个选项的时候，该选项出现下划线。

 

这里需要注意的是，因为第一个是不起效果的，所以动效应该只在li:th-child(n+2)上写，这样就不会写在第一个上面了

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用纯transition实现的hover</title>

    <style>

        .container{

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .navigation{

            width: 100%;

            height: 50px;

            background-color: #262f34;

        }

        .head{

            width: 42px;

            height: 42px;

            border-radius: 40px;

            border: white 1px solid;

            position: relative;

            margin: 3px 0 0 200px;

            float: left;

        }

        .head img{

            width: 40px;

            height: 40px;

            border-radius: 40px;

        }

        .ul{

            width: 600px;

            height: 50px;

            position: relative;

            float: left;

        }

        .ul li{

            list-style: none;

            font-size: 20px;

            color: honeydew;

            float: left;

            margin-left: 100px;

            cursor: pointer;

        }

        .ul li:nth-child(1)::after{

            position: absolute;

            width: 100px;

            height: 3px;

            background-color: seagreen;

            content: "";

            margin: 31px 0 0 -63px;



        }

        /*不选择第一个的时候使用n+2*/

        .ul li:nth-child(n+2)::after{

            position: absolute;

            width: 100px;

            height: 3px;

            background-color: seagreen;

            content: "";

            margin: 31px 0 0 -63px;

            transform: scaleX(0);

            -webkit-transform: scaleX(0);

            -moz-transform: scaleX(0);

            -ms-transform: scaleX(0);

            -o-transform: scaleX(0);

            transition: all ease-in-out 0.2s;

            -webkit-transition:all  ease-in-out 0.2s;

            -moz-transition:all ease-in-out 0.2s;

            -o-transition:all ease-in-out 0.2s;

        }

        .ul li:hover::after{

            transform: scaleX(1);

            -webkit-transform: scaleX(1);

            -moz-transform: scaleX(1);

            -ms-transform: scaleX(1);

            -o-transform: scaleX(1);

        }





    </style>

</head>

<body>



<div class="container">

    <div class="navigation">

        <div class="head"><img src="../img/2.jpg"></div>

        <ul class="ul">

            <li class="active">主页</li>

            <li>收藏</li>

            <li>动态</li>

        </ul>

    </div>

</div>

</body>

</html>

 

 

 

 

 

 

认真观察上边边框的变化范围，当鼠标移入的时候，立即有一个border的颜色出现，然后border又加了这层颜色，并且这个变化是呈顺时针方向的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用纯transition实现的hover</title>

    <style>

        .container{

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .navigation{

            width: 100%;

            height: 50px;

            background-color: #262f34;

        }

        .head{

            width: 42px;

            height: 42px;

            border-radius: 40px;

            border: white 1px solid;

            position: relative;

            margin: 3px 0 0 200px;

            float: left;

        }

        .head img{

            width: 40px;

            height: 40px;

            border-radius: 40px;

        }

        .ul{

            width: 600px;

            height: 50px;

            position: relative;

            float: left;

        }

        .ul li{

            list-style: none;

            font-size: 20px;

            color: honeydew;

            float: left;

            margin-left: 100px;

            cursor: pointer;

        }

        .ul li::after{

            position: absolute;

            width: 100px;

            height: 3px;

            background-color: seagreen;

            content: "";

            margin: 31px 0 0 -63px;

            transform: scaleX(0);

            -webkit-transform: scaleX(0);

            -moz-transform: scaleX(0);

            -ms-transform: scaleX(0);

            -o-transform: scaleX(0);

            transition: all ease-in-out 0.2s;

            -webkit-transition:all  ease-in-out 0.2s;

            -moz-transition:all ease-in-out 0.2s;

            -o-transition:all ease-in-out 0.2s;

        }

          .ul li:hover::after{

            transform: scaleX(1);

            -webkit-transform: scaleX(1);

            -moz-transform: scaleX(1);

            -ms-transform: scaleX(1);

            -o-transform: scaleX(1);

        }



        .btn{

            width: 200px;

            height: 200px;

            margin: 100px;

        }

        .but{

            width: 150px;

            height: 50px;

            background-color: white;

            color: coral;

            border-radius: 15px;

            border: 1px solid slategray;

            transition: all 0.6s ease-in-out;

            position: relative;

            cursor: pointer;

        }



        .but::after,.but::before{

            position: absolute;

            content: '';

            display: block;

            width: 0;

            height: 0;

            box-sizing: border-box;

            /*设置透明的边框，看不见*/

            border: 1px solid transparent;

            border-radius: 15px;

            top: -2px;

            left: -2px;

        }



        .but:hover::after,.but:hover::before{

            width: 150px;

            height: 50px;

        }



        /*鼠标移出的时候·1调用*/

        .but:before{

            transition: border-color 0s ease-in 0.4s,width 0.2s ease-in,height 0.2s ease-in 0.2s;

        }

        .but::after{

            transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

        }

        /*鼠标移入的时候调用*/

        .but:hover::before{

            border-bottom-color: red;

            border-left-color: red;

            transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s ,height 0.2s ease-out 0.6s;

        }

        .but:hover::after{

            border-top-color: red;

            border-right-color:red ;

            transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;

        }





    </style>

</head>

<body>



   <div class="container">

        <div class="navigation">

            <div class="head"><img src="../img/2.jpg"></div>

            <ul class="ul">

                <li class="active">主页</li>

                <li>收藏</li>

                <li>动态</li>

            </ul>

        </div>



       <div class="btn">

            <button class="but">点击按钮</button>

       </div>

   </div>





</body>

</html>

 

 

 

 

先来观察这个动图的变化，就是当鼠标移入的时候，出现一个介绍的界面，这个界面中内容是从下往上出现的，而四个边框都是慢慢出现的，可以看到是从中心点往外扩的，那么就可以设置两个伪元素,after和before，先设置她们具有边框。before的边框是top和bottom，after的边框是left和right。

如果这样设置了之后，那么设置translate的时候就要对应的设置，top和bottom的是设置x轴的scale。

 

在鼠标移入之前，before（top和bottom）已经被缩放成（x轴没有，y轴不缩放，也就是此时width=0，height=1），注意此时要用transform: scale(0,1) ;或者scaleX（0），当鼠标移入的时候就设置transform: scale(1)，，此时before从中心点往两边拉，也就是当鼠标没有移入的时候，这是一幅卷起来的画。但是当鼠标移入了之后，这幅画从中间往两边拉开。而当鼠标移出的时候，又从两边往中间拉这幅画。

 

而after负责两边的动画，也就是一开始after是一幅卷起来的画，当鼠标移入的时候从中间往上下两边拉这幅画，当鼠标移出的时候的时候，从上下往中间卷这幅画。

 

需要注意的是transform是静态属性，也就是当页面加载完毕的时候，就已经完成了对应的变换，我们在一开始的时候给before设定了scale（0,1），也就是元素已经成为一条竖直的线（当然这条线是看不到的，因为width=0），当鼠标移入的时候，因为transform发生了变化，且此时scale（1），所以，此时有将x轴放大到1.所以就形成了从中间往两边开的效果。

 

 

当after，尽管设置的是scale（1）（因为只有一个参数的时候，默认为x,y两个的参数值一样。）所以此时也是因为transform有了变化，且y轴设置为放大到一倍。所以此时也就有了效果。

 

需要注意的是，y轴的正直是往下的！！！

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .effect-box {

            position: relative;

            display: inline-block;

            overflow: hidden;

            width: 250px;

            height: 158px;

            background: rgba(53, 172, 197, 1);

            cursor: pointer

        }



        .effect-box img {

            display: block;

            width: 100%;

            height: 100%;

            opacity: .7;

            -webkit-transition: opacity .35s;

            transition: opacity .35s

        }



        .effect-box:hover img {

            opacity: .4

        }



        .effect-box .border-line2 {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            box-sizing: border-box;

            padding: 2em;

            font-size: 1.25em;

            color: #fff;

            text-transform: uppercase;

            -webkit-backface-visibility: hidden;

            backface-visibility: hidden

        }

        .effect-box .border-line2::after,

        .effect-box .border-line2::before {

            position: absolute;

            top: 30px;

            right: 30px;

            bottom: 30px;

            left: 30px;

            content: '';

            opacity: 0;

            pointer-events: none;

            -webkit-transition: opacity .35s, -webkit-transform .35s;

            transition: opacity .35s, transform .35s

        }



        .effect-box .border-line2::before {

            border-top: 1px solid #fff;

            border-bottom: 1px solid #fff;

            -webkit-transform: scale(0, 1);

            transform: scale(0, 1)

        }

        .effect-box .border-line2::after {

            border-right: 1px solid #fff;

            border-left: 1px solid #fff;

            -webkit-transform: scale(1, 0);

            transform: scale(1, 0)

        }

        .effect-box:hover .border-line2::after,

        .effect-box:hover .border-line2::before {

            opacity: 1;

            -webkit-transform: scale(1);

            transform: scale(1)

        }

        .effect-box .border-line2 p {

            padding: 4px 10px;

            margin: 0;

            font-size: 16px;

            line-height: 1.0;

            text-align: center;

            color: #fff;

            letter-spacing: 1px;

            opacity: 0;

            -webkit-transition: opacity .35s, -webkit-transform .35s;

            transition: opacity .35s, transform .35s;

            -webkit-transform: translate3d(0, 20px, 0);

            transform: translate3d(0, 20px, 0)

        }

        .effect-box:hover .border-line2 p {

            opacity: 1;

            -webkit-transform: translate3d(0, 0, 0);

            transform: translate3d(0, 0, 0)

        }

    </style>

    <style>

        .myeff{

            width: 300px;

            height: 300px;

            background-color: #367dff;

        }

        .show{

            width: 300px;

            height: 280px;

            display: inline-block;

            position: absolute;

            margin-top: 20px;

            backface-visibility: hidden;

            box-sizing: border-box;

        }

        .show::before,.show::after{

            width: 200px;

            height:200px;

            position: absolute;

            content: "";

            top: 20px;

            left: 50px;

            transition: opacity .35s ,transform .35s;

        }

        .show::before{

            border-top: 1px solid white;

            border-bottom:1px solid white;

            transform: scale(0,1) ;

        }

        .show::after{

            border-left:1px solid white;

            border-right: 1px solid white;

            transform: scale(1,0);

        }



        .myeff:hover .show::after,.myeff:hover .show::before{

            transform: scale(1);

        }

        .show p{

            height: 40px;

            width: 100%;

            font-size: 22px;

            color: white;

            text-align: center;

            opacity: 0;

            transition: opacity 0.35s ,transform 0.35s;

            transform: translate(0,20px);



        }

    .myeff:hover .show p{

            transform: translate(0,0);

        }



    </style>

</head>

<body>

    <div class="effect-box">

        <div class="border-line2">

            <p> 319 </p>

            <p> 布局和界面</p>

            <p>Read More</p>

        </div>

    </div>

    <div class="myeff">

            <div class="show">

                <p>402</p>

                <p>布局与界面</p>

                <p>readmore</p>

            </div>

        </div>



</body>

</html>