-webkit-animation的使用

转载 2015年07月10日 17:39:30

-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-timing-function: step-start; 实现画面的直接跳转

详解css3中webkit-animation

问题?详解css3中webkit-animation 原理:这是一个不需要触发就可以执行的css3的类似伪类属性,与伪类属性不同的是,伪类需要鼠标悬浮才能执行,而该属性不需要任何触发条件即可执行 ...
  • Mr_li13
  • Mr_li13
  • 2016年02月25日 21:39
  • 746

以Webkit为核心的浏览器的CSS样式—–Animation

-webkit-animation:仍旧是一个复合属性, -webkit-animation: name duration timing-function delay iteration_cou...

【.NET】WebKit的安装与使用

最近在开发一个社区的管理系统,采用B/S结构,客户想在触屏机上使用这个系统,有一个需求是,触屏机每次一开机就自动打开界面,我的第一反应是写一个程序,这个程序里面内嵌一个浏览器控件,这样的话只要设置我这...

如何使用gdb调试android webkit内核代码

如何使用gdb调试android webkit内核代码 红心地瓜 得益于脚本的帮助,在Emulator中使用GDB调试Native Code的设置非常简单,比如我用gdb+gdbser...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:-webkit-animation的使用
举报原因:
原因补充:

(最多只允许输入30个字)