css中关于transform、transition、animate的区别

写动画经常会用到这几个属性，他们之间有什么区别呢？

1.transform

　　每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性。它其实只是一个静态属性，需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样，只是一个静态样式而已。

它可以让元素偏移、伸缩、变形、旋转等。

具体的给设计师改变元素样式用的属性则有以下五个：

translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
rotate(deg)是用来控制元素旋转角度的；
skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
scale3d(x,y,z) 用来放大缩小效果，属性是比值；
matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

2.transition

　　它属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。

<div class="transform"></div> 

.transform{
        width:100px;
        height:100px;
        background: red;
        transition: all 1s ease-out;
    }
    .transform:hover{
        transform:rotate(360deg);
    }

3.Animation 

　　详细讲解请看我的另外一篇文章：http://www.cnblogs.com/freefish12/p/5510210.html

.context{
width:100px;
height:100px;
background: blue;
left:0;
position:absolute;
}

@keyframes move{
     from{
        transform: rotateY(180deg);
     }
     to{
         transform: rotateY(360deg);
     }
    }
    .context:hover{
        animation: move 0.5s infinite alternate;
    }

<div class="context">
        <div class="sub-context"></div>
   </div> 
        

 

转载于:https://www.cnblogs.com/freefish12/p/5580527.html