/*Scrolling Text Right to Left*/
.cssmarqueerl {
height: 50px;
overflow: hidden;
position: relative;
}
.cssmarqueerl h1 {
font-size: 2em;
color: royalblue;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform:translateX(100%);
animation: cssmarqueerl 10s linear infinite;
}
@keyframes cssmarqueerl {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}

/*Slide-In Text*/
    .cssmarqueesit {
    height: 50px;
    overflow: hidden;
    position: relative;
    }
    .cssmarqueesit h1 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: left;
    animation: cssmarqueesit 5s ease-out;
    }
    @keyframes cssmarqueesit {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0%);
    }
    }
    /*Left to Right*/
    .cssmarqueelr {
    height: 50px;
    overflow: hidden;
    position: relative;
    }
    .cssmarqueelr h1 {
    position: absolute;
    width: 100%;
    height: 100%;
    color: turquoise;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    transform:translateX(-100%);
    animation: cssmarqueelr 10s linear infinite;
    }
    @keyframes cssmarqueelr {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(100%);
    }
    }
    
    /*Scroll Vertically*/
        .cssmarqueesv {
        height: 50px;
        overflow: hidden;
        position: relative;
        }
        .cssmarqueesv h1 {
        position: absolute;
        width: 100%;
        height: 100%;
        color: turquoise;
        margin: 0;
        line-height: 50px;
        text-align: center;
        /* Starting position */
        transform:translateY(-100%);
        animation: cssmarqueesv 10s linear infinite;
        }
        @keyframes cssmarqueesv {
        0% {
        transform: translateY(-100%);
        }
        100% {
        transform: translateY(100%);
        }
        }  
        /*Bouncing Text*/
        .cssmarqueebt {
            height: 50px;
            overflow: hidden;
            position: relative;
            }
            .cssmarqueebt h1 {
            position: absolute;
            color: royalblue;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: left;
            animation: cssmarqueebt 2s linear infinite alternate;
            }
            @keyframes cssmarqueebt {
            0% {
            transform: translateX(70%);
            }
            100% {
            transform: translateX(0%);
            }
            }