WEB前端开发

在Codrops上看到了这篇文章《Animated Buttons with CSS3》，按钮效果非常赞！转过来分享一下：

demo：http://www.css88.com/demo/AnimatedButtons/ (页面有广告，点击需谨慎！！！)

前几天在Qzone上看到css3动画，非常神奇，所以也学习了一下。首先看看效果http://www.css88.com/demo/css3_Animation/

很悲剧的是css3动画现在只有WebKit内核的浏览器（Safari和Chrome）支持，虽然应用还不是时候，但是效果却不可低估。

在哪里定义动画效果？

css3动画一般通过鼠标事件或者说状态定义动画，通常我们可以用CSS中伪类和js中的鼠标事件来定义。

js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等

transition的基本语法：

css3动画通过transition属性和其他css属性（颜色，宽高，变形，位置等等）配合来实现。

transition的语法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

当然这是简写，我们也可以完整的写：

transition-property ： none | all | [ <IDENT> ] [ '

1

,

' <IDENT> ]*；

transition-duration ： <time> [, <time>]*

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay ： <time> [, <time>]*

继续阅读：WebKit CSS3 动画基础»