首页 > Web开发 > 详细

复制"尹琼洁"的博客 webkit-animation css3 动画

时间:2014-07-23 14:51:26      阅读:417      评论:0      收藏:0      [点我收藏+]
-webkit-animation:仍旧是一个复合属性,
 
-webkit-animation: name duration timing-function delay iteration_count direction;
 
包括以下几个属性
 
(1)  -webkit-animation-name    这个属性的使用必须结合@-webkit-keyframes一起使用
 
eg:  @-webkit-keyframes fontchange{
 
0%{font-size:10px;}
 
30%{font-size:15px;}
 
100%{font-siez:12px;}
 
}
 
百分比的意思就是duration的百分比,如果没有设置duration的话,则表示为无穷大
 
div{ -webkit-animation-name:fontchange;}
 
(2)-webkit-animation-duration   表示动画持续的时间
 
(3)-webkit-animation-timing-function  表示动画使用的时间曲线
 
【语法】: -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out
 
(4)-webkit-animation-delay    表示开始动画之前的延时
 
【语法】 -webkit-animation-delay: delay_time;
 
(5)-webkit-animation-iteration-count  表示动画要重复几次
 
【语法】-webkit-animation-iteration-count: times_number;
 
(6) -webkit-animation-direction   表示动画的方向
 
【语法】-webkit-animation-direction: normal(默认)  | alternate
 
normal  方向始终向前
 
alternate 当重复次数为偶数时方向向前,奇数时方向相反
 
【另外】跟animation有关的其他属性
 
(1)-webkit-animation-fill-mode : none (默认)| backwards | forwards | both  设置动画开始之前和结束之后的行为(测试结
 
果不是很清晰)
 
(2)-webkit-animation-play-state: running(默认) | paused  设置动画的运行状态
 
综合案例:
 
@-webkit-keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}
 
#box {
-webkit-animation-name:  fontbulger;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:3;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s;
}
 
<div id=”box”>文字变化</div>

复制"尹琼洁"的博客 webkit-animation css3 动画,布布扣,bubuko.com

复制"尹琼洁"的博客 webkit-animation css3 动画

原文:http://www.cnblogs.com/z1308250571/p/3862645.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!