<!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. Linux 共享内存编程

    共享内存允许系统内两个或多个进程共享同一块内存空间,并且数据不用在客户进程和服务器进程间复制,因此共享内存是通信速度最快的一种IPC. 实现的机制简单描述如下:一个进程在系统中申请开辟了一块共享内存空 ...

  2. centos git gitolite安装笔记

    export PATH=/home/git/bin:$PATH echo PATHgit branch 查看本地分支 git branch -a 查看远程分支 git fetch 获取远程分支 git ...

  3. JS操作SELECT方法

    1.判断select选项中 是否存在Value="paraValue"的Item2.向select选项中 加入一个Item3.从select选项中 删除一个Item4.修改sele ...

  4. css3学习--css3动画详解二（3d效果）

    一.设置3D场景 perspective:800       //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴)    //视点的位置 transf ...

  5. mysql远程连接

    多人开发时,每人一份程序文件.但是有时需要公用一个份数据库.这时就需要数据库能远程连接. 现在以mysql为例演示一下. 这里远程连接可以 1.允许固定客户端ip登陆. select host,use ...

  6. Amazon's NoSQL Journey and AWS Operations

    AWS: Amazon Web Services 提供了一整套基础设施和应用程序服务,使您几乎能够在云中运行一切应用程序:从企业应用程序和大数据项目,到社交游戏和移动应用程序. 计算类: EC2:弹性 ...

  7. WebApi学习总结系列第四篇（路由系统）

    由于工作的原因,断断续续终于看完了<ASP.NET Web API 2 框架揭秘>第二章关于WebApi的路由系统的知识. 路由系统是请求消息进入Asp.net WebApi的第一道屏障, ...

  8. python相关的工具

    在使用python的时候,发现Adaconda工具包真的很不错,里面集合了很多的工具,并且,自带了很多的python常用模块 另外,PyCharm编辑器也是不错的,界面清晰,可以实现数据的可视化

  9. LightOj_1079 Just another Robbery

    题目链接 题意: 抢银行(这个背景最爱了), 有n家银行, 每家银行抢劫被抓的概率是p[i],你认为当你被抓的概率低于P的时候是安全的. 问, 你最多能抢劫到多少money. 思路: 抽象成背包问题, ...

  10. 【POJ3415】 Common Substrings（后缀数组|SAM）

    Common Substrings Description A substring of a string T is defined as: T(i, k)=TiTi+1...Ti+k-1, 1≤i≤ ...