CSS de la A la Z: animații cu @keyframes și spațiere inteligentă cu line-height

Unul dintre lucrurile cele mai interesante la CSS3 mi s-a părut a fi posibilitatea de a face animații. Animații din CSS? Yep, și merge chiar bine. Guy Routledge, explică în filmul de mai sus cum se pot folosi @keyframes pentru a face animații faine cum ar fi o minge care sare în sus și în jos.

El a pus transcriptul filmului despre keyframes aici. Iată ce poți face cu @keyframes (exemplu dat de Guy în articol).

Codul folosit pentru animația de mai sus folosește prefixul -webkit-, necesar atunci când faci animații care să meargă în Chrome:

<div style="position: relative;width: 100%; height: 100px;padding-top: 50px;">
<div class="ball">
</div>

</div>
<style>
.ball {
	position:absolute;
	width:30px;
	height:30px;
	border-radius:100%;
	-webkit-animation:bounce 1s linear infinite;
        background: red;
}
@-webkit-keyframes bounce {
	0% { bottom:80%; }
	25% {
		bottom:0;
		width:30px;
		height:30px;
	}
	50% {
		bottom:0;
		height:15px;
		width:100px;
	}
	55% {
		bottom:0;
		width:30px;
		height:30px;
	}
	90% { bottom:80%; }
	100% { bottom:80%; }
}
</style>

Spațiere inteligentă cu line-height specificat pe body:

Eu mă tot lupt cu padding sau cu margin în multe cazuri, pe când ar trebui să folosesc mai mult line-height. De exemplu, să zicem că vrei să centrezi vertical un placeholder de la input-ul de mai jos:
<input placeholder=”manu@email.com” type=”email />

E mai util să folosesti line-height, pentru că margin sau padding pe plaholder nu ajută la nimic:
::-webkit-input-placeholder {
line-height: 28px;
}

Guy Routledge are exemple și transcript aici.

Tu ai încercat animații în CSS3?