<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS3动画功能Animations</title>

    </head>

    <style>

        #animations{

            width:200px ;

            height:200px ;

            background-color: #3598DC;

        }

        @-webkit-keyframes mycolor{

            0%{

                background-color: #dc3646;  /*加载百分之0%，变色，加宽，旋转20度*/

                width:230px ;

                -webkit-transform:rotate(20deg);

            }

            20%{

                background-color: #70dc27;  /*加载百分之20%，变色，加宽，旋转60度*/

                width:250px ;

                -webkit-transform:rotate(60deg);

            }

            50%{

                background-color: #a628dc;     /*加载百分之50%，变色，加宽，旋转20度，移动30px，30px，*/

                width:260px ;

                -webkit-transform:rotate(20deg);

                -webkit-transform:translate(30PX,30PX);

            }

            80%{

                 background-color: #dcc419;

                width:280px ;

                -webkit-transform:rotate(0deg);

                -webkit-transform:translate(50PX,50PX);

            }

            100%{

                background-color: #dc3646;

                width:300px ;

                -webkit-transform:rotate(180deg);

            }

        }

        #animations:hover{

            -webkit-animation-name: mycolor;    /*关键帧名字*/

            -webkit-animation-duration: 5s;      /*变换延续时间*/

            -webkit-animation-timing-function: linear;  /*变换的速率变化*/

            -webkit-animation-iteration-count: 2;

        }

    </style>

    <body>

    <div id="animations"></div>

        <!--<div id="rotat">rotate旋转</div>-->

        <!--<div id="scale">scale缩放</div>-->

        <!--<div id="skew">skew 倾斜</div>-->

        <!--<div id="translate">translate移动</div>-->

        <!--<p>旋转，倾斜 缩放 移动 transform</p>-->

    </body>

</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. 关于sqlserver2012重启后ID自增1000的问题解决方案

    1. Open "SQL Server Configuration Manager" 2. Click "SQL Server Services" on the ...

  2. JavaScript 高阶函数 + generator生成器

    map/reduce map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果: function pow(x ...

  3. php 常用

    零:重要的PHP超级全局变量 1.$_SERVER $_SERVER超级全局变量包含由web服务器创建的信息,它提供了服务器和客户配置及当前请求环境的有关信息.根据服务器不同,$_SERVER中的变量 ...

  4. ExecuteNonQuery&& ExecuteQuery 区别

    前些日子作一些数据项目的时候 在ADO.NET 中处理 ExecuteNonQuery()方法时,总是通过判断其返回值是否大于0来判断操作时候成功 .但是实际上并不是这样的,好在处理的数据操作多时 修 ...

  5. 关于C# 调用 C dll时，抓获C的异常

    最近一直被C# 调用native code时的内存错误,各种错误所困扰.而且在.net 4.0中非托管代码的异常不能被托管代码抓获,导致程序直接crash. 最终找到了.net 的方法.MSDN有关于 ...

  6. gnuplot使用

    直接用yum安装gnuplot即可,例如 sudo sh -c "yum install gnuplot.x86_64 " 安装以后就可以使用了 编写gnuplot脚本 # grp ...

  7. 2016021904 - 如何使用Memory Analyzer

    如何使用Memory Analyzer呢? 0.有内存溢出的代码code.<深入理解java虚拟机>中代码 package neutron.oom.heap; import java.ut ...

  8. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  9. 【竞品分析】Android音乐播放器的竞品分析

    迄今为止最长的一篇博客,各位看官笑纳~~ 本次分析基于Android平台,选取了几款我体验过的播放器进行比较分析.主要分为两类,一类是大而全的,功能全面,可满足用户管理歌曲.导入导出歌单等多方面需求, ...

  10. 用word2013写博客

    第一次使用,添加博客账户时碰到一个奇怪的问题,先输入用户名,然后密码只能输入两个字符,后来先输入密码再输入用户名才解决,很神奇~