CSS3动画变形Animations
<!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的更多相关文章
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值. 主要包括四个属性: 执行变换的属性:transition-property 变换延续的时间: ...
- CSS3动画变形transition
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- css3动画由浅入深总结
阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
随机推荐
- 24种设计模式--门面模式【Facade Pattern】
大家都写过纸质的信件吧,比如给女朋友写情书什么的,写信的过程大家都还记得吧,先写信的内容,然后写信封,把信放到信封中,封好,投递到信箱中进行邮递,这个过程还是比较简单的,虽然简单,这四个步骤都是要跑的 ...
- ARM开发板系统移植-----u-boot的编译
本文和另外两篇姊妹篇都是为了说明如何裁剪出适合在mini2440 开发板上运行的Linux系统,以记录自己的学习成果.其中本文先介绍了嵌入式系统的软件组成部分,然后介绍编译出适合在mini2440开发 ...
- js获取天气
我们经常看到有的网站显示天气信息,它是怎么做出来的呢?今天就来分享一些关于js调用天气API的几种做法. 网上也能找到很多种方法,但是一般都是免费的不好用,好用的不免费. 以前用过新浪的天气api,查 ...
- Ajax and JSON
Ajax (核心是XMLHttpRequest对象) 1.XMLHttpRequest对象: request=new XMLHttpRequest() 支持Firefox opera Safari ...
- 【python】dir(__builtins__)查看python中所用BIF（内置函数）
dir(__builtins__)查看python中所用BIF(内置函数)
- git+Coding.netの小试牛刀
一.将本地项目推送到Coding中 1.在Coding中新建项目,填写项目名称和项目描述,设置属性,勾选初始化仓库
- BASLER 镜头选型白皮书
本文翻译自Basler镜头选型白皮书 有许多方法来进行镜头选型.本文将会讨论其中的指导原则,以帮助你在项目中选择合适的镜头.我们将讨论许多镜头的基本概念,比如镜头接口.图像大小.放大率.焦距.F数和光 ...
- UVA 1329 - Corporative Network
带权值的并查集的应用: 代码: #include<cstdio> #include<algorithm> #include<cmath> #include<c ...
- 3.1日 重温JVM相关信息
1.JDK.JRE.JVM的关系: JDK是java开发的必备工具箱,JDK其中有一部分是JRE,JRE是JAVA运行环境,JVM则是JRE最核心的部分. 2.JVM的组成: JVM由4大部分组成:C ...
- 设计模式之（三）Proxy模式
今天学习Proxy模式.代理模式是在对已有对象操作困难或者不太方便时,选择用代理的方式对对象进行访问.Proxy实现的方法必须和被代理对象一致. 举一个简单的例子, 有一个Math类实现了IMath接 ...