css3.0动画

一般做动画都使用javascript中的setTimeout()和setInterval()2个函数来制作。现在可以使用css3中的动画来制作动画了，而且css3.0中的动画使用了GPU来加速会让动画看起来更加平滑，顺畅。由于css3.0中的动画并不是所有浏览器都支持，因此会有这样的写法:@-moz-keyframes 动画名、@-webkit-keyframes 动画名 、@-o-keyframes 动画名、@-ms-keyframes 动画名.

css3.0动画浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

  下面创建一个让div从左到右再回到左边的动画例子:

 

   

首先创建一个moveLeft的动画.

在要引用的元素的css里面增加 -webkit-animation:moveLeft 1s 3;-ms-animation:moveLeft 1s 3;-o-animation:moveLeft 1s 3;animation:moveLeft 1s 3;

animation: myfirst 5s linear 2s infinite alternate;
animation:动画名 动画缓动时间 动画方式 动画时间 执行次数 动画方向；

转载于:https://www.cnblogs.com/gb2013-shangduoduo/p/3903948.html