<!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. （传智博客）tp开发第一天之tp执行流程分析笔记

    1.入口文件index.php 2.ThinkPHP/ThinkPHP.php require THINK_PATH.'Common/runtime.php'; 3.ThinkPHP/Common/r ...

  2. [Machine Learning] 梯度下降（BGD）、随机梯度下降（SGD）、Mini-batch Gradient Descent、带Mini-batch的SGD

    一.回归函数及目标函数 以均方误差作为目标函数(损失函数),目的是使其值最小化,用于优化上式. 二.优化方式(Gradient Descent) 1.最速梯度下降法 也叫批量梯度下降法Batch Gr ...

  3. JavaScript Ajax + Promise

    AJAX 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: function success(text) { var textarea = document.getElementBy ...

  4. Centos6.5安装

    前奏:CentOS 6.5下载地址http://mirror.centos.org/centos/6.5/isos/x86_64/CentOS-6.5-x86_64-bin-DVD1to2.torre ...

  5. .Net C/S系统开发框架(楚楚原创)

    C/S系统开发框架-企业版 V4.0 (Enterprise Edition) 简介: http://www.csframework.com/cs-framework-4.0.htm 视频下载: 百度 ...

  6. dotnet core 开发体验之Routing

    开始 回顾上一篇文章:dotnet core开发体验之开始MVC 里面体验了一把mvc,然后我们知道了aspnet mvc是靠Routing来驱动起来的,所以感觉需要研究一下Routing是什么鬼. ...

  7. php生成图片验证码

    验证码主要用来防止暴力破解的方式来进行登录,下面是php中的图片验证码生成方式,废话不多说,直接上代码 /** * 生成验证码 */ function buildRandomString($type= ...

  8. PC和单片机通过MODBUS　RTU通信

    最近研究了一下MODBUS通信,在STC12C5A60S2单片机上实现了MODBUS协议的部分功能,方便上位机从单片机系统上获取数据,比如由单片机获取的温度.湿度.或者控制信号的状态等.有了MODBU ...

  9. spring与mybatis，strut2整合连接sqlserver不的不说的那点事儿

    今天在通过spring与mybatis整合中,想连接下公司用的sqlserver数据库,结果使用Junit测发现没连上,于是就有了下面的问题: 准备工作都已经做好了 web中spring的监听配置了 ...

  10. 我的iphone6退货之路

    开篇 匆匆这一年又快结束了,眼看年关将近,老婆的生日也快到了,正打算给老婆买个礼物,由于现在老婆用的手机是公司的工程机,而且还是低端产品,所以一直想给老婆改善改善,也算是对老婆这一年来辛苦的默默的支持 ...