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 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
随机推荐
- asp.net中导出Excel的方法
一.asp.net中导出Excel的方法: 本文转载 在asp.net中导出Excel有两种方法,一种是将导出的文件存放在服务器某个文件夹下面,然后将文件地址输出在浏览器上:一种是将文件直接将文件输出 ...
- 4.1 avd
6.接着我们回到文件夹界面,运行 AVD Manager.exe. 7.打开 AVD Manager.exe后,点击“New"创建新的模拟器: 8.创建一个新的 Android Virtua ...
- 【wikioi】1012 最大公约数和最小公倍数问题
题目链接 算法:辗转相除(欧几里得) gcd(a, b)是a和b最小公倍数, lcm(a, b)是a和b的最大公倍数 gcd(a, b) == gcd(b, a%b) 时间复杂度: O(lgb) 具体 ...
- WebRTC手记Channel概念
转载请注明出处:http://www.cnblogs.com/fangkm/p/4401075.html 前面两篇博文完整地介绍了WebRTC音视频的采集模块,接下来应该开始介绍关键的音视频编码模块. ...
- linux 快捷键
截图: 打印: 全屏截图 alt+打印:窗口截图 shift+打印:区域截图 ctrl+打印:截图到剪贴板 显示桌面: ctrl+super+d 最大化最小化窗口 ctrl+alt+up/down 转 ...
- LeetCode-Sudoku Solver (递归解法)
题目地址: https://leetcode.com/problems/sudoku-solver/ // 将字符串的数独题转换成 int[9][9] ][], char ** b, int boar ...
- Marching Cube
GPU-Marching-Cubes An Implementation of the Marching Cubes[1] Algorithm Marching Cubes Matlab The St ...
- 将java的class文件放到一个指定文件夹下
用javac执行java文件时,要把java文件的class文件放到指定文件夹下,注意文件夹要创建好,执行javac -d 文件夹 ***.java 如图: 在class文件夹下就出现了L的class ...
- Silic PHP大马Cookie欺骗漏洞
$password="ebd9a3c106064a255aaee28b6eb4f21c"; if($_COOKIE['admin_silicpass'] != md5($passw ...
- 禁用符合一定条件的AD对象 (含Filter参数的写法)
Get-ADComputer -Filter "(sAMAccountType -eq 805306369)" -SearchBase "OU=Computers,OU= ...