在web上制作动画(css3)

今天学css3的动画，在这里记录下使用方法以及一些技巧

定义一个动画

在css3中定义动画的语法为

    @keyframes 名称 {}

这是w3c的例子 兼容所有浏览器

        @keyframes myfirst
        {
        from {background: red;}
        to {background: yellow;}
        }

        @-moz-keyframes myfirst /* Firefox */
        {
        from {background: red;}
        to {background: yellow;}
        }

        @-webkit-keyframes myfirst /* Safari 和 Chrome */
        {
        from {background: red;}
        to {background: yellow;}
        }

        @-o-keyframes myfirst /* Opera */
        {
        from {background: red;}
        to {background: yellow;}
        }

给某样式设置动画只需要添加animation属性就行了

    通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
        规定动画的名称
        规定动画的时长

例如

把 "myfirst" 动画捆绑到 div 元素,时长:5 秒
        div {
            animation: myfirst 5s;
            -moz-animation: myfirst 5s;    /* Firefox */
            -webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
            -o-animation: myfirst 5s;    /* Opera */
        }

官方推荐动画使用百分比来设置,有一种帧的概念

css元素

css3动画属性 @keyframes
    @keyframes             规定动画
    animation                规定动画属性的简写属性,除了animation-play-state属性
    animation-name            规定@keyframe动画的名称
    animation-duration        规定动画完成一个周期所花费的秒或毫秒,默认是0
    animation-timing-function    规定动画的速度曲线,默认是ease
        linear        动画从头到尾的速度是相同的
    animation-delay            规定动画何时开始,默认是0
    animation-iteration-count    规定动画被播放的次数,默认是1
        infinite            定义动画无限次播放
    animation-direction        规定动画是否在下一周期逆向的播放,默认是normal
    animation-play-state    规定动画是否正在运行或暂停,默认是running
        running        播放
        paused        暂停
    animation-fill-mode        规定对象动画时间之外的状态

下面是我用到的一些动画

让此元素不停旋转

@keyframes music {
            0%   {transform:rotate(0deg);}
            100% {transform:rotate(360deg);}
        }