Pure CSS animated scrolling text slider

Pure Css Text Slider
Animated scrolling text slider not used any script and CSS library file. This slider only HTML and CSS code. We used the animate CSS property for animated 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 ad 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">

Copyright Labw3