CSS自学笔记(三)

动画

声明一个动画：

不同的浏览器要给@keyframes添加不同的前缀，为使动画在所有浏览器正常工作，可以同时声明多个不同前缀的同名动画。例如：

@keyframes myfirst
{
	from {background: red;}
	to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
	from {background: red;}
	to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
	from {background: red;}
	to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
	from {background: red;}
	to {background: yellow;}
}

动画也可以用百分比控制，“from”和“to”就等同于0%和100%。例如：

@keyframes myfirst
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

使用动画

给div元素添加时长5s的myfirst动画：

div {
	animation: myfirst 5s;
	-moz-animation: myfirst 5s;	/* Firefox */
	-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
	-o-animation: myfirst 5s;	/* Opera */
}

下面的表格列出了@keyframes规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 “ease”。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

参考：www.w3school.com.cn

动画

声明一个动画：

使用动画

相关文章：

你感兴趣的文章：

标签云：