Modern CSS Animations
Keyframe animations for cards, icons, loaders and headings - drop a class on an element and it comes alive.
1Orbital Motion
Two small planets circle around an avatar, logo or icon on separate orbits. Class: fx-orbital-motion
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="fx-orbital-motion">
<img src="../assets/img/avatar-5.svg" alt="Team member avatar" class="rounded-circle shadow" style="width:4.5rem;height:4.5rem">
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-orbital-motion {
position: relative; display: inline-grid; place-items: center; width: 9rem; height: 9rem;
border-radius: 50%; border: 1px dashed rgba(var(--wt-primary-rgb), .45);
}
.fx-orbital-motion::before, .fx-orbital-motion::after {
content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none;
}
.fx-orbital-motion::before {
width: 14px; height: 14px; margin: -7px; background: var(--wt-primary);
box-shadow: 0 0 10px rgba(var(--wt-primary-rgb), .7);
animation: fx-orbital-motion-outer 5s linear infinite;
}
.fx-orbital-motion::after {
width: 10px; height: 10px; margin: -5px; background: var(--wt-accent);
animation: fx-orbital-motion-inner 3.2s linear infinite reverse;
}
@keyframes fx-orbital-motion-outer { from { transform: rotate(0deg) translateX(4.5rem) rotate(0deg); } to { transform: rotate(360deg) translateX(4.5rem) rotate(-360deg); } }
@keyframes fx-orbital-motion-inner { from { transform: rotate(0deg) translateX(3.1rem); } to { transform: rotate(360deg) translateX(3.1rem); } }
@media (prefers-reduced-motion: reduce) {
.fx-orbital-motion, .fx-orbital-motion::before, .fx-orbital-motion::after, .fx-orbital-motion *, .fx-orbital-motion *::before, .fx-orbital-motion *::after { animation: none !important; transition: none !important; }
}2Typewriter
Types a single line of monospace text letter by letter with a blinking caret; set --fx-ch to the character count. Class: fx-typewriter
terminal
npm run build<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="bg-dark text-white rounded-3 p-3 w-100" style="max-width:18rem">
<div class="small text-white-50 mb-1">
terminal
</div>
<span class="fx-typewriter" style="--fx-ch:13">npm run build</span>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-typewriter {
display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom;
font-family: var(--ui-font-monospace, monospace);
width: calc(var(--fx-ch, 20) * 1ch + .15em);
border-right: .12em solid var(--wt-primary);
animation: fx-typewriter-type 4.5s steps(var(--fx-ch, 20)) infinite, fx-typewriter-caret .8s step-end infinite;
}
@keyframes fx-typewriter-type { 0% { width: 0; } 65%, 100% { width: calc(var(--fx-ch, 20) * 1ch + .15em); } }
@keyframes fx-typewriter-caret { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
.fx-typewriter, .fx-typewriter::before, .fx-typewriter::after, .fx-typewriter *, .fx-typewriter *::before, .fx-typewriter *::after { animation: none !important; transition: none !important; }
}