CSS Edge Bounce

gistfile1.md

CSS bounce effect on hover for long filenames in a music player.

<h2 className="name">
    <span className="info-line-wrapper">
        <span className="info-line">
            Some long audio filename
        </span>
    </span>
</h2>
<h3 className="artist-album">
    <span className="info-line-wrapper">
        <span className="info-line">
            Name / Album
        </span>
    </span>
</h3>

.audiofile-info:hover .info-line-wrapper {
    position: absolute;
    width: 100%;
    animation: horizontalBounceWrapper 5s linear infinite;
}

.audiofile-info:hover .info-line {
    position: absolute;
    animation: horizontalBounceChild 5s linear infinite;
    width: auto;
    min-width: 100%;
}

@keyframes horizontalBounceWrapper {
    0% {
        transform: none;
    }

    30% {
        transform: translateX(100%);
    }

    50% {
        transform: translateX(100%);
    }

    80% {
        transform: none;
    }
}

@keyframes horizontalBounceChild {
    0% {
        transform: none;
    }

    30% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(-100%);
    }

    80% {
        transform: none;
    }
}