1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>CSS3动画功能Animations</title>
  6.     </head>
  7.     <style>
  8.  
  9.         #animations{
  10.             width:200px ;
  11.             height:200px ;
  12.             background-color: #3598DC;
  13.         }
  14.         @-webkit-keyframes mycolor{
  15.             0%{
  16.                 background-color: #dc3646;  /*加载百分之0%，变色，加宽，旋转20度*/
  17.                 width:230px ;
  18.                 -webkit-transform:rotate(20deg);
  19.             }
  20.             20%{
  21.                 background-color: #70dc27;  /*加载百分之20%，变色，加宽，旋转60度*/
  22.                 width:250px ;
  23.                 -webkit-transform:rotate(60deg);
  24.  
  25.             }
  26.             50%{
  27.                 background-color: #a628dc;     /*加载百分之50%，变色，加宽，旋转20度，移动30px，30px，*/
  28.                 width:260px ;
  29.                 -webkit-transform:rotate(20deg);
  30.                 -webkit-transform:translate(30PX,30PX);
  31.             }
  32.             80%{
  33.                  background-color: #dcc419;
  34.                 width:280px ;
  35.                 -webkit-transform:rotate(0deg);
  36.                 -webkit-transform:translate(50PX,50PX);
  37.             }
  38.             100%{
  39.                 background-color: #dc3646;
  40.                 width:300px ;
  41.                 -webkit-transform:rotate(180deg);
  42.             }
  43.         }
  44.         #animations:hover{
  45.             -webkit-animation-name: mycolor;    /*关键帧名字*/
  46.             -webkit-animation-duration: 5s;      /*变换延续时间*/
  47.             -webkit-animation-timing-function: linear;  /*变换的速率变化*/
  48.             -webkit-animation-iteration-count: 2;
  49.         }
  50.  
  51.     </style>
  52.     <body>
  53.     <div id="animations"></div>
  54.  
  55.         <!--<div id="rotat">rotate旋转</div>-->
  56.         <!--<div id="scale">scale缩放</div>-->
  57.         <!--<div id="skew">skew 倾斜</div>-->
  58.         <!--<div id="translate">translate移动</div>-->
  59.         <!--<p>旋转，倾斜 缩放 移动 transform</p>-->
  60.     </body>
  61.  
  62. </html>

CSS3动画功能Animations

 

CSS3动画变形Animations的更多相关文章

  1. css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

    transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值. 主要包括四个属性: 执行变换的属性:transition-property 变换延续的时间: ...

  2. CSS3动画变形transition

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

  3. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

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

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

  5. css3动画由浅入深总结

    阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...

  6. CSS3 动画基础

    该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html   译文:你需要知道的CSS3 动画技术 原文:Wha ...

  7. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

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

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

  9. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

随机推荐

  1. php解决下单、抽奖并发导致的库存负数的问题

    我们知道数据库处理sql是一条条处理的,假设购买商品的流程是这样的: sql1:查询商品库存 if(库存数量 > 0) {     //生成订单...     sql2:库存-1 } 当没有并发 ...

  2. nau8822 codec driver 录音时mic bias 无法自动打开问题

    nau8822 codec driver 录音时mic bias 无法自动打开问题 问题描述: kernel版本:3.10 在nuc970上测试nau8822驱动时发现,虽然驱动中有如下定义: SND ...

  3. 一. 什么是ANR?为什么会有ANR发生?

    对于Android平台的工程师来说,ANR应该是每个人都会遇到的问题,因为导致它的原因有很多,例如在主线程进行耗时操作,调用大量cpu资源进行复杂的预算等,并且可能在大多数情况下,这类问题不会发生,只 ...

  4. 策略模式（Strategy）

    行为型模式:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模式 策略模式(Strategy) 策略模式定义了一系列算法,并将 ...

  5. HttpWebRequest 写入报错

    HttpWebRequest以UTF-8编码写入内容时发生“Bytes to be written to the stream exceed the Content-Length bytes size ...

  6. Python 类型

    文章出处:http://www.cnblogs.com/winstic/,请保留此连接   python是动态类型语言,不需要预先声明变量的类型,变量类型和值在赋值的那一刻被初始化   python使 ...

  7. java printf与println的区别

    Java中的println和printf的区别在于:println是用于输出参数内容,然后换行,其参数个数固定为一个.printf是用于输出带各种数据类型的占位符的参数,其参数个数是不定的.

  8. 苹果搜索广告后台大揭秘，最全最细致详解，手把手设置教程「后附官方视频」－b

    WWDC2016 搜索广告分会视频和 PPT 发布了,ASO100 带开发者第一时间了解 Search Ads 后台设置(文末有原声视频). 首先介绍一下搜索广告的模式和竞价规则 广告模式为 CPT( ...

  9. Tomcat架构（三）

    嵌套组件 这些组件是针对Tocmat做的特定实现,他们的主要目的是使各种Tomcat容器可以完成各自的工作. 1.阀(Valve) valve是处理元素,它可以被包含在每个Tomcat容器的处理路径中 ...

  10. php调用linux命令

    php有以下接口可提供执行外部函数: system() exec() popen() 但要使用上面几个函数,首先,要配置php.ini配置文件.修改配置文件如下: safe_mode = off; 改 ...