CSS3简单学习

　　面对C3以及H5的火热，作为一名前端开发人员的我，必须得张开双手全力拥抱啊！

虽然目前的工作用到的这些非常少，但是，咱也还是有必要多熟悉熟悉。

那么就是今天了，今天我们来简单看看CSS3的美妙之处。

　　说到CSS3，想必大家的第一反应就是动画了。确实，不用JS光靠CSS就能实现动

画效果，这对于广大前端开发人员来说还是很具有吸引力，查阅相关资料，发现，CSS3

中一个关于创建动画的核新：@keyframes规则。

　　目前浏览器都不支持@keyframe规则，但是，相应的有替代的规则；

　　Firefox 支持 @-moz-keyframes规则。

　　Opera 支持替代的@-o-keyframes规则。

　　Safari和Chrome支持替代的@-webkit-keyframes规则。

知道@keyframes的重要后，那么我们关注的是用法了。

原理：在此之前我们要理解，创建动画的原理是，将一套CSS样式逐渐变化为另一套样式。

用法：还是直接拿例子说更直观

@keyframes myStyle{

   0% {width:100px}

  50%{width:50px}

 100%{width:200px}

}

div{

width:20px;

height:100px;

background:#000;

animation:myStyle 5s infinite(表示无限次循环效果);

}

<div></div>

展示的效果是：DIV从100PX（0%设置了宽度变为100px），逐渐变为50px,再变为200px

说明：上例中，myStyle就是定义的动画名，其中的百分比表示到指定时间百分比时的CSS效果，比如50%{width:50}就表示这个动画从0到动画的一半的时候，宽度是50px.

还有一种简单的从开始到结尾的定义动画，可这样设置

@keyframes myStyle{


   frome {width:100px}


   to{width:200px}


}

其中frome == 0%,to == 100%

以这个小例子为参考，其它的复杂点的动画，基本都是按这个套路来,好了，刚入门的前端猴们，我们一起用起来