JSFiddle - React, Tailwind, and code Playground

by Krzysztof

HTML

<div class="upcoming-element">
    <p>Upcoming:</p>
    <div class="marqueeable">
        <h3 class="mask">Watch this new video! Watch this new video! Watch this new video!</h3>
    </div>
</div>

CSS

body {
    background-color: #F00;
}
p, h3 {
    margin: 2px;
}
p {
    display: inline-block;
    margin-left: 12px;
}
h3 {
    padding-left: 12px;
    white-space: nowrap;
}
.upcoming-element {
    width: 450px;
    position: relative;
    background-color: #00CCFF;
    margin-bottom: 25px;
    opacity: 0.75;
}
.marqueeable {    
    overflow-x: hidden;
    width: 450px;
    position: relative;
    opacity: 0.75;
}

@-webkit-keyframes fademask {
	0% {
		-webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 150px);
	}
	100% { /*none of this works*/
		-webkit-mask-image: none;
        /* -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 0px); */ 
	}
}
.marqueeable > h3.mask {
    opacity: 1;
	-webkit-animation: fademask 3s infinite;
	-webkit-animation-delay: 1s;
}