* {
margin:0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Impact;
}
.animation {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.animation_container {
width: 700px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap:1rem;
}
.item {
background-color: #1BB48F;
padding: 3rem;
color: white;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #0E7B61;
box-shadow: -3px 4px 5px black;
}
.item span {
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
font-size: 2rem;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}
.item .zoom {
animation-name: zoom;
}
@keyframes zoom {
0% {transform: scale(1);}
50% {transform: scale(1.3);color: black;text-shadow: 1px 1px 1px white;}
100% {transform: scale(1); color: white;}
}
.item .rebotar {
animation-name: rebotar;
}
@keyframes rebotar {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.item .wobble {
animation-name: wobble;
color: black;text-shadow: 1px 1px 1px white;
}
@keyframes wobble {
0% {transform: translateX(0);}
15% {transform: translateX(-25%)rotate(-5deg);}
30% {transform: translateX(20%)rotate(3deg);}
45% {transform: translateX(-15%)rotate(-3deg);}
60% {transform: translateX(10%)rotate(2deg);}
75% {transform: translateX(-5%)rotate(-1deg);}
100% {transform: translateX(0%)}
}