<!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. MVVM模式应用 之加载Pivot的数据

    在Pivot布局里,在进入页面时,不想页面数据全部加载,而是移动到哪个privotItem,加载那个privotItem的值. 这时我们先给pivot绑定一个command. <phone:Pi ...

  2. oracle建立表空间

    //创建临时表空间 create temporary tablespace test_temp tempfile 'E:\oracle\product\10.2.0\oradata\testserve ...

  3. [C#学习]在多线程中如何调用Winform[转]

    问题的产生: 我的WinForm程序中有一个用于更新主窗口的工作线程(worker thread),但文档中却提示我不能在多线程中调用这个form(为什么?),而事实上我在调用时程序常常会崩掉.请问如 ...

  4. Ipv6_Only－b

    网上好多关于ipv6的资料,说半天ipv6是什么,怎么建立测试环境,,,可是没有看到具体的操作和解决的方案,这里,为大家提供一种方案,希望给大家带来帮助吧. 总的来说有三个方面需要进行检查和修改: 1 ...

  5. android学习（2） 多线程的理解

    多线程操作UI的运行原理: UI线程:首先启动app时,系统会自动启动一个UI线程,然后此线程会创建一个Looper(注:Looper构造函数会实例化一个MessageQueue的消息队列存在变量mQ ...

  6. HttpRuntime类的缓存以及redis,memercache

    http://www.cnblogs.com/kissdodog/archive/2013/05/07/3065208.html

  7. ios6,ios7,ios7.1下设置UISearchbar的背景色

    ios系统升级到7.1后,原来在7.0下显示正常的UISearchbar现在又出现问题了.究其原因,是由于UISearchbar的subview又做修改了. float version = [[[ U ...

  8. java cpu缓存

    众所周知, CPU是计算机的大脑, 它负责执行程序的指令; 内存负责存数据, 包括程序自身数据. 同样大家都知道, 内存比CPU慢很多. 其实在30年前, CPU的频率和内存总线的频率在同一个级别, ...

  9. 【MongoDB】应用场景

    24 Use Cases24.1 适合场景 Archiving and event logging 归档和日志记录 Document and Content Management Systems ...

  10. Cow Contest

    poj3660:http://poj.org/problem?id=3660 题意:一些奶牛之间进行编程比赛,每头牛都有一个编程能力.如果a的能力比b的能力高,则a总能打败b .现在给你一些牛之间的比 ...