手把手教你制作CSS3 animate关键帧动画.docxVIP

动画在网页中已经有很广泛的应用了，因为动画可以让网页变得丰富多彩，吸引用户，成为网页中的亮点。 网页动画分为6种类型：Gif、flash(swf)、js、css3动画(transition animate)、svg和canvas。 帧（frame）动画的概念 海文老师觉得，学习css3 animate 动画之前，最好有帧（frame）动画的概念，学起来更快些。 我们可以借助fireworks认识一下帧面板,与css3样式的对应。 动画所需条件有三个： 图片（对象或者元素）； 帧面板； 上述两者关联(绑定) Css3关键帧动画 关键帧（keyframes）动画。可以像过渡动画transtion那样定义第一帧和最后一帧这两个关键帧，还可以定义任意多的关键帧，因而能实现更复杂的动画效果。 关键帧动画的定义方式也比较特殊，它使用了一个关键字 @keyframes 来定义动画。 格式为： 1 下面类似帧面板： 关键帧：百分比形式 @keyframes 动画名称{ ????? 时间点 {元素状态} ????? 时间点 {元素状态} ????? … } 例如： @keyframes mov1{ 0% {transform: translate(0，0); } … 100% {transform: translate(240px, 120px); } } 或者： @keyframes mov2{ from {transform: translate(0，0); } … ????to {transform: translate(240px, 120px); } } 2 帧面板与元素关联（绑定） 元素(#plane){ Animation:动画1 2s; } 3．Html中的元素： Html: div id=“plane”元素/div /*动画简写方式*/ 简写时最少只写两个属性就可以。一个动画名，一个是总时间。 /*name duration timing-function delay count direction mode*/ /*名称 运行总时间 运行方式 延迟 运行次数 方向性 动画结束状态*/ -webkit-animation:mymov 2s ease 0s infinite; /*-webkit-animation-name:mymov;//动画名称 -webkit-animation-duration:10s;//运行总时间 -webkit-animation-delay:0s;//时间延迟 -webkit-animation-iteration-count:infinite;//运行次数 -webkit-animation-timing-function:ease; -webkit-animation-direction:normal;//交替 -webkit-animation-play-state:running;*/此属性在简写方式中没有 -webkit- HYPERLINK /cssref/pr_animation-fill-mode.asp \o CSS3 animation-fill-mode 属性 animation-fill-mode forword backworks 确定动画结束后停留在开始还是结束。 /*动画名称绑定*/ /* Safari and Chrome: */ /*name duration timing-function delay count direction state -webkit-animation:one 5s linear 2s infinite normal running;*/ /*绑定的动画名称*/ -webkit-animation-name:one; /*运行总时间*/ -webkit-animation-duration:10s; /*动画延迟时间*/ -webkit-animation-delay:2s; /*动画运行的方式是否加速*/ -webkit-animation-timing-function:ease-in-out; /*重复次数*/ -webkit-animation-iteration-count:infinite; /*运行方向*/ -webkit-animation-direction:alternate; /*动画状态*/ -webkit-animation-play-state:running; /* 这里有几个比较关键的单词希望同学们花些心思记住。 alternate [英]?:l?t?:n?t [美]??:lt?r