css过渡及动画

section { background: rgb(113, 75, 124); width: 600px; height: 600px; position: relative; }

@keyframes x {
form {
width: 0px;
}

to {
    width: 600px;
}

}

@keyframes y {
from {
height: 0px;
}

to {
    height: 600px;
}

}

div {
background: black;
position: absolute;
height: 20px;
width: 20px;
}

.x1,
.x2,
.x3,
.x4 {
animation: x 5s;
}

.y1,
.y2,
.y3,
.y4 {
animation: y 5s;
}

.x2 {
top: 200px;
}

.x3 {
top: 400px;
}

.x4 {
top: 580px;
}

.y2 {
left: 200px;
}

.y3 {
left: 400px;
}

.y4 {
left: 580px;
}