Discussion :

[FirePrawn]

Je vous propose une traduction de l'article anglophone Css animate effects we can learn from Animate.css par Paul Underwood : CSS3 : animations visuelles avec Animate.css.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

CSS3 : animations visuelles avec Animate.css.

[Torgar]

Très intéressant et enrichissant comme article

P-S: dommage que la page de démonstration de l'auteur ne fonctionne pas avec la dernière version de Firefox 14.0.1 alors que celle-ci fonctionne très bien sous Firefox et Chrome dernière version.

[FirePrawn]

Très intéressant et enrichissant comme article

P-S: dommage que la page de démonstration de l'auteur ne fonctionne pas avec la dernière version de Firefox 14.0.1 alors que celle-ci fonctionne très bien sous Firefox et Chrome dernière version.

C'est effectivement un problème récent que j'ai remarqué, je l'ai signalé à l'auteur qui m'a assuré qu'il chercherai l'origine du problème et le corrigerai dès que possible

[Torgar]

Merci pour nous de l'avoir prévenu

[alex_vino]

Quelles sont les versions de navigateur compatible?

[FirePrawn]

Toutes les dernières versions, il n'y a rien de nouveau ici, c'est du code CSS3 donc compatible avec les versions récentes des différents navigateurs.

Le problème que soulevait Torgar n'est pas un problème de compatibilité mais bien de code, puisque la démo sur le site officiel du projet fonctionne très bien sous Firefox 14

[Tryp']

Bonjour,

Comment pouvons-nous utiliser ces animations ? J'ai bien téléchargé un fichier animate.css, mais je ne sais pas quoi en faire. Quand j'applique simplement un style à un de mes éléments HTML, rien ne change.

Par exemple, j'aimerai qu'au clic sur un bouton, l'animation se déclenche. Cela est-il possible ? Si oui, suffit-il d'appliquer le style au bouton, ou bien comment cela se passe-t-il ? Faut-il inclure du javascript ?

Merci bien pour vos réponses, et pour cet article intéressant.

Tryp, un type qui aime bien les nouveautés CSS3

[Torgar]

Salut,

Il suffit d'inclure le fichier CSS comme d'habitude et d'appliquer la classe CSS voulue à l'élément choisi.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="shake">Secouez-moi !!!</div>

Pour la gestion du clic, tu peux regarder du côté des méthodes removeClass et addClass de jQuery si tu l'utilises déjà dans un de tes projets.
Sinon, sans jQuery, comme tu as pu le voir avec le nom des méthodes, le principe est d'ajouter/retirer la classe lors du clic. Regarde dans ce cas la propriété javascript "className". Tu devrais trouver ton bonheur.

[Bovino]

Regarde dans ce cas la propriété javascript "className".

Une option plus efficace (mais pas compatible IE < 9) est d'utiliser HTMLElement.classList.add() et HTMLElement.classList.remove()

[Tryp']

Tout d'abord, merci bien pour vos réponses, même si j'aime les nouveautés CSS3, je ne suis pas un grand fan de Javascript

Une option plus efficace (mais pas compatible IE < 9) est d'utiliser HTMLElement.classList.add() et HTMLElement.classList.remove()

J'ai testé avec ces éléments là, n'ayant jamais travaillé avec Jquery, mais ça n'a pas l'air de fonctionner. Voici mon maigre test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function test() {
    document.getElementById('osef').classList.add('swing');
    document.getElementById('osef').classList.remove('swing');
}
 
<div id="osef">
    <a class="buttons" href="#" onclick="test()">Un test</a>
</div>

En débuggant avec Firebug, j'ai l'impression que la classe s'ajoute bien à mon élément HTML, mais ne fait rien. Peut-être faut-il inclure une sorte de sleep ?

En tout cas, le navigateur est bon (Firefox 15), je parviens à voir les animations sur les sites de démonstration.

Edit : De plus, le fichier CSS est bien chargé, et le code Javascript est directement dans les sources HTML. On ne sait jamais

[FirePrawn]

Au vu de ta fonction, c'est logique que rien ne se passe, car tu ajoutes la classe pour la retirer juste après.

[Tryp']

Oui, ça me paraissait un peu bizarre aussi, mais je pensais que l'animation aurait le temps de se lancer avant.

En retirant la ligne pour enlever la classe, ça ne fonctionne toujours pas. Cependant, en ajoutant une seconde classe (animated) au div, ça fonctionne correctement.

En résumé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
    var div = document.getElementById('osef');
    div.classList.add('swing');
    div.classList.add('animated');
 
    setTimeout(function() {
        document.getElementById('idDuForm').submit()
    }, 2000);
}
 
<div id="osef">
    <a class="buttons" href="#" onclick="test()">Un test</a>
</div>

Merci pour votre aide à tous les trois !