CSS3：animation动画
animation只应用在页面上已存在的DOM元素上，学这个不得不学keyframes，我们把他叫做“关键帧”。
keyframes的语法法则：
@keyframes flash {
from{
left:;
}
50%{
left:50px;
}
to{
left:100px;
}
}
或
@keyframes flash {
0%{
left:;
}
50%{
left:50px;
}
100%{
left:100px;
}
}
为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器！
为了兼容更多浏览器，还需要加可恶的前缀：
@-moz-keyframes flash｛...｝ /* Firefox */
@-webkit-keyframes flash{...} /* Safari 和 Chrome */
@-o-keyframes flash{...} /* Opera */
animation可设置6个属性：
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。(linear匀速、ease加速、ease-in慢到快、ease-out快到慢、ease-in-out低速开始低速结束)
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数， infinite--无限次播放
animation-direction 规定是否应该轮流反向播放动画。 值normal--正常播放，值alternate--轮流返向播放
为了兼容更多浏览器，属性前还需要加可恶的前缀：
-moz-animation /* Firefox */
-webkit-animation /* Safari 和 Chrome */
-o-animation /* Opera */
小实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画</title>
<style>
.box{width:100px;height:100px;
background: #000;
position:relative;
-webkit-animation: flash 5s ease-out;
animation: flash 5s ease-out;
}
@-webkit-keyframes flash {
0%{
top:0;
left:0;
background:red;
}
25%{
left:200px;
top:0;
background: #000;
}
50%{
top:200px; left:200px;
}
75%{
top:200px; left:0;
}
100%{
left:0;
top:0
}
}
@keyframes flash {
0%{
top:0;
left:0;
background:red;
}
25%{
left:200px;
top:0;
background: #000;
}
50%{
top:200px; left:200px;
}
75%{
top:200px; left:0;
}
100%{
left:0;
top:0
}
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
注意：Internet Explorer 9 以及更早的版本不支持 animation 属性
CSS3：animation动画的更多相关文章
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
- CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
- css3 animation(动画)笔记
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
- css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
- CSS3 animation动画，循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...
- css3 animation动画使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于css3 Animation动画
在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...
随机推荐
- DotNETCore 学习笔记 日志
Logging --------------------------------------------------------------------------------------- Impl ...
- bootstrap-datetimepicker年视图中endDate设置之后比正常时间提前两个月
问题 bootstrap-datetimepicker年视图中endDate设置结束时间为2016-08,(即8月之后的日期不能选)而在日历上显示时为2016-06,相差两个月,即6月之后的日期不能选 ...
- Linux make命令详解
在linux环境下的工作,免不了需要经常编译C/C++源代码,所以make命令是我们经常都会用到的.当然make工具不一定针对C代码,它也可以维护其他各种代码,详见:man make 在列举其详 ...
- Python学习笔记 - day6 - 函数
函数 函数在编程语言中就是完成特定功能的一个词句组(代码块),这组语句可以作为一个单位使用,并且给它取一个名字.可以通过函数名在程序的不同地方多次执行(这叫函数的调用).函数在编程语言中有基本分为:预 ...
- HTTP===如何理解网关
首先举个例子: 假设你的名字叫小不点(很小),你住在一个大院子里,你的邻居有很多小伙伴,父母是你的网关.当你想跟院子里的某个小伙伴玩,只要你在院子里大喊一声他的名字,他听到了就会回应你,并且跑出来跟你 ...
- 智联招聘的python岗位数据结巴分词（二）
上次获取第一次分词之后的内容了 但是数据数据量太大了 ,这时候有个模块就派上用场了collections模块的Counter类 Counter类:为hashable对象计数,是字典的子类. 然后使用m ...
- k8s的Rolling Update（滚动更新应用）
滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停机,整个更新过程始终有副本在运行,从而保证了业务的连续性. 下面我们部署三副本应用: 初始 ...
- 成都项目中因为MYSQL与SSDB备分时间不一致，导致主键产生器错误解决一例
-- JFinal错误提示 Duplicate entry '1791361-1823391' for key 'PRIMARY' -- 1.查看SSDB的主键生成器值ssdb 127.0.0.1:8 ...
- lua返回服务器信息
ngx.header.content_type = "text/plain"; ngx.say(tostring(ngx.var.request_uri));ngx.say(tos ...
- Linux删除重复行
本文转自http://blog.csdn.net/ithomer/article/details/6926325 文本处理时,经常要删除重复行,下面是三种方法 第一,用sort+uniq,注意,单纯u ...