animation基本用法是:

animation: name keeping-time animate-function delay times iteration final;

第一个参数:name (animation-name):

动画的名字,即设定动画过程的名字,CSS3采用“关键帧 keyframes”来定义动画,方式形如:

@-webkit-keyframes name{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

前缀-webkit-表示webkit内核浏览器(Chrome、Safari和变心的opera),以上代码定义了一个动画,名叫name,效果是使透明度从0变化到1,0%~100%为整个过程,当然也可以定义多段如:0%~20~50%~100%。

第二个参数:keeping-time (animation-duration):

整个动画的持续时间,必须带上时间单位,s或者ms均可;

第三个参数:animate-function (animation-timing-function):

运动方式(动画方式)的贝赛尔曲线,可取值为:ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。

第四个参数:delay (animation-delay):

动画延迟执行的时间,单位也是s或者ms,值得注意的是,即使延迟时间为0,也必须加上时间单位,如果写成直接写成0,在Chrome和Safari(webkit)下是没问题的,但是在FF(gecko)下无效。

第五个参数:times (animation-iteration-count):

动画循环执行的次数,无单位,infinite为无限循环。

第六个参数:iteration (animation-direction):

如果动画循环,循环的方式是:alternate(偶数次向前播放,奇数次向后播放)、normal(每次都向前播放)。

第七个参数:final (animation-fill-mode):

动画的最后(达到100%)时的状态,取值有:backward(回到初始状态)、forwards(停在最终状态)、none、both。

  

 

 属性值

效果

none

默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处

forwards

表示动画在结束后继续应用最后的关键帧的位置

backwards

会在向元素应用动画样式时迅速应用动画的初始帧

both

元素动画同时具有forwards和backwards效果

每个参数也可以单独写,最后用的时候记得加浏览器前缀:

.classname{
-webkit-animation:name 6s linear 0ms infinite normal forwards;
-moz-animation:name 6s linear 0ms infinite normal forwards;
-o-animation:name 6s linear 0ms infinite normal forwards;
animation:name 6s linear 0ms infinite normal forwards;
}

css3动画(@keyframes和animation的用法)的更多相关文章

  1. Css3动画-@keyframes与animation

    一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...

  2. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  3. css3动画讲解,关于css3的@keyframes和animation

    通过css3我们可以创建动画,它能取代gif图片.Flash.Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的. @keyframes 规则 @Keyfr ...

  4. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  5. CSS3 动画 @keyframes

    通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 以及 JavaScript. 如下动画,常用于手机端,提示用户往下拖动的渐隐渐出效果. Demo 关键CSS代码 1. 给 ...

  6. CSS3动画属性之Animation

    首先定义一个动画规则: @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox ...

  7. CSS3动画效果之animation

    先解决上一篇的遗留问题. div { width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s; ...

  8. Less 创建css3动画@keyframes函数

    封装: /** * animation */ .keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @ ...

  9. CSS3动画@keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

随机推荐

  1. 原生js事件委托

    var commontop = document.getElementById("commontop");commontop.onclick = function(ev){   v ...

  2. mongodb 3 常用命令操作

    操作命令详见,这个归类很好,有些教程乱麻麻的 http://www.tuicool.com/articles/j2ueau db.createUser({user:"zhihuiroot&q ...

  3. Apache Tomcat 7 安装与配置

    下载 首先需要下载tomcat7的安装文件,地址如下: http://mirror.bit.edu.cn/apache/tomcat/tomcat-7/v7.0.69/bin/apache-tomca ...

  4. JavaScript中常见的数组操作函数及用法

    JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...

  5. javascript冒泡排序一些新实现

    一.冒泡排序 说起冒泡排序,可能每个人都不会陌生,实现思路相当简单明了,就是不停的对数组进行两两比较,将较大(较小)的一项放在前面: 如 var arr = [7, 3, 10, 1, 8, 4, 2 ...

  6. HDU 2222 关键词查找

    题目大意:给出一篇文章,长度最多1000000,若干个关键词,关键词有可能重复.关键词不超过10000,每个关键词不超过50个字符.请问该文章包含多少个关键词. 这是AC自动机的入门题.首先将关键词分 ...

  7. Query意图分析:记一次完整的机器学习过程(scikit learn library学习笔记)

    所谓学习问题,是指观察由n个样本组成的集合,并根据这些数据来预测未知数据的性质. 学习任务(一个二分类问题): 区分一个普通的互联网检索Query是否具有某个垂直领域的意图.假设现在有一个O2O领域的 ...

  8. [转载]深入了解 Struts 1.1

    转载自:http://www.ibm.com/developerworks/cn/java/l-struts1-1/ 摘要:作为基于 MVC 模式的 Web 应用最经典框架,Struts 已经正式推出 ...

  9. Python的第一天

    一.Python的简介 Python诞生于作者是Guido van Rossum,Python来自Guido所挚爱的电视剧Monty Python's Flying Circus (BBC1960-1 ...

  10. OAF_开发系列20_实现OAF打印功能

    ddddd 添加一个页面级的button区域:pagebuttonBar,在之下添加button item ,这里主要设置的参数有:采用默认的oaf的打印按钮的id名称: IcxPrintablePa ...