CSS3之动画Animation特效
CSS3的出现 让我们通过css样式也能写出炫酷的特效
通过 Animation 这个属性 无需插件和jquery也可以轻松的完成简单的动画效果
DEMO：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background: #008aff; 11 position: absolute; 12 -webkit-animation:aname 10s; 13 -o-animation:aname 10s; 14 animation:aname 10s; 15 } 16 @keyframes aname { 17 0%{top:0px;left: 0px;} 18 30%{top:0px;left: 500px;} 19 60%{top:500px;left: 0px;} 20 100%{top:0px;left: 0px;} 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 </body> 27 </html>
这段代码演示的是一个蓝色的正方形div在10秒内移动的过程
首先 我们用animation这个属性 声明了一个名称 aname 在这个名称的后面10s是指定这个动画的运行时长为10秒
为什么要写三个animation属性 这三个animation代表着为css3的不同浏览器进行兼容
前缀 -o- 代表着 opera 内核的浏览器
前缀 -webkit- 代表着拥有webkit内核的浏览器 如 Chrome 搜狗浏览器 猎豹浏览器
@keyframes aname(动画名) 这个样式是执行动画用的 它是写在div外面的
@keyframes 内部的 0%{} 是规定动画在运行时长的百分比状态
也就是0%的时候我规定了它的坐标top和left都是0px
当然 还有其他的动画属性
播放的次数 animation-iteration-count
可以写数字也可以写infinite代表无限次
动画的播放曲线 animation-timing-function
默认值 linear 无变化
ease 开始快 结束慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(参数,参数,参数，参数) 写自己的参数 0到1规定速度
如果不是时间很长的动画 以上并不会有太大的不同
是否逆行播放 animation-direction 默认值 normal 逆行 alternate
是否暂停动画 animation-play-state 默认值 running 暂停 paused
动画何时开启 animation-delay 数字加s
当然以上的所有属性可以简写成这样
animation: aname 5s linear 2s infinite alternate;
