html代码
<div class="main">
<div class="mains"></div>
</div>
css代码
* {
margin: 0;
padding: 0;
}
body {
/*设置body的宽高以及背景颜色*/
width: 100vw;
height: 100vh;
background-color: #34495e;
display: flex;
justify-content: center;
align-items: center;
}
.main {
/*建立一个大方框*/
height: 400px;
width: 400px;
border: solid 1px #ddd;
}
.mains {
/*建立一个小方块*/
height: 100px;
width: 100px;
background-color: cadetblue;
/*动画名字(自定义)*/
animation-name: translate, background;
/*动画持续的时间*/
animation-duration: 4s, 2s;
/*一直执行动画*/
animation-iteration-count: infinite;
}
@keyframes translate {
/*25%的时候向X轴移动300像素*/
25% {
transform: translateX(300px);
}
/*50%的时候向X轴和Y轴移动300像素*/
50% {
transform: translate(300px, 300px);
}
/*25%的时候向Y轴移动300像素*/
75% {
transform: translateY(300px);
}
}
@keyframes background {
/*25%的时候改变背景颜色*/
25% {
background-color: darkcyan;
}
/*50%的时候改变背景颜色*/
50% {
background-color: springgreen;
}
/*25%的时候改变背景颜色*/
75% {
background-color: darkmagenta;
}
}
效果展示