[Résolu] Double animations sur un objet

Bonjour à la communauté !!

Je cherche à faire une animation pour mon site web, et j'ai un petit problème ...
J'ai un cache qui me sert à faire un mouvement pour un drapeau (deux caches exactement, mais si je résous un, je résous les deux ).

Donc se cache, il doit avoir un mouvement linéaire et infini qui me sert à donner le mouvement et un second mouvement qui le fais diminuer de taille (non infini). Pour le moment, tout vas bien, les deux fonctionnent, mais ensemble, il y a comme un écrasement d'animation ... C'est là que je me pose la question : Est-il possible de mettre deux animation sur un objet ...

Je vous link mon code

La diminution :

@keyframes premouv {
			from {width: 300px; height: 75px; top: 52px;}
			to {width: 200px; height: 50px; top: 32px; }

Le mouvement :

@keyframes segmouv {
		    from {background-position: 0px 0px;}
		    to {background-position: 2000px 0px;}
		}

Et mon css :

.pre{animation:premouv 111.8s linear infinite;}
.seg{animation:segmouv 50s linear;}

Et mon HTML pour être sur :

<div id="mon_elem" class="pre seg ">
				</div>

Voilà voilà, si jamais quelqu'un à une idée, je suis preneur
Modifié par Graston (23 Jun 2014 - 17:32)

Pourquoi n’utilises-tu pas deux div.

Voici un exemple qui marche sous firefox :
Code css

#mon_elem, #mon_elem div {
	background-image:url("http://cdn.alsacreations.net/css/img/logo-alsacreations-com.png");
	height:100px;
	overflow:hidden;
	width:1000px
}

Code html

<div id="mon_elem" class="pre">
	<div class="seg">
	</div>
</div>

Bonjour Graston,

C'est possible mais pas comme ça ! Avec ce que tu as fait tu over-ride la propriété animation. C'est un peu comme pour les multiples backgrounds ou les multiples shadow...

Du coup si tu veux deux anim il faut les mettre en même temps :

.pre{
   animation:premouv 111.8s linear infinite, segmouv 50s linear;
}

@keyframes premouv {
			from {width: 300px; height: 75px; top: 52px;}
			to {width: 200px; height: 50px; top: 32px; }
@keyframes segmouv {
		    from {background-position: 0px 0px;}
		    to {background-position: 2000px 0px;}
		}

Et du coup pas besoin de deux classes sinon la seconde va over-rider la premiere :

<div id="mon_elem" class="pre"></div>

Bon courage
Modifié par _laurent (24 Jun 2014 - 09:11)

Ok bah c'est génial cette astuce ! Merci beaucoup à vous deux !

La solution des deux div n'était pas optimisé pour mon projet ... Bien que pas trop grave quand il faut
Je ne connaissais pas les deux animation dans la même déclaration css, merci beaucoup _laurent !

Des bisous à la communauté !!

+1 _laurent