-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. javascript 的对象

    所有事物都是对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 布尔型可以是一个对象. 数字型可以是一个对象. 字符 ...

  2. Http权威指南笔记(一) URI URL URN 关系

    定义 URI:统一资源标识符(Uniform Resource Indentifier)用来标识服务器上的资源. URL:统一资源定位符(Uniform Resouce Locator)是资源标识符最 ...

  3. struts2.3.15.3中动态方法调用默认是关闭的

    初学ssh,用的struts2.3.15.3,使用了如下表单: <form action="/spring3/index/login.action" method=" ...

  4. hdu1358Period

    Problem Description For each prefix of a given string S with N characters (each character has an ASC ...

  5. 如何获取浏览器URL中查询字符串的参数

    首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...

  6. HDU 1232(畅通工程)题解

    以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定一具有N个节点的图和其边集,求其集合数量. [题目分析] 并查集经典题...其实就是创建好并查集就行了.. [算法流程] 于 ...

  7. java Timer 使用小结

    Java自带的java.util.Timer类,通过调度一个java.util.TimerTask任务.这种方式可以让程序按照某一个频度执行,但不能指定时间运行.用的较少. 任务的调用通过起的子线程进 ...

  8. PYthon成长之路第一篇(1)__字符串初识

    今天一起走进python的代码世界,一起领悟python的魅力 在很多学习python的书中都会以 print  “Hello,world!” 这样的而一个程序为开始,那么其中的 hello,worl ...

  9. [Node.js]expressjs简单测试连接mysql

    下载好node.js和通过npm安装好express.js后,先写package.json { "name": "application-name", &quo ...

  10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"的作用

    为页面添加正确的DOCTYPE 很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用.DOCTYPE是document type的简写.主要用来说明你用的XHTML或者HTML是什么 ...