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的降 ...
随机推荐
- html5 拖拽的简要介绍
1,首先,你要告诉计算机那个元素可以拖动,或者是一张图,或者是一个盒子,在标签里面加上 draggable="true" 2,然后,监听该元素被拖动的函数 ondragstart ...
- 通过EL表达式，后台数据传到前台，引号及后面的数据被截断的问题：
问题描述: 通过EL表达式,后台数据传到前台,引号及后面的数据被截断的问题: 如: 前端页面: html: 问题解决: 1.一个简单的办法,把 input 写成这样: <input type=& ...
- getting “fatal: not a git repository: '.'” when using post-update hook to execute 'git pull' on another repo
Here is the script that ultimately worked. I think the bit I was originally missing that prevented i ...
- 彻底删除sql2008r2
一． SQL2008卸载. 1.从控制面板卸载 1)点击计算机右下角“开始”,点击“控制面板” 2)点击“卸载程序”. 3)在程序列表中找到“Microsoft SQL Server 2008” ...
- session与cookie的区别,有哪些不同之处
session与cookie的区别,根据自己的理解总结如下: (1)cookie是一种客户端的状态管理技术,将状态写在 浏览器端,而session是一种服务器端的状态管理技术,将 状态写在web服务器 ...
- 很少有人知道的c++中的try块函数
c++有一些在现实世界中很少看到的结构.这些结构有着自己的用法,但是要特别小心保守的予以运用.就像是网站 The Old New Thing首页标题上面的说的那样: “代码通常被读的次数原因超过了被写 ...
- 2016022605 - redis订阅发布
Redis的实现消息队列功能,消息发布者发送的消息,消息接收者接收发布者的消息.由该消息传送的链路被称为通道.在Redis客户端可以订阅任何数目的通道. 案例:给出一个客户端订阅一个通道名为redis ...
- nutch 1.7 导入 eclipse
开发环境建议:ubuntu+eclipse (windows + cygwin + eclipse不推荐) 第一步:下载http://archive.apache.org/dist/nutch/从上述 ...
- Hadoop 学习笔记 （十一） MapReduce 求平均成绩
china:张三 78李四 89王五 96赵六 67english张三 80李四 82王五 84赵六 86math张三 88李四 99王五 66赵六 77 import java.io.IOEx ...
- tyvj 普通平衡树 SBT or splay
普通平衡树 From admin 背景 Background 此为平衡树系列第一道:普通平衡树 描述 Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中 ...