1. animation 动画

animation-duration

代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7. .animation_duration{
  8. left:10px;
  9. top:100px;
  10. position:absolute;
  11. -webkit-animation:.5s ease forwards;
  12. -webkit-animation-duration:2s;
  13. -webkit-animation-name:demo;
  14. -moz-animation:.5s ease forwards;
  15. -moz-animation-name:demo;
  16. -moz-animation-duration:2s;
  17. }
  18. @-webkit-keyframes demo{
  19. %{left:10px;}
  20. %{left:400px;}
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="demo_box animation_duration">我一共运行了2秒钟</div>
  26. </body>
  27. </html>

效果:

animation-name

代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7. .animation_name{
  8. left:;
  9. top:100px;
  10. position:absolute;
  11. -webkit-animation:.5s .5s ease infinite alternate;
  12. -webkit-animation-name:demo;
  13. -moz-animation:.5s .5s ease infinite alternate;
  14. -moz-animation-name:demo;
  15. }
  16. @-webkit-keyframes demo{
  17. %{left:;}
  18. %{left:400px;}
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="demo_box animation_name">看我没事来回跑</div>
  24. </body>
  25. </html>

效果:

animation-timing-function

语法animation-timing-function: linear | ease | ease-in |

  1. ease-out | ease-in-out | step-start | step-end |
    steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
    [, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*; 指定对象动画的持续时间

ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。

linear:线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。

ease-in:渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数。

ease-out:渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数。

ease-in-out:渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数。

step-start:马上转跳到动画结束状态。

step-end:保持动画开始状态,直到动画执行时间结束,马上转跳到动画结束状态。

steps(<number>[, [ start | end ] ]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性展示,第二个参数默认为end,设置最后一步的状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,而以animation-fill-mode的设置为动画结束的状态。

cubic-bezier(<number>, <number>, <number>, <number>):特殊的立方贝塞尔曲线效果。

代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7.  
  8. .demo_box{
  9. -webkit-animation:f1 3s .5s forwards;
  10. -moz-animation:f1 3s .5s forwards;
  11. position:relative;
  12. left:10px;
  13. width:50px;
  14. height:50px;
  15.  
  16. margin:10px ;
  17.  
  18. }
  19. .ease{
  20. -webkit-animation-timing-function:ease;
  21. -moz-animation-timing-function:ease;
  22. }
  23. .linear{
  24. -webkit-animation-timing-function:linear;
  25. -moz-animation-timing-function:linear;
  26. }
  27. .ease-in{
  28. -webkit-animation-timing-function:ease-in;
  29. -moz-animation-timing-function:ease-in;
  30. }
  31. .ease-out{
  32. -webkit-animation-timing-function:ease-out;
  33. -moz-animation-timing-function:ease-out;
  34. }
  35. .ease-in-out{
  36. -webkit-animation-timing-function:ease-in-out;
  37. -moz-animation-timing-function:ease-in-out;
  38. }
  39. .step-start{
  40. -webkit-animation-timing-function:step-start;
  41. -moz-animation-timing-function:step-start
  42. }
  43. .step-end{
  44. -webkit-animation-timing-function:step-end;
  45. -moz-animation-timing-function:step-end;
  46. }
  47. .steps{
  48. -webkit-animation-timing-function:steps();
  49. -moz-animation-timing-function:steps()
  50. }
  51. .cubic-bezier{
  52. -webkit-animation-timing-function:cubic-bezier(0.52,,0.58,1.0);
  53. -moz-animation-timing-function:cubic-bezier(0.52,,0.58,1.0);
  54. }
  55. @-webkit-keyframes f1{
  56. %{left:10px;}
  57. %{left:500px;}
  58. }
  59. @-moz-keyframes f1{
  60. %{left:10px;}
  61. %{left:500px;background:#f00}
  62. }
  63.  
  64. </style>
  65. </head>
  66. <body>
  67. <div class="demo_box ease">ease</div>
  68. <div class="demo_box linear">linear</div>
  69. <div class="demo_box ease-in">ease-in</div>
  70. <div class="demo_box ease-out">ease-out</div>
  71. <div class="demo_box ease-in-out">ease-in-out</div>
  72. <div class="demo_box step-start">step-start</div>
  73. <div class="demo_box step-end">step-end</div>
  74. <div class="demo_box steps">steps()</div>
  75. <div class="demo_box cubic-bezier">cubic-bezier(0.52,,0.58,1.0)</div>
  76. </body>
  77. </html>

效果:

animation-delay

语法

animation-delay: <time>; 指定对象动画延迟执行的时间 。

0:不延迟,立即执行。

正数:按照设置的时间延迟。

负数:设置时间前的动画将被截断

代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7.  
  8. .demo_box{
  9. -webkit-animation:f1 3s forwards;
  10. -moz-animation:f1 3s forwards;
  11. position:relative;
  12. left:10px;
  13. width:50px;
  14. height:50px;
  15.  
  16. margin:10px ;
  17.  
  18. }
  19. .no_delay {
  20. -webkit-animation-delay: 0s;
  21. -moz-animation-delay: 0s;
  22. }
  23. .delay_2s{
  24. -webkit-animation-delay: 2s;
  25. -moz-animation-delay: 2s;
  26. }
  27. .delay_-1s{
  28. -webkit-animation-delay:-1s;
  29. -moz-animation-delay:-1s;
  30. }
  31. @-webkit-keyframes f1{
  32. %{left:10px;}
  33. %{left:500px;}
  34. }
  35. @-moz-keyframes f1{
  36. %{left:10px;}
  37. %{left:500px;background:#f00}
  38. }
  39.  
  40. </style>
  41. </head>
  42. <body>
  43. <div class="demo_box no_delay">动画立即执行</div>
  44. <div class="demo_box delay_2s">动画延迟2秒执行</div>
  45. <div class="demo_box delay_-1s">动画前一秒被截断</div>
  46.  
  47. </body>
  48. </html>

效果:

animation-direction

语法

  1. animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定对象动画运动的方向。

  

normal:正常方向。

reverse:动画反向运行,方向始终与normal相反。(FF14.0.1以下不支持)

alternate:动画会循环正反方向交替运动,奇数次(1、3、5……)会正常运动,偶数次(2、4、6……)会反向运动,即所有相关联的值都会反向。

alternate-reverse:动画从反向开始,再正反方向交替运动,运动方向始终与alternate定义的相反。(FF14.0.1以下不支持)

语法

  1. animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定对象动画运动的方向。

normal:正常方向。

reverse:动画反向运行,方向始终与normal相反。(FF14.0.1以下不支持)

alternate:动画会循环正反方向交替运动,奇数次(1、3、5……)会正常运动,偶数次(2、4、6……)会反向运动,即所有相关联的值都会反向。

alternate-reverse:动画从反向开始,再正反方向交替运动,运动方向始终与alternate定义的相反。(FF14.0.1以下不支持)

代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7.  
  8. .demo_box{
  9. -webkit-animation:f1 2s .5s forwards linear;
  10. -moz-animation:f1 2s .5s forwards linear;
  11. position:relative;
  12. left:10px;
  13. width:100px;
  14. height:100px;
  15. margin:10px ;
  16. overflow:hidden;
  17. }
  18. .normal{
  19. -webkit-animation-direction:normal;
  20. -moz-animation-direction:normal;
  21. }
  22. .reverse{
  23. -webkit-animation-direction:reverse;
  24. -moz-animation-direction:reverse;
  25. }
  26. .alternate{
  27. -webkit-animation-direction:alternate;
  28. -moz-animation-direction:alternate;
  29. }
  30. .alternate-reverse{
  31. -webkit-animation-direction:alternate-reverse;
  32. -moz-animation-direction:alternate-reverse;
  33. }
  34. @-webkit-keyframes f1{
  35. %{left:10px;}
  36. %{left:500px;}
  37. }
  38. @-moz-keyframes f1{
  39. %{left:10px;}
  40. %{left:500px;}
  41. }
  42.  
  43. </style>
  44. </head>
  45. <body>
  46. <div class="demo_box normal">normal</div>
  47. <div class="demo_box reverse">reverse</div>
  48. <div class="demo_box alternate">alternate</div>
  49. <div class="demo_box alternate-reverse">alternate-reverse</div>
  50. </body>
  51. </html>

效果:

animation-iteration-count

代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7.  
  8. .demo_box{
  9. -webkit-animation:f1 3s .5s forwards linear;
  10. -moz-animation:f1 3s .5s forwards linear;
  11. position:relative;
  12. left:10px;
  13. width:50px;
  14. height:50px;
  15.  
  16. margin:10px ;
  17.  
  18. }
  19. .one {
  20. -moz-animation-iteration-count: ;
  21. -webkit-animation-iteration-count: ;
  22. }
  23. .infinite{
  24. -moz-animation-iteration-count: infinite;
  25. -webkit-animation-iteration-count: infinite;
  26. }
  27. .some {
  28. -moz-animation-iteration-count: ,;
  29. -webkit-animation-iteration-count:,;
  30. }
  31.  
  32. @-webkit-keyframes f1{
  33. %{left:10px;}
  34. %{left:500px;}
  35. }
  36. @-moz-keyframes f1{
  37. %{left:10px;}
  38. %{left:500px;}
  39. }
  40.  
  41. </style>
  42. </head>
  43. <body>
  44. <div class="demo_box one">动画执行1次</div>
  45. <div class="demo_box infinite">动画执行无数次</div>
  46. <div class="demo_box some">这个不知道</div>
  47.  
  48. </body>
  49. </html>

效果:

animation-fill-mode

语法

  1. animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态。

none:默认值。不设置对象动画之外的状态

forwards:结束后保持动画结束时的状态,但当animation-direction为0,则动画不执行,持续保持动画开始时的状态

backwards:结束后返回动画开始时的状态

both:结束后可遵循forwards和backwards两个规则。

代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7.  
  8. .demo_box{
  9. -webkit-animation:f1 2s .5s forwards linear;
  10. -moz-animation:f1 2s .5s forwards linear;
  11. position:relative;
  12. left:10px;
  13. width:100px;
  14. height:100px;
  15. margin:10px ;
  16. overflow:hidden;
  17. }
  18. .forwards{
  19. -webkit-animation-fill-mode:forwards;
  20. -moz-animation-fill-mode:forwards;
  21. }
  22. .backwards{
  23. -webkit-animation-fill-mode:backwards;
  24. -moz-animation-fill-mode:backwards;
  25. }
  26. @-webkit-keyframes f1{
  27. %{left:10px;}
  28. %{left:500px;}
  29. }
  30. @-moz-keyframes f1{
  31. %{left:10px;}
  32. %{left:500px;}
  33. }
  34.  
  35. </style>
  36. </head>
  37. <body>
  38. <div class="demo_box forwards">我留在终点</div>
  39. <div class="demo_box backwards">我只回到原点</div>
  40. </body>
  41. </html>

效果: 

animation-play-state2017-08-22

语法

animation-play-state: running | paused 检索或设置对象动画的状态。
代码实例:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7.  
  8. .demo_box{
  9. -webkit-animation:f1 2s .5s linear forwards alternate;
  10. -moz-animation:f1 2s .5s linear forwards alternate;
  11. position:relative;
  12. left:10px;
  13. width:100px;
  14. height:100px;
  15. margin:10px ;
  16. overflow:hidden;
  17. }
  18. .play-state:hover{
  19. -webkit-animation-play-state:paused;
  20. -moz-animation-play-state:paused;
  21. }
  22. @-webkit-keyframes f1{
  23. %{left:10px;}
  24. %{left:500px;}
  25. }
  26. @-moz-keyframes f1{
  27. %{left:10px;}
  28. %{left:500px;}
  29. }
  30.  
  31. </style>
  32. </head>
  33. <body>
  34. <div class="demo_box play-state">鼠标移过来我就停,移走就运动,好听话哦!</div>
  35. </body>
  36. </html>
 
 
 

效果:

 

转载:http://isux.tencent.com/css3

16:47:48   16:47:53

css3 动画实例的更多相关文章

  1. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  2. css3动画实例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  4. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  5. CSS3 动画

      通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...

  6. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  7. 美妙的 CSS3 动画!一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  8. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  9. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

随机推荐

  1. IntelliJ IDEA 开发工具的一些设置

    IntelliJ IDEA 开发工具的一些设置 参考资料 IntelliJ IDEA 的学习,离不开网络上技术热爱者们的分享,在此向他们表示感谢. 成吨提高开发效率:https://github.co ...

  2. 在Ubuntu18.04下安装Java 11

    一直以来,本人都使用第三方软件包"ppa:linuxuprising/java"安装Java JDK,最近一次安装时发现无法成功.这是由于现在无法直接从Oracle官网下载Java ...

  3. functional-page-navigator 组件

    functional-page-navigator 组件:是一个非常强大的组件,用于跳转插件的功能页 functional-page-navigator组件的属性: version:类型 字符串 跳转 ...

  4. 三十二、python操作XML文件

    '''XML:模块 xml总结 1.解析 str 文件 tree,ElementTree,type root,Element,type2.操作 Element: tag,text,find,iter, ...

  5. AssertionError: View function mapping is overwriting an existing endpoint function: insertCase

    首先,理解这个错误是什么意思,以及出现的原因: 使用Flask定义URL的时候,如果出现"AssertionError: View function mapping is overwriti ...

  6. java日期处理的一些例子使用...

    一.计算成为会员多少天 需求:根据会员的创建日期createTime,计算成为会员多少天. 计算:当前日期 - 创建日期,转化为天数,即为成为会员多少天. 代码: public static void ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_3_字符串的常量池

    字符换是可以共享使用的,那么怎么去共享使用呢 三种方式去创建字符串.然后三种分别进行比较 3的地址和1.2的地址不一样 在堆里面有一块空间叫做字符串常量池,从jdk1.7开始.字符串常量池在堆中 字符 ...

  8. stack() unstack()函数

    总结: 1.stack:  将数据的列索引转换为行索引 2.unstack:将数据的行索引转换为列索引 3.stack和unstack默认操作为最内层,可以用level参数指定操作层. 4.stack ...

  9. 【CTS】几个serialno失败项

    [问题结论] [Common]SN配置项的问题,只可以'数字与大小写字母' 将配置SN改为字母数字组合,测试全部pass [问题描述] CTS三条失败项 run cts -m CtsTelephony ...

  10. vue登录注册实践

    步骤一 1.安装脚手架:npm install vue-cli -g2.wepack生成html模版:vue init webpack ' 文件名'3.安装axios.js-cookie.elemen ...