CSS3 动画

CSS3 动画

看基本的属性；

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

animation-name：指定动画帧的名称；

animation-duration:指定动画运行的时间：秒（s） 毫秒（ms）

animation-timing-function：指定动画运行的方式

animation-delay:指定动画延迟的时

animation-iteration-count:指定动画重复的次数

animation-direction:指定动画是否以向反的方向运行

我们先做一个简答的实例：让物体运动起来；

.demo{
    width:100px;
    height:50px;
    background:green;
    position:relative;
    animation:cssMove 5s infinite;
    -moz-animation:cssMove 5s infinite;
    -webkit-animation:cssMove 5s infinite;
}
@keyFrames cssMove{
    from{left:0px;}
    to{left:200px;}
}
@-moz-keyframes cssMove{
    from{left:0px;}
    to{left:200px;}
}
@-webkit-keyframes cssMove{
    from{left:0px;}
    to{left:200px;}
}

ps：我发现运动这东西，都比较耗费cpu，

 背景颜色额改变滴呀：（背景颜色从红色变成黄色，在5s内）

css：

.demo{
    height:150px;
    width:150px;
    background:red;
    animation:changeBg 5s;
    -moz-animation:changeBg 5s;
    -webkit-animation:changeBg 5s;
    -o-animation:changeBg 5s;
}
@keyframes changeBg{
 from { background:red;}
 to {background:yellow;}    
}
@-moz-keyframes changeBg{
 from {background:red;}
 to{background:yellow;}
}
@-o-keyframes changeBg{
    from {background:red;}
    to{background:yellow;}
}

在实例中，我们多是使用到from to；它就等同于 0% 和 100%。

多值变化：

.demo1{
    height:150px;
    width:150px;
    background:red;
    animation:changeBg1 5s;
    -moz-animation:changeBg1 5s;
    -webkit-animation:changeBg1 5s;
    -o-animation:changeBg1 5s;
}
@keyframes changeBg1{
 0% { background:red;}
 25% { background:black;}
 50% { background:green;}
 100%{ background:yellow;}

}
@-moz-keyframes changeBg1{
 0% { background:red;}
 25% { background:black;}
 50% { background:green;}
 100%{ background:yellow;}

}
@-o-keyframes changeBg1{
 0% { background:red;}
 25% { background:black;}
 50% { background:green;}
 100%{ background:yellow;}

}

实例：物体运动+背景颜色的变化；

css代码：

.css3{
    height:150px;
    width:150px;
    background:red;
    position:absolute;
    animation:move 5s;
    -moz-animation:move 5s;
    -webkit-animation:move 5s;
    -o-animation:move 5s;
}
@keyframes move{
 0%{ background:red; left:0px; top:0px;}
 25%{ background:yellow; left:200px; top:0px;}
 50%{ background:green; left:200px; top:200px;}
 75%{ background:blue; left:0px; top:200px;}
 100%{ background:red; left:0px; top:0px;}    
}
@-moz-keyframes move{
 0%{ background:red; left:0px; top:0px;}
 25%{ background:yellow; left:200px; top:0px;}
 50%{ background:green; left:200px; top:200px;}
 75%{ background:blue; left:0px; top:200px;}
 100%{ background:red; left:0px; top:0px;}    
}
@-webkit-keyframes move{
 0%{ background:red; left:0px; top:0px;}
 25%{ background:yellow; left:200px; top:0px;}
 50%{ background:green; left:200px; top:200px;}
 75%{ background:blue; left:0px; top:200px;}
 100%{ background:red; left:0px; top:0px;}    
}
@-o-keyframes move{
 0%{ background:red; left:0px; top:0px;}
 25%{ background:yellow; left:200px; top:0px;}
 50%{ background:green; left:200px; top:200px;}
 75%{ background:blue; left:0px; top:200px;}
 100%{ background:red; left:0px; top:0px;}    
}

多参数设置之后让物体永久正向运动完之后逆向运动

.css3{
    height:150px;
    width:150px;
    background:red;
    position:absolute;
    animation:move 5s linear 2s infinite alternate running;
    -moz-animation:move 5s linear 2s infinite alternate running;
    -webkit-animation:move 5s linear 2s infinite alternate running;
    -o-animation:move 5s linear 2s infinite alternate running;
    
    /*我们可以设置它的所有参数滴呀*/
    /*
      运动的框架名称；
      规定动画完成一个周期所花费的时间；
      规定动画运动的方式；
      规定动画何时开始（也可以理解成延迟）；
      规定动画在下一周期是否逆向播放；
      规定动画是否正在运行和停止，默认为running
      
      
    */
    
}

这些只是一些基本的了解；更多的是要做出实例；

后续跟进中....