CSS
p{
font-size: 50px;
text-align: center;
background-color: red;
width: 300px;
height: 300px;
line-height: 300px;
margin:80px auto;
color: white;
animation-name: change;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes change
{
0%{color: black;
background-image: linear-gradient(to right,#36DBCA,#EFDC05);
border-radius:100%;}
60%{color: white;
background-image: linear-gradient(to left,#abcdef,#8012dd);
border-radius:50% 0%;}
80%{color: white;
background-image: linear-gradient(to left,#fed485,#aa4567);
border-radius:0% 50%}
100%{color: white;
background-image: linear-gradient(to left,#ff0044,#00ff58);
border-radius:0%;}
}