Pure CSS animated scrolling text slider

Animated scrolling text slider with pure CSS only. This slider only HTML and CSS code. We used the animate CSS property for animating the icon and also for text scrolling. We used the Material Design Icon CSS library for Icon. Below we give the full code for the slider. Just copy and used it.

If you want to change the width of the slider you need to adjust the left CSS value in the slider-animation keyframe class.

CSS:

.slider-container {
    width: 350px; /*--Main container div --*/
    height: 35px;
    background: #f5f5f5;
    border-radius: 20px;
    margin: 0 auto;
}

.slider-icon {
    float: left;
}

.slider-icon i {
    font-size: 18px;
    color: #d40c0c;
    padding: 8px;
    box-sizing: border-box;
    display: block;
}

.slider-message {
    overflow: hidden;
    position: relative;
    width: 310px; /*--.slider-message, .slider-message li, .slider-msg-box all this three have same width  --*/
    height: 50px;
}

.slider-message li {
    float: left;
    position: relative;
    width: 310px; /*--.slider-message, .slider-message li, .slider-msg-box all this three have same width  --*/
    display: inline-block;
    height: 50px;
}

.slider-message ul {
    list-style: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 9000px;
    padding: 0 0 0 25px;
    margin: 0;
    transition: left .3s linear;
    -moz-transition: left .3s linear;
    -o-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    margin-left: -25px;
    font-family: century gothic;
    color: #666;
}

.slider-msg-box {
    margin: 0 auto;
    padding: 0;
    width: 310px; /*--.slider-message, .slider-message li, .slider-msg-box all this three have same width  --*/
    min-height: 50px;
    border-bottom: 1px solid #ccc;
}

.slider-msg-box p {
    font-size: 14px;
    font-weight: 400;
    margin: 8px 0 0;
    font-family: 'Roboto';
}

.slider-msg-box p a {
    color: inherit;
    text-decoration: none;
}

@-webkit-keyframes slide-animation {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 1;
    }

    20% {
        left: 0px;
        opacity: 1;
    }

    22.5% {
        opacity: 0.6;
    }

    25% {
        left: -310px;
        opacity: 1;
    }

    /*--Change for second slider--*/
    45% {
        left: -310px;
        opacity: 1;
    }

    /*--Change for second slider--*/
    47.5% {
        opacity: 0.6;
    }

    50% {
        left: -620px;
        opacity: 1;
    }

    /*--Third for second slider--*/
    70% {
        left: -620px;
        opacity: 1;
    }

    /*--Third for second slider--*/
    72.5% {
        opacity: 0.6;
    }

    75% {
        left: -930px;
        opacity: 1;
    }

    /*--Fourth for second slider--*/
    95% {
        opacity: 1;
    }

    98% {
        left: -930px;
        opacity: 0;
    }

    /*--Fourth for second slider--*/
    100% {
        left: 0px;
        opacity: 0;
    }
}

.slider-container ul {
    -webkit-animation: slide-animation 25s infinite;
}

.slider-container ul:hover {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes iconanimate {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes iconanimate {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.iconanimate {
    -webkit-animation-name: iconanimate;
    animation-name: iconanimate;
}

HTML:

<div class="slider-container">
    <div class="slider-icon"><i class="mdi mdi-gift animated iconanimate infinite"></i></div>
    <div class="slider-message">
        <ul>
            <li>
                <div class="slider-msg-box">
                    <p><a href=""><i class="mdi mdi-language-html5"></i> HTML is easy lerning language </a></p>
                </div>
            </li>
            <li>
                <div class="slider-msg-box">
                    <p><a href=""><i class="mdi mdi-language-css3"></i> CSS3 is more power designing code</a></p>
                </div>
            </li>
            <li>
                <div class="slider-msg-box">
                    <p><a href=""><i class="mdi mdi-material-ui"></i> We used the Material Design Icon</a></p>
                </div>
            </li>
            <li>
                <div class="slider-msg-box">
                    <p><a href=""><i class="mdi mdi-web"></i> You can see the live demo on Labw3 Demo</a></p>
                </div>
            </li>
        </ul>
    </div>
</div>

Icon Library:

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">

Preview