Animaciones CSS

<div id="prueba">
<h1>hola</h1>
</div>
#prueba{
width:100px;
height:100px;
background:red;
animation-name:animacion;
animation-duration:4s;
animation-iteration-count: infinite;
}

@keyframes animacion{

15% {transform:translate(0,200px)rotate(0deg);}
30% {transform:translate(0,200px) rotate(360deg);}
50% {transform:translate(100px,100px);background:red;}
65% {transform:translate(100px,100px);background:green;}
80% {transform:translate(100px,100px);background:blue;}

}

Degradados

<div id="prueba">
</div>
<div id="prueba2">
</div>
<div id="prueba3">
</div>
<div id="prueba4">
</div>
<div id="prueba5">
</div>
<div id="prueba6">
</div>
<h1>Hola que tal</h1>
div{
 display:inline-block;
 width:500px;
 height:300px;
 border: solid 2px grey;
 box-shadow: 20px -10px 10px orange;
 margin:20px;
}
#prueba{
 background:linear-gradient(rgba(30,90,90,0), rgba(30,90,90,1));
}
#prueba2{
 background:linear-gradient(45deg, red, blue,orange);
}
#prueba3{
 background:linear-gradient(to right,red, blue);
}
#prueba4{
 background:radial-gradient(red, blue);
}
#prueba5{
 background:radial-gradient(circle,red, blue);
}
#prueba6{
 background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
h1{
 background-color:black;
 text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
 color: rgba(255,255,255,0);
}