例:

-webkit-animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s linear 2s infinite alternate; @keyframes myfirst{
  from{background:red;}
  to{background:yellow;}
}
@-webkit-keyframes myfirst{
  frome{background:red;}
  to{background:yellow;}
}
//或者
@keyframes myfirst{
  0%{ }
  25%{ }
  50%{ }
  100%{ }
}

参数及含义:

animation-name: 动画的名字

animation-duration: 动画完成一个周期所花费的秒数,默认是0

animation-timing-function: 规定动画的速度曲线,默认是ease(动画以低速开始,然后加块,在结束前变慢);

              linear(动画从头到尾的速度是相同的)

              ease-in(动画以低速开始)

              ease-out(动画以低速结束)

              ease-in-out(动画以低速开始和结束)

animation-delay: 规定动画何时开始,默认是0;

animation-iteration-count: 规定动画被播放的次数,默认是1, infinite(无限循环)

animation-direction: 规定动画是否在下一周期逆向地播放,默认是normal(不逆向播放)

            reverse(动画反向播放)

            alternate(动画在奇数1,3,5、、、正向播放,在偶数2,4,5、、、反向播放) 

            alternate-reverse(动画在奇数次1,3,4、、、反向播放,在偶数次2,4,6、、、正向播放) 

css3动画:animation的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  5. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  9. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  10. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

随机推荐

  1. RT-Thread信号量使用(动态/静态信号量) 及 信号量的四种使用场合

    信号量(Semaphore),有时被称为信号灯,是在多线程环境下使用的一种设施,是可以用来保证两个或多个关键代码段不被并发调用.在进入一个关键代码段之前,线程必须获取一个信号量:一旦该关键代码段完成了 ...

  2. kkkk

    monkey -p com.alfl.www  -v -v -v  --throttle 50 --pct-touch 30 --pct-motion 15 --pct-nav 15 --pct-ma ...

  3. UDK更改启动画面及载入动画

    转自:http://www.unrealchina.org/forum.php?mod=viewthread&tid=246&extra=page%3D1 方法很简单: 1.更改启动画 ...

  4. java注解总结(1)

    1.什么是注解 注解,主要提供一种机制,这种机制允许程序员在编写代码的同时可以直接编写元数据. 2.介绍 何为注解?--->元数据:描述数据自身的数据. 注解就是代码的元数据,他们包含了代码自身 ...

  5. 搭建Node+NPM+Grunt+Ruby开发环境

    序 最近尝试了一下CoffeeScript,和Sass,不得不说这两个搭配起来的确是不错的选择,熟悉以后基本上开发就比较快速了. 当然要开发这个首先需要搭建环境,这里就需要有Node.NPM.Grun ...

  6. 你所不知道的html5与html中的那些事(五)——web图像

    文章简介:       现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢?     下面看看今天我为大家带来了哪些关于we ...

  7. QualType in clang

    http://clang.llvm.org/docs/InternalsManual.html#the-qualtype-class the QualType class is designed to ...

  8. 33.Docker安装Mysql及用户配置

    mysql在官方上有两个镜像 这个是一个优化过的mysql 使用这个命令 安装mysql 演示最简单的方式去安装mysql: 这种方式安装的用户名没有,密码没有 docker run -d -p 33 ...

  9. Eclipse与IntelliJ IDEA区别

    1.没有workspace,新增modules(Workspace-Project,Project-Module) 2.没有perspectives,自动根据上下文调用相关工具 3.没有保存按钮,自动 ...

  10. [小工具] C#多线程|匿名委托传参数|测试网站压力--升级版

    上次文章链接:http://www.sufeinet.com/thread-11-1-1.html写这些并不是不会用测试工具,也并不是无视测试工具,而是做为一个程序员希望用自己写的东西来完成一些功能, ...