欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS3中的关键帧@keyframes 和 动画animation

程序员文章站 2024-03-24 20:21:40
...

animation的复合属性
animation-name 定义的@keyframes的名称
animation-duration 动画持续的时间
animation-timing-function 与transition的那几个一致
animation-delay 延迟几秒后再运行动画
animation-iteration-count 循环几次；infinite无限循环
animation-direction normal(默认) alternate动画的反方向播放

动画实例
CSS3中的关键帧@keyframes 和 动画animation

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>@keyframes和animation</title>
	<style type="text/css">
/*
first
		.react{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: fixed;
			animation: myMove 2s infinite;
		}

		@keyframes myMove{
			from {top:0; left: :20%;}
			to {top:0;left: 80%}
		}*/
/*		
second
		.react{
			width: 60px;
			height: 60px;
			margin: 100px auto;
			font-size: 10px;
			text-align: center;
		}
		.react > div{
			width: 6px;
			height: 100%;
			background-color: #67CF22;
			display: inline-block;
			animation: mymove 1.2s infinite;
		}
		.react > div:nth-child(2){
			animation-delay: -1.1s;
		}
		.react > div:nth-child(3){
			animation-delay: -1.0s;
		}
		.react > div:nth-child(4){
			animation-delay: -0.9s;
		}
		.react > div:nth-child(5){
			animation-delay: -0.8s;
		}
		

		@keyframes mymove{
			0%, 40%, 100%{transform: scaleY(0.4);}
			20% {transform: scaleY(1);}
		}
*/
	.spinner{
		width: 100px;
		height:100px;
		margin: 100px auto;
		position: relative;
	}
	.spinner >div{
		border-radius: 50%;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #67CF22;
		animation: myMove 2s infinite;
		opacity: 0.6;
		top:0px;
		left: 0px;
	}
	.spinner >div:nth-child(2){
		animation-delay: -1s;
	}
	@keyframes myMove{
		0%,100% {transform: scale(1);}
		50% {transform: scale(0);}
	}
	</style>
</head>
<body>
	<div class="react">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="spinner">
		<div></div>
		<div></div>
	</div>
</body>
</html>
相关标签： CSS3新特性 css3 css html animation

上一篇： jQuery实现手风琴动画切换内容

下一篇： requestAnimationFrame和setTimeout

推荐阅读