css3动画(二)

最新推荐文章于 2023-06-25 20:51:27 发布

西柚呀y

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量118

点赞数 1

文章标签： css3 动画

本文链接：https://blog.csdn.net/y935072878/article/details/89402900

版权

帧动画

<style>
	.block{
		width:100px;
		height:100px;
		border:1px solid red;
		animation:animateData 2s linear;
		animation-delay:1s;//延时
		animation-play-state:running;//正在执行的动画
		animation-timing-function:linear;//运动的方式
		animation-iteration-count:infinite;//播放的次数 循环播放/n次
		animation-duration:2s;//动画执行时间
		animation-direction:alternate;//下一周期是否逆向播放，默认normal
	}
	//动画的执行方式
	@keyframes animateData{
		//两种写法
		from{
			height:0px;
		}
		to{
			height:200px;
		}

		0%{}
		20%{}
		50%{}
		100%{}
	}
</style>

补充：
infinite：循环
reverse：动画反向播放
alternate：奇数次正向播放，偶数次反向播放
alternate-reverse：奇数次反向播放，偶数次正向
normal：默认正向播
paused：暂停
linear-gradient（）颜色渐变

弹球实例：

<head>
	<style>
		.block{
			width:100px;
			height:100px;
			border-radius:50%;
			background:linear-gradient(180deg.pink,blue);
			margin:0 auto;
			animation:animatetan 1s ease-in infinite alternate;
		}
		@keyframes animatetan{
			0%{margin-top:0px;}
			40%{margin-top:600px;}
			50%{margin-top:300px;}
			60%{margin-top:600px;}
			70%{margin-top:450px;}
			80%{margin-top:600px;}
			90%{margin-top:550px;}
			1000%{margin-top:600px;}
		}
	</style>
</head>
<body>
	<div class="block"></div>
</body>