详解css3系列:动画@keyframes和Animation

在css3中,我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中,否则不会有效果出现。同时,我们还需定义动画时长动画名称

语法

@keyframes animationname {keyframes-selector {css-styles;}}
描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。

在css3中,我们以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。其中,0% 是动画的开始时间,100% 动画的结束时间。


animation

另外一个重要的属性:animation

animation 属性是一个简写属性,用于设置六个动画属性:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

duration(持续的时间)

语法:

animation: name duration timing-function delay iteration-count direction;
描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

animation-name属性主要是用来调用@keyframes定义好的动画。

注:animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。

语法

animation-direction: normal|alternate;
描述
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。

animation-timing-function 值:

代码例子

    <style type="text/css"> 
        @keyframes changeColor{
        0%{
            background: #675AB3;
        }
        20%{
            background:#C1E8FF;
        }
        40%{
            background:#A48992;
        }
        60%{
            background:#FFF900;
        }
        80%{
            background:#6D87A0;
        }
        100%{
            background: #FFB89A;
        }
    }
        div {
        width: 400px;
        height: 150px;
        background: #E7F0EF;
        color:black;
        margin: 50px auto;
    }
        div:hover {
            animation: changeColor 6s ease-in-out   .2s;
    }
    style>
 head>
 <body>
    <div>鼠标移动到我这里,查看动画效果div>
 body>

demo

点击下面的result查看demo:
http://jsfiddle.net/trigkit/076e0rh3/


你可能感兴趣的:(CSS)