Animations CSS

Comment animer des éléments HTML en CSS

Il existe un projet qui permet d'animer facilement vos éléments HTML en CSS : animate.css

Vous pouvez consulter le projet à cette adresse : animated.css
et télécharger le projet sur Github à cette adresse : animated.css sur github

Animated . css

Vous pouvez télécharger le CSS dans sa version minimifiée à cette adresse: animated.min

Il vous suffit ensuite d'indiquer la classe animée dans l'élément que vous voulez rendre dynamique.

Exemple:

L'élément s'anime au moment où on lui attribut la classe. Si vous créez l'élément avec une classe d'animation, celui-ci sera animé au chargement de la page.

Si vous voulez associer un évènement à l'animation vous pouvez utiliser Javascript ou JQUERY :

Exemple en javascript :

	<script>
	document.getElementById("img_animated").onclick = function(){
	this.className = this.className + " " + "flipInX";
	}
	</script>

ou en jQuery :

	<script>
	$("#img_animated").click(function(){
	$(this).addClass("flipInX");
	});
	</script>

Toutes les animations de animated.css

Tooltip animée en CSS

Vous pouvez afficher des tooltips en pur CSS, passez la souris sur l'item suivant Tooltip animée en CSSCeci est une tooltip

Code :

	<style>

	.tt{
	border-bottom:1px dashed #ddd;
	cursor:help;
	color:#15c;
	}

	.tt .tt_info{
	position: absolute;
	padding: 15px;
	margin-top: 23px;
	margin-left: -35px;
	background: #e44d14;
	opacity: 0;
	color: #fff;
	-webkit-transform: scale(0) rotateZ(-12deg);
	-moz-transform: scale(0) rotate(-12deg);
	-ms-transform: scale(0) rotateZ(-12deg);
	-o-transform: scale(0) rotate(-12deg);
	transform: scale(0) rotateZ(-12deg);
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-ms-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,.5);
	-moz-box-shadow: 0 0 2px rgba(0,0,0,.5);
	box-shadow: 0 0 2px rgba(0,0,0,.5);
	}

	.tt:focus .tt_info, .tt:hover .tt_info {
	transform:scale(1) rotate(0);
	opacity: 1;
	-webkit-transform: scale(1) rotateZ(0);
	-moz-transform: scale(1) rotate(0);
	-ms-transform: scale(1) rotateZ(0);
	-o-transform: scale(1) rotate(0);
	transform: scale(1) rotateZ(0);
	}
	</style>

	Vous pouvez afficher des tooltips en pur CSS, passez la souris sur l'item suivant
	<strong class="tt">Tooltip animée en CSS<span class="tt_info">Ceci est une tooltip</span></strong>