css3动画之常用按钮、卡片动画特效

前言：

不得不说引入CSS3的 transition 属性之后，让部分动画变得无比简单与高效，之前很多要用监听事件才能完成的动画效果，现在“一个” transition 就可以解决，而且高效多了。

这里我先列出六种动画来浅谈下CSS3的 transition 属性来实现动画（你会发现实现其实大同小异的）

 

效果图：

 

了解transition：

在讲解实现之前，我们要先来了解一下这个 transition 属性。

Q：什么是 transition属性呢？
A：w3.org 给出的官方解释是“CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration” 翻译一下就是 “它允许CSS部分属性的值在变化时，在指定的时间内平滑过渡” 当然，也只是部分属性而已，但是这部分属性已经足够让我们做出非常强悍的动画效果了。

 

Q：我们要怎么使用 transition 呢？