<style>
* {
box-sizing: border-box;
}
html, body {
align-items: center;
background: linear-gradient(45deg, #9a12b3, #4ecdc4);
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
padding: 0;
width: 100vw;
}
div {
background-color: #fff;
border-radius: 100%;
height: 100px;
transform: translate(-100%, -100%);
width: 100px;
}
</style>
<div></div>
div {
animation-name: squarePath;
animation-duration: 2s;
}
@keyframes squarePath {
0%, 100% {
transform: translate(-100%, -100%);
}
25% {
transform: translate(100%, -100%);
}
50% {
transform: translate(100%, 100%);
}
75% {
transform: translate(-100%, 100%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.