css3动画学习笔记（一）

简介

one div ：一个有趣的网站。通过css做出来一些有趣的动画。对于网站来说，尽量压缩加载内容十分有必要，而用css代替图片无疑是加快网站访问速度的利器。

---

用法

• 旋转动画

@keyframes fan{    from{        transform: rotate(0deg);    }    to{        transform: rotate(720deg);    }}

用 @keyframes 定义动画，后面跟动画名，类似于定义函数。from和to分别对应0%和100%的帧。
transform 是变换函数，可对元素的大小、角度等属性进行设置。

#demo{    position: relative;    border-radius: 30%;    left:90px;    top:90px;    width: 400px;    height: 400px;    background-color: red;    animation: fan 2s infinite;}

animation引用定义过的动画。参数有一下几个：
animation: name duration timing-function delay iteration-count direction;
name 即为动画名，duration为执行时间，timing-function为动画速度曲线，delay为动画执行之前的延迟时间，iteration-count为动画播放次数（n或infinite），direction为播放方向（normal为重复执行，而alternate为往复执行）。

• 直线动画

@keyframes move{    from{        left: 0;    }    to{        left: 150px;    }}

• 缩放动画

@keyframes scale{    from{        transform:scale(1);    }    to{        transform:scale(2);    }}