Animation: contrôler l'état de départ et de fin (c) lipelip

dabblet.css

/**
 * Animation: contrôler l'état de départ et de fin (c) lipelip
 */


p {
	font-family: sans-serif;
	text-align: center;
	width: 150px; margin: 30px auto;
	padding: 10px;
	text-transform: uppercase;
	background: #BADA55;
	color: green;
	border: 1px solid green;
}

@-webkit-keyframes texte01 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-200px);
		box-shadow: 0 0 0 0 rgba(186,217,84,0.76);
	}
	70% {
		opacity: 1;
		-webkit-transform: translateY(15px);
		box-shadow: 0 15px 0 0 rgba(186,217,84,0.76);
	}
	85% {
		opacity: 1;
		-webkit-transform: translateY(-10px);
		box-shadow: 0 20px 0 0 rgba(186,217,84,0.36);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		box-shadow: 0 30px 0 0 rgba(186,217,84,0);
	}	
}
	.texte01 {
		-webkit-animation: texte01 .4s 1 ease-in-out;
	}
	
			
	.p2 {
		-webkit-animation: texte01 .4s .5s 1 ease-in-out;
	}

/* Problème de base les animations sont déjà en place 
	
	On peut controler ça avec : animation-fill-mode
	4 valeurs possible:
	
	- backwards: La première étape de l'animation est appliquée aux 				élments même si elle n'est pas encore lancée
	
	- forwards: idem avec la dernière étape
	
	- both: backwards et forwards en même temps
	
	- none: par défaut, modifié que pendant l'animation

	activer la ligne ci-dessous pour voir la difference
	
*/	
/*
.texte01 { -webkit-animation-fill-mode: both; }
*/

dabblet.html

<p class="p1 texte01">l'animation</p>
<p class="p2 texte01">reste en place</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}