Css 学习笔记第十章 animation基础

animation基础

http://www.w3school.com.cn/css3/css3_animation.asp

@keyframes 规则
animation
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>

@keyframes boll{
	from{
		transform: translateY(0);
	}
	to{
		transform: translateY(150px);
	}
}		
		
.box{
	width: 100px;
	height: 100px;
	background: darkred;
	border-radius: 50%;
/* 	animation: boll 3s linear infinite alternate;
	 */
	animation-name:boll ;
	animation-duration: 2s;
 
	
}



 
	</style>
	<body>
	 
			<div class="box"></div>
 
	</body>
</html>

Css 学习笔记第十章 animation基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
@keyframes aniLeft{
/* 	from{
		transform:translate(0,-300px);
	}
	to{
		
	} */
	0%{  transform:translate(260px,-350px)}
	20%{ transform:translate(260px,-0px)}
	40%{ transform:translate(260px,-70px)}
	60%{ transform:translate(260px,-0px)}
	100%{transform:translate(0px,-0px)}
}	

@-webkit-keyframes aniMid{
	0%{  -webkit-transform:translate(260px,-350px);transform:translate(260px,-350px)}
	20%{ -webkit-transform:translate(260px,-0px);transform:translate(260px,-0px)}
	40%{ -webkit-transform:translate(260px,-70px);transform:translate(260px,-70px)}
	60%{ -webkit-transform:translate(260px,-0px);transform:translate(260px,-0px)}
	100%{-webkit-transform:translate(0px,-0px);transform:translate(0px,-0px)}
}
	
@keyframes aniMid{

	0%{  transform:translate(0px,-350px)}
	20%{ transform:translate(0px,-0px)}
	40%{ transform:translate(0px,-70px)}
	60%{ transform:translate(0px,-0px)}
	100%{transform:translate(0px,-0px)}
}	
@keyframes aniRight{
	
	0%{transform:translate(-260px,-350px)}
	20%{transform:translate(-260px,-0px)}
	40%{transform:translate(-260px,-70px)}
	60%{transform:translate(-260px,-0px)}
	100%{transform:translate(0px,-0px)}
	}	


.out{
	width: 1000px;
	height: 600px;
	border: 1px solid blue;
	margin: 0 auto;
	padding-top: 400px;
}		
		
.out .box{
	width: 200px;
	height: 300px;
/* 	border: 1px solid red; */
	overflow: hidden;
	float: left;
	border-radius: 5px;
	margin: 0px 30px;
	box-shadow: 0px 0px 10px 3px lightgray ; ;
	 
}

.out .box:nth-child(1){animation: aniLeft  3s 0.1s;}
.out .box:nth-child(2){animation: aniMid   3s 0.2s;}
.out .box:nth-child(3){animation: aniRight 3s 0.3s;}
 
	</style>
	<body>

		<div class="out">
			<div class="box"><img src="img/1.jpg"></div>
			<div class="box"><img src="img/2.jpg"></div>
			<div class="box"><img src="img/3.jpg"></div>
		</div>

	</body>
</html>

无限旋转

Css 学习笔记第十章 animation基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
@keyframes aniBox{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}		
		
.box{
	width: 100px;
	height: 100px;
	background: darkred;
/* 	transform: rotate(45deg); */
	margin: 50px;
	animation: aniBox 2s linear infinite;
	line-height: 100px;
	text-align: center;
}
 
 
	</style>
	<body>

	<div class="box">我可以旋转</div>

	</body>
</html>

Css 学习笔记 第十章 animation基础

animation基础

相关推荐

Css 学习笔记第十章 animation基础