<div class="square"/>
.square {
width: 50px;
height: 50px;
animation: moveInSquare 4s both infinite, fadeOut 2s alternate infinite;
}
@keyframes moveInSquare {
0%, 100% {
transform: translate(0px, 0px);
background-color: red;
}
25% {
transform: translate(100px, 0px);
background-color: orange;
}
50% {
transform: translate(100px, 100px);
background-color: yellow;
}
75% {
transform: translate(0px, 100px);
background-color: green;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: .5;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.