Split Text Slide-In for Bold Text

Community Contribution: Jaee Chew

Preview Link

CSS

.split-bold strong,
.split-bold b {
    display: inline-block;
    font-weight: bold;
    position: relative;
    color: #000;
    overflow: hidden;
}

.split-bold strong::before,
.split-bold b::before,
.split-bold strong::after,
.split-bold b::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    width: 100%;
    color: #000;
    font-weight: bold;
    pointer-events: none;
}

.split-bold strong::before,
.split-bold b::before {
    top: 0;
    height: 50%;
    transform: translateX(-100%);
    animation: slideTop 0.8s forwards;
}

.split-bold strong::after,
.split-bold b::after {
    bottom: 0;
    height: 50%;
    transform: translateX(100%);
    animation: slideBottom 0.8s forwards;
}

@keyframes slideTop {
    to {
        transform: translateX(0);
    }
}

@keyframes slideBottom {
    to {
        transform: translateX(0);
    }
}