CSS动画模块级3:创建动画
相关信息[*]CSS动画模块3级指南
[*]CSS动画模块3级为移动WEB API
[*]CSS动画模块三级网络API可穿戴
本教程演示了如何在您的应用程序创建动画。
热身
熟悉CSS动画模块3级API通过学习基本知识:
创建一个标志动画动画Tizen标志在屏幕上。
[*]显示所有
[*]隐藏所有
[*]创建一个标志动画隐藏
增强用户体验的应用程序,你必须学会创造一个标志动画,元素属性为每个元素和关键帧可以被指定和修改。 标志动画出现的类似于动画Tizen设备(或模拟器)时开启:
[*]没有元素最初是显示在屏幕上。
[*]Tizen标志逐渐出现在屏幕的中间,右移,它变得更小。
[*]每个字母的单词“TIZEN”连续在来自屏幕的左和右移至正确的位置。
图:标志动画(仅在移动应用程序中)
创建一个标志动画:
[*]创建HTML布局的动画。 能够单独管理每个动画部分的运动,你必须为每个部分定义单个元素。
<div class="animation-holder">
<span class="tizen-txt t"></span>
<span class="tizen-txt i"></span>
<span class="tizen-txt z"></span>
<span class="tizen-txt e"></span>
<span class="tizen-txt n"></span>
<span class="tizen-txt tm"></span>
<span class="tizen-logo"></span>
</div>2.定义动画的基本风格:
<div class="blockcode"><blockquote>.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto;
position: relative; border: 2px solid #fff; overflow: hidden;}
.animation-holder {width: 280px; height: 88px; position: absolute;
left: 50%; top: 50%; margin: -54px 0 0 -140px;}
.tizen-txt, .tizen-logo {position: absolute; display: block;
background-repeat: no-repeat; background-position: 50% 50%}
.tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}
.tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}
.tizen-txt.z {width: 46px; height: 56px; background-image: url(images/txt_z.png);}
.tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}
.tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}
.tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}
.tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px;
background-image: url(images/logo_tizen.png); background-size: 100% 100%;}
3.创建动画:
[*]确保所有的动画元素在相同的时间内,一些常见的属性定义的动画。 动画的运动时间是7秒,动画重复无限。
当一个动画,重复被激活时,它可以看起来不自然,当它突然返回到其原始位置后完成一次迭代。 重复移动自然,设置animation-direction 财产 alternate。 交替方向意味着在动画奇怪的迭代所得的法线方向(关键帧从关键帧的0%到0%),而在关键帧甚至迭代是在相反的方向从100%降至0%。
.tizen-txt, .tizen-logo
{
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}2.创建关键帧来实现流Tizen标识:
[*]在第一次动画总数的25%的上场时间(7秒),透明度消失和Tizen标志出现。
[*]在25 - 50%的上场时间,标志的尺寸变小了,小如的宽度和高度值降低,由于左和最高价值,标志是将屏幕的右上角。
[*]在50 - 100%的上场时间,不改变的值,标志仍在其新位置。
@-webkit-keyframes tizen-logo
{
0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
}<font size="4" color="#ff0000"><b>注意: 如果没有定义,100%的关键帧动画执行基于最初的属性,和标志的大小增加到原来的大小。</b></font>3.创建关键帧来实现流程的每个字母词“TIZEN”:
[*]隐藏这封信最初,财产已被分配在屏幕外0%的关键帧。 首先允许Tizen标志出现,第一个字母介绍在30%的关键帧。
[*]创建一个轻微的碰撞动画,这封信元素移动到-10 px的最终价值40%的关键帧到达其最终0 px值在45%的关键帧。
[*]的 animation-timing-function 为每个关键帧点属性可以改变,用于确定动画的速度。 当信实际上是显示在屏幕上,搬到其最终位置,方便进出使用定时功能。
显示字母一次,时间为每个连续推迟一点信:
<!--Letter T-->
@-webkit-keyframes tizen-txt-t
{
0% {left: 340px; top: 31px;}
30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
45% {left: 0; top: 31px;}
100% {left: 0; top: 31px;}
}
<!--Letter I-->
@-webkit-keyframes tizen-txt-i
{
0% {left: 340px; top: 31px;}
40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
55% {left: 57px; top: 31px;}
100% {left: 57px; top: 31px;}
}
<!--Remaining letters-->4.创建的所有关键帧后,定义 animation-name 为每个元素属性:
.tizen-txt.t
{
-webkit-animation-name: tizen-txt-t;
}
.tizen-txt.i
{
-webkit-animation-name: tizen-txt-i;
}源代码这个用例相关的完整源代码,看到下面的文件:
[*]animation_practical.html
[*]logo_tizen.png
[*]txt_e.png
[*]txt_i.png
[*]txt_n.png
[*]txt_t.png
[*]txt_tm.png
[*]txt_z.png
页:
[1]