CSS动画控制器
<html>
<head>
<title>animation</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #00b3ee;
}
/*动画过程控制器*/
@-webkit-keyframes firstDiv{
10%{
background-color: #a94442;
width: 200px;
height: 200px;
}
30%{
background-color: #398439;
width: 200px;
height: 200px;
}
50%{
background-color: #afd9ee;
width: 300px;
height: 300px;
}
80%{
background-color: #ffff00;
width: 370px;
height: 370px;
transform:rotate(30deg);
}
100%{
background-color: #ffff00;
width: 500px;
height: 500px;
transform:rotate(60deg);
}
}
div:hover{
-webkit-animation-name: firstDiv;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
</style>
</head>
<body>
<div>动画div</div>
</body>
</html>
CSS动画控制器的更多相关文章
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
随机推荐
- http://jingyan.baidu.com/article/bad08e1ee14ae409c85121cf.html
http://jingyan.baidu.com/article/bad08e1ee14ae409c85121cf.html
- office2010永久的密钥
1.Office Professional Plus 2010: 6QFDX-PYH2G-PPYFD-C7RJM-BBKQ8 BDD3G-XM7FB-BD2HM-YK63V-VQFDK 2.O ...
- HDU1561 The more, The Better（树形DP）
题目是有n个存有宝藏的城堡,攻克任何一个城堡都需要先攻克0个或其他1个城堡,问攻克m个城堡最多能得到多少宝藏. 题目给的城堡形成一个森林,添加一个超级根把森林连在一起就是树了,那么就考虑用树型DP: ...
- BZOJ4068 : [Ctsc2015]app
对于一个所选任务集合,如果对于任意时刻$i$,$i$前面所选任务数都不超过i的话,那么这些任务可以全选. 维护一棵线段树$T$,第$i$个位置一开始为$i$,每使用一个任务,$[t,T]$都要减$1$ ...
- BZOJ3867 : Nice boat
每个点最多被修改$O(\log n)$次,线段树记录区间最值暴力更新. #include<cstdio> #define N 262145 int T,n,m,i,op,c,d,p,s[N ...
- NSMutableArray 存放BOOL
注意BOOL是不能直接存放在NSMutableArray中的 NSNumber* yesObj = [NSNumber numberWithBool:YES]; NSMutableArray* arr ...
- Checkbox的选中删除功能且Ajax返回后清除所选行
转摘:http://javaweb1024.com/qianduan/jQuery/2015/04/13/544.html 功能描述:多选框勾选以后(全部或者部分),需要想后台提交已勾选的数据(Aja ...
- winform学习之-----关于按键操作的一些小知识（如何获取焦点所在的当前控件）20160623
1.设置整个窗体keydown事件的时候,要设置keyPreview=true; 2.获取当前拥有焦点的控件: 关于这个问题,自己也是纠结死了,在网上搜了好多相关的问题答案,搜出的结果是: //API ...
- thinkphp框架中处理标签中条件输出
这个问题是这样的,当我在模板中想在标签option中在某个条件下输出selected.但是在里边嵌套if标签的话,condition里边第二个参数使用变量的时候,不能解析.所以只能使用别的方法了.达到 ...
- HDU 1688 Sightseeing&HDU 3191 How Many Paths Are There（Dijkstra变形求次短路条数）
Sightseeing Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...