学习目标:
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>