Floating Effect for Bold Text

Community Contribution: Jaee Chew

Preview Link

CSS

.floating-bold strong,
.floating-bold b {
    display: inline-block;
    font-weight: bold;
    animation: floatBounce 2s ease-in-out infinite;
    color: #000;
 /* You can change this color */
}

@keyframes floatBounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}

HTML

<div class="floating-bold">
  This is <strong>floating</strong> bold text.
</div>