CSS3关键帧动画
本文转载自创美优品，转载就保留此信息。
我决定探索该地区的CSS3关键帧动画。
的想法很简单-创造一种虚拟明信片。
我住在巴黎，所以很明显我给你我的问候，从巴黎:)
下载源文件
（。
psd文件）
明信片从巴黎的。
zip 1.9MB
CSS3的动画支持：Chrome浏览器2 +，Safari 4的+，火狐5 +，iOS的Safari浏览器3.2和
Android 2.1系统+（源碎杂志）。
我们将3个要素：云中的动画（有三个层次的云），旋转法尔灯和艾菲尔铁塔闪闪发光。
的HTML结构其实很简单：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Greetings from
Paris</title> </head> <body> <div id="wrap"> <h1>Bonne Nuit
<em>PARIS !</em></h1> <div id="phare"></div> <div id="eiffel"></div> <div id="eiffel_wrap"> <div id="sparkling1"></div> <div
id="sparkling2"></div> </div> <div id="roofs"></div> <footer>by PeHaa, Paris 2011</footer> </div> </body> </html>
我们将使用下面的图片（我将讨论一点点波光粼粼的效果），让我们先来完成的CSS样式表：
动画云
独立动画的三个层次的云，我们使用的下列关键帧。
（注意，每次我使用
的-webkit-
和
-MOZ-
前缀）。
/* will be applied to #wrap that has 3 backgrounds layers */ @-webkit-keyframes wind { 0% {background-position: 0px 200px,0px 350px, left top;} 50%
{background-position: 500px 40px,600px 450px, left top;} 100% {background-position: 1000px 200px,1200px 350px, left top} } @-moz-keyframes wind { 0% {background-position: 0px 200px,0px 350px, left top;} 50% {background-position: 500px
40px,600px 450px, left top;} 100% {background-position: 1000px 200px,1200px 350px, left top} } /* will be applied to #roofs that has 2 backgrounds layers */
@-webkit-keyframes wind1 { 0% {background-position: 100px 250px, left bottom;} 50% {background-position: 650px 150px, left bottom;} 100% {background-position:
1300px 250px, left bottom} } @-moz-keyframes wind1 { 0%
{background-position: 100px 250px, left bottom;} 50% {background-position: 650px
150px, left bottom;} 100% {background-position: 1300px 250px, left bottom} }
这样我们已经确定了我们的动画的开始，中间和结束的
背景，地位
，财产。
接下来，我们添加：
#wrap {-webkit-animation: wind 80s linear infinite; -moz-animation: wind 80s
linear infinite;} #roofs {-webkit-animation: wind 80s linear infinite;
-moz-animation: wind 80s linear infinite; }
与适当的元素相关联的动画和定义的持续时间，定时功能和迭代次数，（我用的是速记符号）。
法尔光动画
这一次，我们将同时动画的
不透明度
和旋转的旋转起源于它的顶部中心点（在上面的图片）法尔光。
@-webkit-keyframes phare { 0% { -webkit-transform:rotate(0deg); opacity:0} 50% { -webkit-transform:rotate(180deg); opacity:1} 100%
{ -webkit-transform:rotate(360deg); opacity:0;} } #phare
{-webkit-transform-origin: center top; -webkit-animation: phare 15s linear infinite;}
（在这里，进一步，重复相同的与
-万盎司-
前缀）。
添加火花
我们将使用两种不同的图像与波光粼粼的效果，下面是造型：
#eiffel_wrap { position:absolute; width:240px; height:462px; right:10px; top: 180px; opacity:0;} #sparkling1 { position:absolute; background:
url('images/sparkling1.png') no-repeat; width:240px; height:462px; opacity:0;} #sparkling2 { position:absolute; background: url('images/sparkling2.png') no-repeat; width:240px; height:462px; opacity:0;}
我们将动画的
＃eiffel_wrap的
，
＃sparkling1
和
＃sparkling2的。
@-webkit-keyframes sparkling { 0% {opacity:0;} 50%{opacity:1;} 100%
{opacity:0;} }
我们的想法是使用闪耀的动画变成和在的
＃sparkling1
和
＃sparkling2的
元素内的0.4秒的周期，与所述第一输入/输出时，所述第二输出/输入。
为了实现这一目标，我们将推迟波光粼粼的动画0.2S
＃sparkling1。
> #sparkling1 {-webkit-animation: sparkling .4s .2s infinite;} #sparkling2
{-webkit-animation: sparkling .4s infinite;}
在巴黎这个美好的夜晚景象可能会出现几分钟，每个整点。
我们将使用
＃eiffel_wrap
元素和
eiffel_wrap
动画重新创建这个效果（而不是文采，虽然-我不会让你等待一个小时之久）。
#eiffel_wrap { -webkit-animation: eiffel_wrap 30s 1s infinite;} @-webkit-keyframes eiffel_wrap { 0% {opacity:1;-webkit-animation-timing-function: steps(1);} 40%{opacity:0;} 100% {opacity:0;} }
随着
WebKit的动画计时功能：步骤（1）
的过渡是瞬时的，没有淡出效果。
我们在这里，
我希望你找到这个教程非常有用，并得到了启发。
请分享书签如果你喜欢它。
与往常一样，我期待着您的意见和...看到你在巴黎！
更多教程请登陆创美优品首页。