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);
    }
}