<!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. JS中关于clientWidth offsetWidth srollWidth等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  2. SQL Server2012连接SQL Server2000完美解决方案

    在SQL Server2012中连接其他SQL Server数据库时可以使用以下代码: exec sp_addlinkedserver 'ITSV', '', 'SQLOLEDB', 'serveri ...

  3. Git新手入门手册

    1.配置email及name git config --global user.email "guxuelong@f-road.com.cn" git config --globa ...

  4. 在python 中有时候我们用数组

    在python 中有时候我们用数组操作数据可以极大的提升数据的处理效率, 类似于R的向量化操作,是的数据的操作趋于简单化,在python 中是使用numpy模块可以进行数组和矢量计算. 下面来看下简单 ...

  5. AngularJS学习-初识

    angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听 ...

  6. jQuery 获取父元素、子元素、同级元素

    详情:http://www.w3school.com.cn/jquery/jquery_traversing_ancestors.asp   parent() 方法返回被选元素的直接父元素.(常用) ...

  7. Laravel框架——Session操作

    use Session;//session的永久保存(在不过期范围内) Session::put('key', 'value'); //等同于PHP的原生session $_SESSION['key' ...

  8. 支付宝集成SDK 报错

    1.打开Demo中的错误 这是路径错误导致 解决办法:在Build Settings 中找到 Library Search Paths ,去掉其中的 /// 2.自己集成支付宝SDK时的错误 这个也是 ...

  9. [BZOJ 3144] [Hnoi2013] 切糕 【最小割】

    题目链接:BZOJ - 3144 题目分析 题意:在 P * Q 的方格上填数字,可以填 [1, R] . 在 (x, y) 上填 z 会有 V[x][y][z] 的代价.限制:相邻两个格子填的数字的 ...

  10. [BZOJ 1011] [HNOI2008] 遥远的行星 【近似解】

    题目链接: BZOJ - 1011 题目分析 这道题的特别之处在于,答案可以有5%的误差. 嗯..So? 我还是不会,于是看题解. 神犇的题解就是利用这误差范围求一个近似解. 怎么求近似解呢?假如 g ...