CSS3之 transform和animation区别

标签：style   ima   tran   一个   否则   ram   inf   css3   webkit   

CSS3 有3种和动画相关的属性：transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用

一、transform  描述的是元素静态样式

         transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 必须是鼠标移上或者点击执行属性变化，鼠标离开属性回归。说到底就是属性不会变化。配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果，否则会很生硬。

       旋转：rote(30deg)    水平面以元素中心旋转多少度；

       rotateX(angle)   定义沿着 X 轴的 3D 旋转；

       rotateY(angle)   定义沿着 Y 轴的 3D 旋转；

       位移 ：translate(x,y)   定义 2D 转换;

       translate3d(x,y,z)  定义 3D 转换;

       缩放：scale(x,y)   定义 2D 缩放转换;

       scale3d(x,y,z)   定义 3D 缩放转换;

二、实现动画效果的：transition   animation

    1、transition   

    2、animation  

      animation 属性是一个简写属性，用于设置六个动画属性：

      animation的使用必须结合@keyframes animation-name使用

         @keyframes  move{

                form{ left:0px;}

               to{ left:200px;}

         }

         在需要动画的元素上面添加动画  div{animation:move 5s infinite;}

二、

CSS3之 transform和animation区别

标签：style   ima   tran   一个   否则   ram   inf   css3   webkit   

原文地址：https://www.cnblogs.com/yongyang/p/8878044.html