css3过渡和动画

css3里面新增属性 transition   animation  等等，方便了前端小伙伴们做动画。不用再用js写长长的一大串，效果还不好！（这是对我等菜鸟来说，大神们怎么着都可以，唉！！）用代码来实现动画，其实就是不同时间，元素有不同的状态。

而这里面有个很好用的2d转换属性：transform，广大浏览器的支持也很不错。

属性transform  有很多的值，常用的就：

transform：translate(100px,200px);这个鬼是‘’偏移‘’，有点类似于定位的relative。该值呢2个参数，分别是x\y两个方向上的值，只有一个参数时，默认y是0；

transform：rotate(30deg);这个鬼呢是“旋转”，参数就是旋转的度数。默认的旋转中心是元素的中心，通过transform-origin，可以改变这个中心。

transform：scale(1.2,1.5);这个鬼呢，就是“缩放”了，一般是hover的时候变大一下。2个参数，分别是x、y两个方向上的缩放比例。

只有一个参数时，默认y的值等于x的值。

还有skew（） matrix（）这俩货，官方分别叫“斜切” “混合”，有点“变形”的意思，用不好！！

扯淡结束，言归正传。

1、transition

一般俩值就够用，第一个是元素属性值变化的那个属性名 ，第二个是过渡时间啦。

如果只是改变了一个属性，比如width，transition:width 1s;这样写就ok了，但是有多个属性改变时，图省事，写个all吧，代表所有属性！！

2、animation

首先呢，用  @keyframe 来定义一个动画，动画名字随意就好。里面0%  50%就代表了不同的状态，根据自己需要还可以再细分（0% 25% 50% 75% 100%）.

0%  和  100%是一样的，开始和结束是一样的，中间随意。

写好动画后，就可以  ‘’调用‘’   这个动画了。

 animation:animation1 2s linear 2s 5;

一般最少2个值，动画名（你随意写的那个），完成整个动画一次的时间。

第三个值是动画完成过程（ease  easeout  linear 等），代表这先慢后快  、先快后慢、 线性 。

第三个值是，动画执行的延迟时间。

第四个值是动画执行次数，默认是执行一次。无数次是 infinite。自己随便写个十次八次也没问题。

还有别的值，自己查   http://www.w3school.com.cn/css3/css3_animation.asp  吧！！里面很详细。

 

处理兼容性的话一般这么写：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}
在@keyframe前面也加前缀就ok了，

eg：    -moz-@keyframe
如果都写的话，好长啊！！

先到这里，有时间再补充！！！！！

转载于:https://www.cnblogs.com/gaoxt/p/7115710.html