CSS3动画初识

CSS3 动画库

推荐：
Animista
Animate
Hover
Three Dots
CSShake
cssanimation

CSS3 创建动画

  1. 将元素与动画进行绑定,设置动画持续时间
1
div{
2
	width:100px;
3
	height:100px;
4
	background:red;
5
	animation:change 5s;
6
}
  1. 创建 @keyframes 动画规则
1
@keyframes change
2
{
3
	from {background:red;}
4
	to {background:green;}
5
}

这样一个简单的改变div颜色的动画就完成了。

animation 属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name：动画名称
duration： 动画指定需要多少秒或毫秒完成，默认是 0
timing-function： 规定动画的速度曲线，默认是 “ease”
delay： 规定动画何时开始，默认是 0
iteration-count： 定义动画的播放次数，默认是 1
direction： 规定动画是否在下一周期逆向地播放，默认是 “normal”
fill-mode： 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
play-state： 规定动画是否正在运行或暂停，默认是 “running”

CSS
动画

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！