JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">TO BE CUT OUT</div>
SCSS
body {
background: linear-gradient(270deg, #000, #fff);
background-size: 400% 400%;
-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container{
width: 400px;
height: 200px;
background-color: darkred;
margin: auto;
color: #fff;
font-size: 80px;
font-weight: 900;
text-align: center;
}