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);
}

Imágenes de fondo

<div id="prueba">

</div>

<div id="test">

</div>
<div id="test2">

</div>

<ul>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
</ul>
#prueba{
width:500px;
height:400px;
border: solid 2px grey;
background-image:url("img/smile.png"),url("img/textura.jpg");
background-position:right BOTTOM, left top;
background-repeat:no-repeat;
background-size: auto,cover;
}

#test{
width:500px;
height:200px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}
#test2{
width:200px;
height:500px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
background-position:right bottom;
}
li{
display:inline-block;
width:150px;
height:150px;
border: solid 4px orange;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}

li:nth-child(2){
background-image:url("img/smile.png");
}