Bouncing Text Animation in CSS - Pure CSS Animation Effects - Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Bouncing Text Animation đơn giản nhưng không khó để thực hiện được.
<a id="text-effect" href="#">
    <span>B</span>
    <span>o</span>
    <span>u</span>
    <span>n</span>
    <span>c</span>
    <span>e</span>
</a>

#text-effect {
    text-transform: uppercase;
    border-bottom: 8px solid #e95947;
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.2);
            box-shadow: 0 10px 10px rgba(0,0,0,0.2);
    font-weight: bold;
    font-size: 30px;
    padding: 15px 15px 0px 15px;
    text-align: center;
    overflow: hidden;
    span {
        position: relative;
        display: inline-block;
        -webkit-animation: effect 1.5s linear infinite;
                animation: effect 1.5s linear infinite;
        &:nth-child(1), &:nth-child(1):before{
            -webkit-animation-delay: 0s;
                    animation-delay: 0s
        }
        &:nth-child(2), &:nth-child(2):before {
            -webkit-animation-delay: 0.2s;
                    animation-delay: 0.2s
        }
        &:nth-child(3), &:nth-child(3):before {
            -webkit-animation-delay: 0.4s;
                    animation-delay: 0.4s
        }
        &:nth-child(4), &:nth-child(4):before {
            -webkit-animation-delay: 0.6s;
                    animation-delay: 0.6s
        }
        &:nth-child(5), &:nth-child(5):before {
            -webkit-animation-delay: 0.8s;
                    animation-delay: 0.8s
        }
        &:nth-child(6), &:nth-child(6):before {
            -webkit-animation-delay: 1s;
                    animation-delay: 1s
        }
        &:before{
            content: "";
            position: absolute;
            bottom: 0;
            height: 4px;
            width: 100%;
            background-color: #e95947;
            -webkit-animation: effect1 1.5s linear infinite;
                    animation: effect1 1.5s linear infinite;
        }
    }
}
@-webkit-keyframes effect {
    0%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    10%{
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px);
    }
    15%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    25%{
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    30%{
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    40%{
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }
    45%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    100%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
}
@keyframes effect {
    0%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    10%{
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px);
    }
    15%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    25%{
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    30%{
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    40%{
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }
    45%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    100%{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
}
@-webkit-keyframes effect1 {
    0%{
        bottom: 0;
        height: 4px;
    }
    10%{
        bottom: -30px;
        height: 34px;
    }
    15%{
        bottom: 0;
        height: 4px;
    }
    25%{
        bottom: -20px;
        height: 24px;
    }
    30%{
        bottom: 0;
        height: 4px;
    }
    40%{
        bottom: -10px;
        height: 14px;
    }
    45%{
        bottom: 0;
        height: 4px;
    }
    100%{
        bottom: 0;
        height: 4px;
    }
}
@keyframes effect1 {
    0%{
        bottom: 0;
        height: 4px;
    }
    10%{
        bottom: -30px;
        height: 34px;
    }
    15%{
        bottom: 0;
        height: 4px;
    }
    25%{
        bottom: -20px;
        height: 24px;
    }
    30%{
        bottom: 0;
        height: 4px;
    }
    40%{
        bottom: -10px;
        height: 14px;
    }
    45%{
        bottom: 0;
        height: 4px;
    }
    100%{
        bottom: 0;
        height: 4px;
    }
}

0 thảo luận về Bouncing Text Animation in CSS - Pure CSS Animation Effects - Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục