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 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
随机推荐
- Redis 连接池的问题
目录 Redis 连接池的问题 1 1. 前言 1 2.解决方法 1 前言 问题描述:Redis跑了一段时间之后,出现了以下异常. Redis Timeout ex ...
- MONO 说谈
Xamarin android现在到底依赖Dalvik不?是部分依赖的 驱动 编译后的IL经过CLR并不能直接成为机器码,而是要借助Dalvik才能成为机器码吗? 而是关于Android的驱动部分主 ...
- MatLab GUI Use Command for Debug 界面调试的一些方法
在MatLab的GUI界面编程,我们在调试的时候需要打印出一些变量,那么介绍下我用到的两种调试方法: 第一种,使用弹出对话框来打印变量,要注意的是打印的东西必须是string类型的,所以其他类型的变量 ...
- vb.net-三种将datagridview数据导出为excel文件的函数
第一种方法较慢,但是数据格式都比较好,需要引用excel的 Microsoft.Office.Interop.Excel.dll office.dll #Region "导出excel函数 ...
- 结合计划任务每天从Symantec官网下载离线病毒库
#三种方法,由初级到高级 $numbers = 1..40 | Foreach {"{0:D3}" -f $_} #将数字类型格式化并转换为字符串类型使用-f字符串操作符 ForE ...
- 【新产品发布】发布STM8S 核心板
搞了一些STM8的核心板供大家把玩,先上几张图: 物品购买地址: http://item.taobao.com/item.htm?spm=686.1000925.1000774.17.5GMO5M&a ...
- MongoDB高可用模式部署
首先准备机器,我这里是在公司云平台创建了三台DB server,ip分别是10.199.144.84,10.199.144.89,10.199.144.90. 分别安装mongodb最新稳定版本: w ...
- PHP Static Self 的区别
<?php class Human{ public static function whoami() { echo "来自父类的whoami"; } public stati ...
- 【转载】jQuery插件开发精品教程，让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- windows上在linux客户端上传小文件lrzsz
yum install lrzsz 即可 rz上传,会打开本地图形化界面直接上传 基于centos系统,其他系统请找对应 的源码包编译 一下