31 lines
732 B
CSS
31 lines
732 B
CSS
/* Animation classes */
|
|
.shake {
|
|
animation: shake 400ms both;
|
|
}
|
|
|
|
/* Keyframes */
|
|
@keyframes shake {
|
|
0% { transform: translateX(-2rem); }
|
|
25% { transform: translateX(2rem); }
|
|
50% { transform: translateX(-1rem); }
|
|
75% { transform: translateX(1rem); }
|
|
}
|
|
|
|
@keyframes splat {
|
|
0% { transform: scale(150%); opacity: 0; }
|
|
29% { transform: scale(150%); opacity: 0; }
|
|
30% { transform: scale(150%); opacity: 0.5; }
|
|
80% { transform: scale(90%); opacity: 1; }
|
|
100% { transform: scale(100%); }
|
|
}
|
|
|
|
@keyframes float-up-left {
|
|
0% { transform: translate(10px, 20px); }
|
|
100% { transform: translate(0, 0); }
|
|
}
|
|
|
|
@keyframes float-down-right {
|
|
0% { transform: translate(-10px, -20px); }
|
|
100% { transform: translate(0, 0); }
|
|
}
|