您的位置：首页 > Web前端 > CSS

Css3 3d animation Step1---介绍如何实现css动画

2012-07-24 17:13 786 查看

转载地址:http://www.iteye.com/topic/1116417

前言：

好久没写文章了，今天看到webQQ又一次升级。我用的chrome的画面切换甚至用到了css 3d animation+3dtransform。

这是本系列的第一篇文章，用于介绍仅用css实现3d动画。也许这篇文章也许过于超前，因为大部分的浏览器器，甚至包括FF，都还没有实现3d transform。涉及到animation的部分，你可以通过webkit内核的浏览器(Chrome or Safari)或者Firefox来浏览，但是涉及到3d transform的东西请用webkit的浏览器器浏览。

Css3 @KeyFrames Rule

什么是KeyFrames？直译过来就是关键帧。你可以把他理解为flash中的关键帧。他以关键字from开始，to结束。中间的部分都为百分比。意为动画到了某个百分比时，他的状态。而帧与帧之间的补间动画浏览器会帮你自动生成。

例如：

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

@keyframes myfirst {

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */ {

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */ {

from {background: red;}

to {background: yellow;}

}

#sample {

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

/* Firefox: */

-moz-animation-name: myfirst;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-delay: 2s;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: alternate;

-moz-animation-play-state: running;

/* Safari and Chrome: */

-webkit-animation-name: myfirst;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-webkit-animation-play-state: running;

}

</style>

</head>

<body>

<div id="sample" style="width:120px; height:120px;">

</div>

</body>

</html>

animation-name：和上面的@keyframe的名字对应起来，代表当前用的是何种变换

animation-duration: 代表动画开始到结束总共耗时多少时间

animation-timing-function：代表动画的进行是均匀的还是先快后慢还是？他有这几个枚举值：linear:线性，ease:默认值，先慢后快，到了快一半的时候再变慢，ease-in:先慢后快,ease-out:先快后慢。ease-in-out:两头慢，中间快。cubic-bezier(n,n,n,n)：自定义，n只能输入0-1之间的值。输入的值越大，移动的越慢，4个n代表了动画的4个阶段25%，50%，75%，100%。

也就是说，linear,ease等值，只是cubic-bezier在浏览器中的预设值，可以简单表示如下：

animation-delay：代表动画延迟多少时间开始，默认为0

Html代码

#linear {animation-timing-function: cubic-bezier(0,0,1,1;}

#ease {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#ease-in {animation-timing-function: cubic-bezier(0.42,0,1,1);}

#ease-out {animation-timing-function: cubic-bezier(0,0,0.58,1);}

#ease-in-out {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

animation-iteration-count:代表动画执行多少次，默认为1.如果输入infinite，则代表无限次

animation-direction：默认值为normal，代表动画执行完后从头开始。如果设置为alternate，那么动画在结束后，第二遍会反着执行一遍

animation-play-state：默认值running，代表现在是执行状态。如果要让动画停止，只需要把这个值赋值为paused

好，接下来把上面的代码串联起来。

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

@keyframes myfirst {

from {left:0px; top:0px; background: red; }

50% {left:100px; top:80px;}

70%, 80% {transform: rotate(-360deg);left:240px; top:240px;}

to {left:279px; top:279px; background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */ {

from {left:0px; top:0px; background: red; }

50% {left:100px; top:80px;}

70%, 80% {-moz-transform: rotate(-360deg);left:240px; top:240px;}

to {left:279px; top:279px; background: yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */ {

from {left:0px; top:0px; background: red; }

50% {left:100px; top:80px;}

70%, 80% {-webkit-transform: rotate(-360deg) scale(0.5, 0.5);left:240px; top:240px;}

to {left:279px; top:279px; background: yellow;}

}

#sample {

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-direction: alternate;

/* Firefox: */

-moz-animation-name: myfirst;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: alternate;

/* Safari and Chrome: */

-webkit-animation-name: myfirst;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

}

</style>

</head>

<body>

<div style="width:400px; height:400px; border-style:dashed; border-width:1px; position:relative;">

<div id="sample" style="width:120px; height:120px; position:absolute;"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航