实训第五天用CSS制作简单动画_css动画实现实验报告-CSDN博客

本文链接：https://blog.csdn.net/qq_45284063/article/details/117554967

学习目标：

1.掌握CSS动画基础属性

2.根据需求搜索对应animation、transform属性

知识：

1.CSS动画

2.CSS过渡

练习要求：

1.整体居中于浏览器

2.循环播放动画

动画效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform</title>
	<style>
        .box1{
            background-color: rgb(176, 243, 51);
            height: 800px;
            width: 1000px;
            
        }

		.box2{
			width: 100px;
			height: 100px;
			transform: translate(0px,400px);
			position: relative;
			background-color: red;

			animation-name: x;
			animation-timing-function:ease-in-out;
			animation-iteration-count: infinite;
			animation-duration: 4s;
			animation-direction: alternate;
        }

		@keyframes x{
			0%{
				transform: translate(0px,400px);
                border-radius: 100px;
			}
			20%{
				transform: translate(200px,400px);
				background-color: orange;
                border-radius: 50px;
			}
            50%{
				transform:translate(500px,400px);
                background-color:lightgreen;
                border-radius: 0px;
            }
		
			70%{
				transform:translate(700px,400px);
				background-color: teal;
                border-radius: 50px;
			}
            100%{
			    transform: translate(900px,400px);
				background-color: red;
                border-radius: 100px;
                }
            
		}
	</style>
</head>
<body>
	<div class="box1">
        <div class="box2">
        </div>
	</div>
</body>
</html>