-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>
 
 

css3——webkit-animation动画的更多相关文章

  1. 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  2. 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  3. CSS3 :animation 动画

    CSS3动画分为二部份: 1.定义动画行为: 使用@keyframes定义动画行为,有两种方式: 方式一:仅定义动画起始样式,与动画结束样式 @keyframes (动画行为名称) { from {b ...

  4. 监听css3的animation动画和transition事件

    webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...

  5. CSS3:animation动画

    animation只应用在页面上已存在的DOM元素上,学这个不得不学keyframes,我们把他叫做“关键帧”. keyframes的语法法则: @keyframes flash { from{ le ...

  6. css3的animation动画

    animation 设置对象的动画特效   有6个主要的值 animation-name   动画名称 animation-duration   动画持续时间 animation-timing-fun ...

  7. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  8. 【CSS3】transition过渡和animation动画

    转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...

  9. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  10. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

随机推荐

  1. T-SQL存储过程

    存储过程(procedure)就是一个函数,完成一段sql代码的封装,实现代码的重用.    优点:         1.比使用DotNet直接写Sql脚本执行少了一块解析编译的过程.效率更快一点点. ...

  2. 一个利用Dataflow实现的Actor

    最近进行并发数据处理,学习到了 Actor模型,其中最简单的实现方式是一位大牛利用Dataflow实现的. 大牛的方案:http://www.jayway.com/2013/11/15/an-acto ...

  3. zoj 1078

    非常简单的题,没什么好说的.唯一值得一提的就是在判断是否是回文的时候只需遍历一半的元素即可,稍微提高一点性能. #include<iostream> using namespace std ...

  4. baidu-fex 精彩文章

    7 天打造前端性能监控系统 http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/ 前端自动化测试探索 http: ...

  5. 使用C语言获取linux系统相关信息

    最近在写shell的时候,涉及到了获取环境变量参数和本地计算机相关信息,包括计算机设备名,用户名的信息,在这里简单总结一下.获取环境变量各项参数,可以直接使用getenv函数.man中关于getenv ...

  6. NET Core开发-读取配置文件Configuration

    ASP.NET Core开发-读取配置文件Configuration   ASP.NET Core 是如何读取配置文件,今天我们来学习. ASP.NET Core的配置系统已经和之前版本的ASP.NE ...

  7. Example: Develop Web application on Baidu App Engine using CherryPy

    In the past few months, I have developed two simple applications on Baidu App Engine. Compared to Go ...

  8. 给flash文件加超链接[兼容主流浏览器]

    <div style="position: relative;"> <a style="width: 640px; height: 90px; posi ...

  9. 为程序指定运行时所在的CPU核

    internal class Program { [DllImport("kernel32.dll")] private static extern uint GetTickCou ...

  10. MYSQL 简单的循环存储过程

    BEGIN ; ; DO DO ); ; ) THEN ; END IF; END WHILE; ; ; END WHILE; END