当先锋百科网

首页 1 2 3 4 5 6 7

CSS3动画animation

一、语法

animation: animation-name(创建的动画名)

                  animation-duration(动画时间)

                  animation-timing-function(动画方式) 

                  animation-delay(延迟时间)

                  animation-iteration-count(动画的播放次数)

                  animation-direction(动画的播放方向)

                  animation-play-state(动画的播放状态)

                  animation-fill-mode(动画发生的操作)；

二、详细介绍

1.动画的动画方式（animation-timing-function）

linear： 匀速运动

ease：速度由快到慢（默认值）

ease-in：速度越来越快

ease-out： 速度越来越慢

ease-in-out： 速度先加速再减速

2.动画的播放次数（animation-iteration-count）

默认值为1

infinite： 循环

3.动画的播放方向（animation-direction）

normal： 动画每次都是循环向前播放

alternate： 动画播放为偶数次则向前播放

4.动画的播放状态（animation-play-state）

running：将暂停的动画重新播放

paused：将正在播放的元素动画停下来

5.动画发生的操作（animation-fill-mode）

forwards：表示动画在结束后继续应用最后关键帧的位置

backwards：表示会在向元素应用动画样式时迅速应用动画的初始帧

both：表示元素动画同时具有forwards和backwards的效果

三、案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 30px;
				width: 30px;
				background-color: red;	
				animation: donghua 1s linear 0s infinite normal;
			}		
			@keyframes donghua{
				0%{
					transform: translate(0px,0px);	
				}
				25%{
					transform: translate(50px,0px);
				}
				50%{   
					transform: translate(100px,0px);
				}
				75%{
					transform: translate(50px,0px);
				}
				100%{
					transform: translate(0px,0px);
				}				
		</style>		
	</head>
	<body>	
		<div></div>
	</body>
</html>