Skip to content

Instantly share code, notes, and snippets.

@marianban
Created January 16, 2020 20:23
Show Gist options
  • Save marianban/0cbc47db1a556f59134867fe3d313670 to your computer and use it in GitHub Desktop.
Save marianban/0cbc47db1a556f59134867fe3d313670 to your computer and use it in GitHub Desktop.
Animated Box
<div class="box"></div>
.box {
position:absolute;
top: 30%;
left: 30%;
width: 150px;
height: 150px;
background-color: blue;
animation-name: animate;
animation-duration: 6s;
animation-iteration-count: infinite;
transform-origin: top;
@keyframes animate {
25% {
transform-origin: top;
transform: rotateX(0.5turn);
}
25.001% {
transform: translateY(-100%);
transform-origin: right;
}
50% {
transform-origin: right;
transform:
translateY(-100%)
rotateY(0.5turn);
}
50.001% {
transform-origin: bottom;
transform:
translateY(-100%)
translateX(100%);
}
75% {
transform-origin: bottom;
transform:
translateX(100%)
translateY(-100%)
rotateX(0.5turn);
}
75.001% {
transform-origin: left;
transform: translateX(100%);
}
100% {
transform-origin: left;
transform:
translateX(100%)
rotateY(0.5turn);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment