1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. /*
  6. @-webkit-keyframes anim1 { // 规定动画。
  7. 0% {
  8. Opacity: 0;
  9. font-size: 12px;
  10. }
  11. 100% {
  12. Opacity: 1;
  13. font-size: 34px;
  14. }
  15. }
  16. .anim1Div {
  17. -webkit-animation-name: anim1 ; 规定 @keyframes 动画的名称
  18. -webkit-animation-duration: 1.5s; 规定动画完成一个周期所花费的秒或毫秒。默认是 0
  19. -webkit-animation-iteration-count: 400; 规定动画被播放的次数。默认是 1。
  20. -webkit-animation-direction: alternate; 规定动画是否在下一周期逆向地播放。默认是 "normal"。
  21. -webkit-animation-timing-function: ease-in-out; 规定动画的速度曲线。默认是 "ease"。
  22. } */
  23.  
  24. div
  25. {
  26. width:100px;
  27. height:100px;
  28. background:red;
  29. position:relative;
  30.  
  31. animation:myfirst 5s linear 2s infinite alternate;
  32. /* Firefox: */
  33. -moz-animation:myfirst 5s linear 2s infinite alternate;
  34. /* Safari and Chrome: */
  35. -webkit-animation:myfirst 5s linear 2s infinite alternate;
  36. /* Opera: */
  37. -o-animation:myfirst 5s linear 2s infinite alternate;
  38. }
  39.  
  40. @keyframes myfirst /* 需要用@keyframes来申明动画的名称*/
  41. {/*从0%一直到100%的渐变过程*/
  42. % {background:red; left:0px; top:0px;}
  43. % {background:yellow; left:200px; top:0px;}
  44. % {background:blue; left:200px; top:200px;}
  45. % {background:green; left:0px; top:200px;}
  46. % {background:red; left:0px; top:0px;}
  47. }
  48.  
  49. @-moz-keyframes myfirst /* Firefox */
  50. {
  51. % {background:red; left:0px; top:0px;}
  52. % {background:yellow; left:200px; top:0px;}
  53. % {background:blue; left:200px; top:200px;}
  54. % {background:green; left:0px; top:200px;}
  55. % {background:red; left:0px; top:0px;}
  56. }
  57.  
  58. @-webkit-keyframes myfirst /* Safari and Chrome */
  59. {
  60. % {background:red; left:0px; top:0px;}
  61. % {background:yellow; left:200px; top:0px;}
  62. % {background:blue; left:200px; top:200px;}
  63. % {background:green; left:0px; top:200px;}
  64. % {background:red; left:0px; top:0px;}
  65. }
  66.  
  67. @-o-keyframes myfirst /* Opera */
  68. {
  69. % {background:red; left:0px; top:0px;}
  70. % {background:yellow; left:200px; top:0px;}
  71. % {background:blue; left:200px; top:200px;}
  72. % {background:green; left:0px; top:200px;}
  73. % {background:red; left:0px; top:0px;}
  74. }
  75. </style>
  76. </head>
  77. <body>
  78.  
  79. <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
  80.  
  81. <div></div>
  82.  
  83. </body>
  84. </html>

css3中动画animation的应用的更多相关文章

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  3. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  4. CSS3(4)---动画(animation)

    CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...

  5. 怎样使CSS3中的animation动画当每滑到一屏时每次都运行

    这个得结合js来做的.比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class <div id="a1&qu ...

  6. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  7. CSS3中的animation动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 如何使CSS3中的animation动画当每滑到一屏时每次都运行

    这个我还没用过,但感觉以后会用到,就随手摘抄一下啦<div id="a1"></div> <div id="a2">< ...

  9. css3中的animation

    不使用js或jquery,用css3实现一张图片的滑动.我用的是animation来设置所要应用的动画效果,首先在html中写好一个<div></div>,并放置一张图片在di ...

随机推荐

  1. 自定义不等高的cell-(纯代码)frame

    给模型增加frame数据 所有子控件的frame cell的高度 @interface XMGStatus : NSObject /**** 文字\图片数据 ****/ // ..... /**** ...

  2. eclipse最有用快捷键整理（转）

    eclipse最有用快捷键整理 可以通过菜单栏中Window–>Preferences–>General–>Keys来修改快捷键绑定. 编辑 Ctrl+1 快速修复(最经典的快捷键, ...

  3. 无废话MVC入门教程二[第一个小Demo]

    mvc技术交流,欢迎加群: 本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 ...

  4. Android 原生listview item伸展收缩效果 （续）

    接上一个原生的listview item的伸展收缩效果. 上一个可能做的有些粗糙,效果也没有这个好,上代码. package com.example.listviewdemo; import java ...

  5. sublime前端编辑器入门与个人使用经验分享

    Sublime Text(以下简称sublime)是一款很好用的代码编辑器,小巧且很灵敏,几乎可以编写大部分主流的计算机语言代码,更是堪称前端代码编辑神器. 你百度一下会发现许多sublime的安装和 ...

  6. 在win8.1下安装laravel5.1时碰到的坑不少，但总算搞掂，真有点不容易。

    安装好php后,安装laravel的方法有如下几种. 1.先安装好composer, 再用composer下载资源并安装,命令如下: composer create-project laravel/l ...

  7. sudo apt-get update

    要用apt-get这种方式安装LAMP时,最好先运行下面在命令升级自己的系统这样是为了更新源,而如果你找的源不好,可能安装LMAP失败.#sudo apt-get update 获得最近的软件包的列表 ...

  8. License制作

    最近,部门的产品要做license,于是上网查了一些通用软件的License做法,拿过来学习一下. 一个老外写的,很好,几乎完全涵盖了软件License的制作流程 http://afewguyscod ...

  9. CSS预处理器实践之Sass、Less比较

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  10. 表格无边框,有内框,在table嵌套时，防止出现重复边线

    <html> <head> <title>test 表格无边框,有内框! ^^ CSDN 学习积累</title> <style type=&qu ...