CSS3的keyframe动画介绍

最新推荐文章于 2024-05-13 14:34:46 发布

原创最新推荐文章于 2024-05-13 14:34:46 发布 · 289 阅读

CC 4.0 BY-SA版权

本文详细介绍了CSS动画的关键属性，包括动画类型、循环次数、播放延迟等，并通过实例展示了如何使用这些属性来实现一个简单的太阳升起动画。

#sun.VeryHuo {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes sunrise {

	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}

	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}

animation-timing-function   动画类型
animation-iteration-count   动画循环次数
animation-delay             动画播放延迟
animation-play-state        动画播放还是暂停 (参数: paused, running)
animation-fill-mode         动画结束状态
                            none：默认值。不设置对象动画之外的状态
                            forwards：设置对象状态为动画结束时的状态
                            backwards：设置对象状态为动画开始时的状态
                            both：设置对象状态为动画结束或开始的状态
animation-direction         检索或设置对象动画循环播放次数大于1次时，动画是否反向                      运动。
                            normal：正常方向。
                            reverse：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）
                            alternate：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。
                            alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持）