Appliquer plusieurs masques à une image avec webkit-mask

sismikkk

18 Feb 2011 à 09:28

Bonjour voici mon problème, j'ai une image sur laquelle je fais bouger un masque (png) et qui laisse apparaitre une image en dessous (une sorte de transition).
Sauf que je veux que mon image possède plusieurs masques attitrés qui ont le même mouvement mais qui ne bougent pas en même temps.
Y-a-t-il un moyen d'appliquer plusieurs masques à une même image ?
Merci !

voici mon code :

HTML :

<body>

<img src="showcase_transitions_004.jpg" alt="showcase_transitions_004" width="600" height="400" class="imagedessus"/>
<img src="showcase_transitions_002.jpg" alt="showcase_transitions_002" width="600" height="400" class="imagedessous"/>
</body>

CSS :

.imagedessus{
position: absolute;
-webkit-mask-image: url(mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
-webkit-mask-size: 60px 400px;
-webkit-animation-name: bounce1;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(1,0,1,1);
left: 0px;
top: 0px;
z-index: 10;
}

@-webkit-keyframes bounce1 {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: 0 400px;
}
}

sismikkk

24 Feb 2011 à 12:20

Re bonjour !

Je me suis débrouillé en découpant mon image en autant de div que j'ai de bandes à animer et chaque bande possède un masque.
J'ai un nouveau problème maintenant...
Je veux faire bouger mes masques par dessus les bandes mais l'utilisation de webkit-mask-position ne me suffit pas puisque je veux gérer un rebond.
Puis je utiliser une animation pour mes masques sous formes de keyframes ?

CSS et mise en forme, CSS3

Appliquer plusieurs masques à une image avec webkit-mask