CSS Motion Lab

<span class="color-change">AGAIN</span>

.color-change {
    color: black;
    transition: color 0.5s;
}

.color-change:hover {
    color: red;
}

<span class="fade-hover">AGAIN</span>

.fade-hover {
    opacity: 1;
    transition: opacity 0.8s;
}

.fade-hover:hover {
    opacity: 0.15;
}

<span class="grow">AGAIN</span>

.grow {
    display: inline-block;
    transition: transform 0.5s;
}

.grow:hover {
    transform: scale(1.6);
}

<span class="turn">AGAIN</span>

.turn {
    display: inline-block;
    transition: transform 0.5s;
}

.turn:hover {
    transform: rotate(12deg);
}

<span class="slide">AGAIN</span>

.slide {
    display: inline-block;
    transition: transform 0.7s;
}

.slide:hover {
    transform: translateX(90px);
}

<span class="combine">AGAIN</span>

.combine {
    display: inline-block;
    transition: all 0.7s;
}

.combine:hover {
    color: blue;
    transform: scale(1.3) rotate(-8deg);
    letter-spacing: 12px;
}

<span class="invert">AGAIN</span>

.invert {
    padding: 14px 20px;
    transition: all 0.4s;
}

.invert:hover {
    color: white;
    background: black;
}

<a class="poem-link" href="#">AGAIN</a>

.poem-link {
    color: black;
    text-decoration: none;
    transition: color 0.4s;
}

.poem-link:hover {
    color: magenta;
}

.poem-link:visited {
    color: purple;
}

<span class="fade">AGAIN</span>

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fade {
    animation: fade 2s infinite alternate;
}

<span class="pulse">AGAIN</span>

@keyframes pulse {
    from { transform: scale(1); }
    to   { transform: scale(1.45); }
}

.pulse {
    display: inline-block;
    animation: pulse 1.2s infinite alternate;
}

<span class="float">AGAIN</span>

@keyframes float {
    from { transform: translateY(20px); }
    to   { transform: translateY(-20px); }
}

.float {
    display: inline-block;
    animation: float 2s infinite alternate ease-in-out;
}

<span class="spin">AGAIN</span>

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.spin {
    display: inline-block;
    animation: spin 3s infinite linear;
}

<span class="bounce">AGAIN</span>

@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-45px); }
    100% { transform: translateY(0); }
}

.bounce {
    display: inline-block;
    animation: bounce 1.1s infinite;
}

<span class="color-cycle">AGAIN</span>

@keyframes colorCycle {
    0%   { color: red; }
    50%  { color: blue; }
    100% { color: purple; }
}

.color-cycle {
    animation: colorCycle 3s infinite;
}

<span class="drift">AGAIN</span>

@keyframes drift {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }

    100% {
        transform: translateX(40px);
        opacity: 1;
    }
}

.drift {
    display: inline-block;
    animation: drift 2.5s infinite alternate;
}

<span class="expand-text">AGAIN</span>

@keyframes expandText {
    from { letter-spacing: 0; }
    to   { letter-spacing: 24px; }
}

.expand-text {
    animation: expandText 2s infinite alternate;
}

<span class="blink">AGAIN</span>

@keyframes blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.blink {
    animation: blink 1s infinite;
}

<span class="delayed">AGAIN</span>

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delayed {
    animation: appear 2s infinite;
    animation-delay: 1s;
}