Css3 3d animation Step1-怎么实现css动画
日期：2014-05-17 浏览次数：20931 次
Css3 3d animation Step1---如何实现css动画
?
前言：
好久没写文章了，今天看到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结束。中间的部分都为百分比。意为动画到了某个百分比时，他的状态。而帧与帧之间的补间动画浏览器会帮你自动生成。
?
例如：
?
<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;}
}
</style>
?为了支持将来可能有的标准，你不得不写3遍。
试着运行下面的代码，里面可能会有你没见过的属性，我们下面会讲到
?
?大家等待了两秒后，突然从画面左上角出现一个方块，花费5秒从红色变到黄色。可能大家已经猜到了
?
<!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;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
