CSS3 animation利器完爆flash

HTML/CSS 2014-01-02 css3,animation,flash,动画

记得long long ago要在网页中实现动画,基本都是flash,这flash老大的位置一直到CSS3出现以后开始动摇了,CSS3 animation函数可以说是flash的致命打击,此函数支持主流浏览器,包括支持CSS3的IE浏览器。

animation 参数:

Property Description CSS
@keyframes Specifies the animation 3
animation A shorthand property for all the the animation properties, except the animation-play-state property 3
animation-name Specifies the name of the @keyframes animation 3
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0 3
animation-timing-function Describes how the animation will progress over one cycle of its duration. Default "ease" 3
animation-delay Specifies when the animation will start. Default 0 3
animation-iteration-count Specifies the number of times an animation is played. Default 1 3
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal" 3
animation-play-state Specifies whether the animation is running or paused. Default "running" 3

详情大家可以进W3C看看:http://www.w3schools.com/css/css3_animations.asp

例子1:

HTML Code:

<div class="box">
    <span class="a1">从左边渐渐飘入</span>
    <span class="a2">从中间淡入闪动两下,然后淡出</span>
    <span class="a3">从右边渐渐飘入</span>
    <hr  />
    <span class="a4">这个一直永久重复飘动</span>
    <hr />
    <span class="a5">从小变大, 颜色从红变到绿</span>
</div>

CSS Code:

.box { 
    width:500px; 
    height:300px;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
    border:3px solid #eee;
    background:#e0e0e0;
    overflow:hidden;
}

span{
    opacity:0;
    display:block;
    height:50px;
    font:bold 14px/50px "宋体";
}

.a1{
    transform:translate(55px);
    -webkit-animation:animations 2s ease-out;
    animation:animations 2s ease-out;
}

@-webkit-keyframes animations{
    0%{-webkit-transform:translate(0);opacity:0;}
    50%{-webkit-transform:translate(30px);opacity:1;}
    70%{-webkit-transform:translate(35px);opacity:1;}
    100%{-webkit-transform:translate(60px);opacity:0;}	    
}

@keyframes animations{
    0%{transform:translate(0);opacity:0;}
    50%{transform:translate(30px);opacity:1;}
    70%{transform:translate(35px);opacity:1;}
    100%{transform:translate(60px);opacity:0;}
}

.a2{
    text-align:center;font-size:26px;
    -webkit-animation:animations2 5s ease-in-out 2s;
    animation:animations2 5s ease-in-out 2s;
}

@-webkit-keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}

@keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}

.a3{
    transform:translate(360px);
    -webkit-animation:animations3 2s ease-out 2s;
    animation:animations3 2s ease-out 2s;
}

@-webkit-keyframes animations3{
    0%{-webkit-transform:translate(360px);opacity:0;}
    50%{-webkit-transform:translate(330px);opacity:1;}
    70%{-webkit-transform:translate(325px);opacity:1;}
    100%{-webkit-transform:translate(300px);opacity:0;}
}

@keyframes animations3{
    0%{transform:translate(360px);opacity:0;}
    50%{transform:translate(330px);opacity:1;}
    70%{transform:translate(325px);opacity:1;}
    100%{transform:translate(300px);opacity:0;}
}

.a4{
    transform:translate(0);
    opacity:1;
    color: blue;
    /* infinite 永久重复 */
    -webkit-animation:animations4 5s linear infinite;
    animation:animations4 5s linear infinite;		
}

@-webkit-keyframes animations4{
    0%{-webkit-transform:translate(0px);}
    100%{-webkit-transform:translate(500px);}
}

@keyframes animations4{
    0%{transform:translate(0px);}
    100%{transform:translate(500px);}
}

.a5{
    transform:translate(0);
    opacity:1;
    -webkit-animation:animations5 8s linear infinite;
    animation:animations5 8s linear infinite;		
}

@keyframes animations5{
    0%{ transform:translate(0px); width:10%; height:10%; background:red; }
    100%{ transform:translate(400px); width:50%; height:50%; background:blue; }
}

@-webkit-keyframes animations5{
    0%{ -webkit-transform:translate(0px); width:10%; height:10%; background:red; }
    100%{ -webkit-transform:translate(400px); width:50%; height:50%; background:blue; }
}

看看效果:http://www.qttc.net/static/demo/20140102/1.html

惊奇吧!一句js代码都不用写,动画效果都是靠css3去实现。以上样式其中有经常有一段@keyframes animations*,这个就是定义动画的地方。如果你玩过flash,那么这个应该最熟悉不过了,flash要实现动画其实就是定义关键帧,然后靠系统自动运算出每两个关键帧之间的动画,不过这运行只能是一个方向上的。

关键帧

比如,你想让一个球从左边移动到右边,可以这么定义关键帧:

基础CSS:

div {
    position:absolute;
    left:0;
    top:0;
    width:50px;
    height:50px;
    animation:moveCell 3s;
}

关键帧可以这么定义:

@keyframes moveCell{
    from{ left:0; }
    to{ left:500px; }
}

就是有两个关键帧,from开始left=0到to结束left=500px,这就完成了一个非常简单的动画,

DEMO http://www.qttc.net/static/demo/20140102/2.html 

如果,你想让这个div不按直线跑,可以多加一个关键,多个关键帧就需要百分比来描述具体位置了,如:

@keyframes moveCell{
	0% { left:0; top: 0; }
	25% { left:0; top:300px; }
	50% { left:500px; top:300px; }
	100% { left:500px; top:0; }
}

DEMO http://www.qttc.net/static/demo/20140102/3.html

animation:moveCell 3s 这里的3s值的是运行动画的时间,这个也类似于flash的时间轴,我们让它从0px到500px需要3秒跑完,就这么写,这个时间越小速度越快,时间越大速度越慢

我们也可以让它重复n次或者永久重复,在animation:moveCell 3s后面加上n次或者永久重复infinite,如让动画重复6次:

animation:moveCell 3s 6;

让动画永久重复:

animation:moveCell 3s infinite;

永久重复DEMO http://www.qttc.net/static/demo/20140102/4.html

我们不仅可以让它跑过去,还能让它原路返回,这很牛叉,alternate属性:

animation:moveCell 3s infinite alternate;

DEMO http://www.qttc.net/static/demo/20140102/5.html

具体更多的大家看手册吧。

最后

上一个DEMO:http://www.qttc.net/static/demo/20140102/6.html

优点:动画的基本特征无非就是:移动,色变,形变,速度,而这几个特征在animation里都能轻松实现,关键帧也都能轻松实现,也能实现多个动画同时play已经各自的出场时间,配合SVG矢量结合这些动作就能搞定大部分动画,并且各大浏览器都能轻松实现。

缺点:复杂的动画需要写大量Code,虽然只是写CSS Code,还有一个致命的缺点就是动画play结束以后它会还原,比如有开场我让一个div从左跑到右,完了就让它停在哪,结果跑完以后它又还原到左边了。

看看这个例子:http://www.qttc.net/static/demo/20140102/2.html

 

文字链接:《CSS3 animation利器完爆flash

文章地址:http://www.qttc.net/201401398.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?