Css3动画的简单运用

代码在常人眼里是一项很枯燥的东西，只有你接触之后才会明白代码也是一项很有趣的东西，你可以用它来实现很多你想象不到的东西。下面是运用Css3动画做的一个简单的风车：

上面是普通的Html5的页面布局页面。关于Css3动画的用法，通常使用transform和animation来进行制作transform元素是用于设置变形，它支持一个或多个变形的函数。而animation动画是比transform动画更强大的动画，因为animation在拥有transform的动画效果的同时还可以指定多个关键帧，使其可以“自定义化”。也可以把这两种动画混合使用做出动画效果比如：扭曲，旋转，缩放，位移，矩阵，鼠标悬浮动画效果。。。等等。我们今天用的就是变形函数中的一种：rotate(angle)函数。该函数是用来设置元素旋转的度数。

上面就是写Css3动画的基本格式了，同时也是映照此次主题运用Css3动画来制作的风车代码。主要就是使用@keyframes 函数名{ 0%{ } 100%{ } }进行函数的封装（中途可以无限次分割动画的“进度”），然后将 函数名 进行调用从而实现：执行的函数，执行一次的时间，运动的方式（匀速，快速等等），循环的次数（infinite：无穷，无限‘次’）。
当然，代码的神奇不只是简单动画这么简单，只要你用心，肯定会发现更多神奇的东西，这些都是要不断去探索和尝试的。当你发现了新的东西肯定会很有成就感。