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的降 ...
随机推荐
- Linux下彻底卸载LibreOffice方法
Linux下彻底卸载LibreOffice方法 终端中输入命令: 对所有基于 Debian 的发行版(Debian.Ubuntu.Kubuntu.Xubuntu.*buntu.Sidux 等): su ...
- MOOC即Massive Open Online Course的缩写
A man can succeed at almost anything for which he was unlimited enthusiasm. 只要有无限的热情,一个人几乎可以在任何事情上取得 ...
- Win7 下，离线安装 Android Studio 1.0.1 的方法
此教程没有亲自动手试过,先保存在这里 http://download.csdn.net/detail/tuobaxiao2008/8268281
- Python 关于正负无穷float(‘inf’)的一些用法
Python中可以用如下方式表示正负无穷: float("inf"), float("-inf") 利用 inf 做简单加.乘算术运算仍会得到 inf > ...
- Python 3中套接字编程中遇到TypeError: 'str' does not support the buffer interface的解决办法
转自:http://blog.csdn.net/chuanchuan608/article/details/17915959 目前正在学习python,使用的工具为python3.2.3.发现3x版本 ...
- 简单学C——第三天
控制结构(二) 前面我们已经了解到了,控制结构中的判断结构,当然switch语句也是判断语句.不过如果if...else...语句你会了,我相信switch语句你也一定会的,它们的功能都是差不 ...
- ASP.NET MVC 中使用JavaScriptResult
在浏览器地址栏输入地址,在页面上想通过脚本弹出一个框,看到Controller下有个JavaScript方法,返回的类型是JavaScriptResult,于是想用这个方法弹出框, public Ac ...
- Google+ 技巧四则
玩Google+也有一段时间了,尽管需要一些特殊的手段(比如修改hosts)才能访问,尽管存在不实名可能会被删除账户的风险,但不得不说,Google+ 的确“有点意思”.同时,看了很多关于Google ...
- SQLite 中的各种限制
英文原文:Limits In SQLite 本文定义了 SQLite 的限制,如何针对这些限制定制特定的应用程序.默认的限制设置通常是适当的,几乎适合于每一个应用.有一些应用程序可能需要在 ...
- spring没能给struts2创建出action，可能出现的原因
spring没能给struts2创建出action,可能出现的原因: 1.没有加载struts2-spring-plugin-2.1.8.1.jar 2.包冲突,删除asm.jar(网上说的) 3.s ...