css3 animation动画

程序员文章站 2022-03-16 19:27:03

...

css3 animation动画

本篇仅介绍 animation 的语法，兼容性；以及动画使用例子，便于入门；在底部有提供动画深度剖析的博客链接。

animation 语法

animation 有八个属性：

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

animation-name 指定要绑定到选择器的关键帧的名称，即 @keyframes 后面名称可以随意；
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。

animation-timing-function 的值：

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

animation 使用举例 —— 兼容性写法

#st-controle p{
	-webkit-animation:moveUp 1s ease-in-out 0.2s backwards;
	-moz-animation:moveUp 1s ease-in-out 0.2s backwards;
	-o-animation:moveUp 1s ease-in-out 0.2s backwards;
	-ms-animation:moveUp 1s ease-in-out 0.2s backwards;
	animation:moveUp 1s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-moz-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-o-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-ms-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}