CSS3动画

CSS3动画
1、过渡动画
即使用transition属性实现,使用方法如下:

div{
    width:100px;
    height:100px;
    background-color:#333;
    transition:width 2s,height 2s,background-color 2s;
    -webkit-transition:width 2s,height 2s,background-color 2s;
    -moz-transition:width 2s,height 2s,background-color 2s;
    -o-transition:width 2s,height 2s,background-color 2s;
}
div:hover{
    width:200px;
    height:200px;
    background-color:#666;
}

transition实现的动画需要动作触发。
2、关键帧动画
不同于过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态.
@keyframes 动画名称{

}
animation:动画名称animation-name 持续时间animation-durantion 动画的速度曲线animation-timing-function 动画延迟animation-delay 动画播放次数animation-iteration-count 是否应该轮流反向播放动画animation-direction;
下面解释animation的6个属性:
a)、animation-name
b)、animation-durantion
定义动画完成一个周期所需要的时间
取值单位为秒s或毫秒ms.默认时长为0,即不播放.
c)、animation-timing-function
规定动画的速度曲线,用于使变化更平滑.
取值可为:ease | linear匀速| ease-in低速开始| ease-out低速结束| ease-in-out低速开始和结束| cubic-bezier(n,n,n,n)
取值默认为ease,即以低速开始,然后加快,在结束前变慢.
d)、animation-delay
规定动画开始前延迟的时间。
取值单位为秒s或毫秒ms.默认为0,即不延迟.
e)、animation-iteration-count
规定动画播放的次数
取值可为n或者infinite.默认为1,即播放1次。
f)、animation-direction
规定是否轮流反方向播放动画。
取值可为normal、alternate.其中normal表示正常播放,没有效果。alternate表示在奇数次正常播放,偶数次反向播放
使用方法如下:

<style>
#shadow-block{
    width:200px;
    height:200px;
    border-radius:100px;
    background-color: blue;
}
@keyframes move{
    0%{
        top: 90px;
    }
    25%{
        left: 90px;
        top: 0;
    }
    50%{
        top: 90px;
        left: 180px;
    }
    75%{
        top: 180px;
        left: 90px;
    }
    100%{
        top: 90px;
        left:0;
    }
}
@-webkit-keyframes move{
    0%{
        top: 90px;
    }
    25%{
        left: 90px;
        top: 0;
    }
    50%{
        top: 90px;
        left: 180px;
    }
    75%{
        top: 180px;
        left: 90px;
    }
    100%{
        top: 90px;
        left:0;
    }
}
#shadow-content{
    width:20px;
    height:20px;
    background-color: red;
    position: relative;
    top: 90px;
    left:0;
    animation: move 2s linear infinite alternate;
    -webkit-animation: move 2s linear infinite alternate;
}
</style>
<div id="shadow-block">
    <div id="shadow-content"></div>
</div>