Comment animer des éléments DOM avec JavaScript/CSS

Question

Je travaille sur un jeu d'échecs avec des superpositions visuelles stratégiques. L'un d'entre eux nécessite une légère animation des morceaux et des carrés, en particulier, une pulsation lente et régulière. Mon conseil est un avec chacun étant un seul carré. Les pièces sont affichées en définissant l'image de fond en CSS sur un .svg de la pièce qu'il contient.

Est-ce que cela peut être fait en CSS? J'utilise les derniers navigateurs sans support pour les héritages, donc je peux utiliser toutes les astuces de CSS3. Une autre option que je pensais était de placer l'image de fond du tableau sur un .gif animé de la pièce pulsée. Cela fonctionnerait-il?

Y a-t-il d'autres façons de faire cela que je n'ai pas mentionné? Je voudrais éviter les paquets/frameworks, mais j'utilise jQuery.

CLARIFICATION:

Je veux faire de la pièce d'échecs genre d'impulsion (flash?) En place lentement l'accent. Je veux que ce soit une impulsion lente, subtile et cohérente qui persiste jusqu'à ce qu'un autre événement l'éteigne.

Answer 1

Il semble que vous cherchiez des animations CSS.

Jetez un oeil ici: http://www.w3.org/TR/css3-animations

En particulier, vous aurez besoin des fonctions de synchronisation suivantes:

• animation-name, pour spécifier l'ensemble des images clés à utiliser.
• animation-duration, pour spécifier la vitesse de l'animation.
• animation-iteration-count, pour répéter l'animation.
• animation-direction, pour alterner la direction de l'animation.

Et vous aurez besoin de créer des images clés, qui vous permettent de spécifier quelles propriétés CSS sont modifiées par l'animation.

En outre, vous aurez besoin préfixes fournisseurs sur tout, donc vous devez écrire -webkit-animation-name plutôt que animation-name (par exemple), et répéter tout pour -moz et d'autres fournisseurs.

Voici un exemple de webkit qui crée un effet d'opacité pulsatoire. Vous pouvez expérimenter avec les propriétés des from et to sections pour animer la taille, la couleur, etc.

.chess-piece { 
    -webkit-animation-duration: 1s; 
    -webkit-animation-name: pulse; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: alternate; 
} 
@-webkit-keyframes pulse { 
    from { 
     opacity: 0.5; 
    } 
    to { 
     opacity: 1; 
    } 
} 

JSFiddle example for webkit and moz

Answer 2

C'est tout à fait possible et facile à faire. Si je comprends bien, vous voulez faire une sorte d'animation éclatante de la figure d'échecs active? Voici comment j'allais mettre en œuvre une solution: Créer 2 pngs, l'un avec le chiffre d'échecs dans son état ordinaire non flamboyant et l'autre avec son état entièrement éclairé. Ensuite, utilisez jQuery pour changer l'opacité de l'état illuminé de 0 à 100 et de nouveau à 0. Vous pouvez envoyer les signaux jQuery "à la fin de l'animation" pour y parvenir. Vous pouvez simplement utiliser une sorte de observer pattern simplifié pour annuler l'effet une fois qu'un événement se produit.