Animations

Deux méthodes d’animations en CSS3 : transition et animation.

Dans ce qui suit je ne vais pas aborder des choses très compliquées, je vais rester dans les bases.

Dans la rubrique « ressources » vous trouverez des liens vers des animations bien plus complexes.

Transition

SURVOL

Code HTML

<div class="div-couleur">SURVOL</div>

Code CSS


.div-couleur {
    background: #9F391A;
    border-radius:5px;
    -moz-transition: all .5s;
}
.div-couleur:hover {
    background: #F6AD1A;
    border-radius: 50px;
}

Une ligne de texte qui change de couleur au survol

Code HTML


<p class="p-anim">
Une ligne de texte qui change de couleur au survol
</p>

Code CSS


.p-anim {
    -moz-transition: color 2s;
    color: #6E98B8;
}
.p-anim:hover {
    color: #EDA11A;
}

Animation

L’interêt des animations c’est que l’on peut faire plusieurs transitions grâce aux keyframes

Code HTML

<div class="div-couleur-anim"></div>

Code CSS


.div-couleur-anim {
    width:100px;
    height:100px;
    background: #65537A;
    line-height: 100px;
    color:#000;
    margin:auto;
    -moz-animation: couleur-anim 3s linear infinite;
}
@-moz-keyframes couleur-anim {
    0%  {background: #65537A; border-radius: 0;}
    25% {background: #729EBF; border-radius: 25px; width:150px}
    50% {background: #F6AD1A; border-radius: 50px; width:200px}
    75% {background: #729EBF; border-radius: 25px; width:150px}
}

Voici d’autres exemples. A vous de vous amuser maintenant ^^

5
3

38 commentaires sur “Animations”

  4. Salut Akanda,
    le code est dans le code source de la page.
    Tu fait un clic droit, tu clic sur « code source de la page » et tu recherche /* Slider */ (lignes 272 à 309 normalement) et tu auras le css.
    Tu cherche une nouvelle fois /* slider */ et tu trouvera le code html (lignes 388 à 392).
    Il faudra évidemment changer le chemin des images en fonction de leur emplacement chez toi.

  9. Merci FrogWeb pour ton menu déroulant. Je l’ai appliqué sur mon site et j’ai suivis les conseils que tu m’as donné en ce qui concerne les z-index. Tout se déroule à merveille … 😉
    Il ne me reste plus qu’a modifier les codes couleurs pour que les onglets soient identiques et le tour est joué.

    Tes conseils sont Très apprécié …

  10. Bonjour Frogweb,
    Merci pour ce tuto très simple et très sympa qui complète bien le Mooc de Mateo.

    Comme vous pouvez l’imaginer je suis débutante en html5 et surtout en css3.
    Voilà ce qui m’amène : mon site (ci-joint) est un peu vieillot, trop long, des images trop petites bref il a besoin d’un sérieux lifting.
    J’aimerai un album photos ou plusieurs du type de la démo : mais je n’y arrive pas, mes images ne veulent pas s’afficher. J’ai pourtant suivi votre recette, je ne comprends pas car j’ai réussi pour le menu déroulant.

    Si vous pouviez m’aider, ça me rendrai bien service et je vous en remercie par avance.
    Ségolène

    • Bonjour Ségolène,
      dans quelle page as tu mis le slider ?
      Ensuite, le fait que les images ne s’affichent pas c’est souvent l’url (src) qui n’est pas bonne.
      Vérifie bien tout, majuscule, minuscule, extension dans les noms d’images.
      J’attire ton attention également que la propriété « animation » qui est utilisé ne fonctionne pas avec IE9 et inférieurs.

    • Salut FrogWeb,
      tu me connais deja, tu m’as rendu service plus d’une fois sur Open ClassRooms,
      J’ai juste une question, quel est le code de l’album photo et si il est possible de reouter des boutons pour revenir sur l’image précédente, etc…?
      Merci 😉

      • Salut ^^
        le code tu le trouvera en affichant la source de la page.
        La CSS commence à /* slider */
        Pour le html cherche la div class= »slider ».
        Par contre ce code n’est pas adapté pour mettre des bouton avant-arriere.
        D’ailleurs je ne suis pas sur que ce soit réalisable en html/CSS. Il faut je pense rajouter une couche javascript, avec jquery par exemple.

  14. Salut,

    parce que je suis développeur front-end.
    Je me débrouille bien en html/css un peu en JS mais pas du tout en php ^^
    Et puis pourquoi réinventer la roue ? Il y a des CMS tout prêt autant les utiliser.
    Surtout avec le PHP, il faut un bon niveau sinon question sécurité ton site c’est une passoire.
    Et c’est long, j’ai déjà pas le temps de m’occuper du contenu…

  15. Bonjour à toutes et tous,

    J’ai essayé de reproduire le code HTML/CSS de la jauge animée toutefois
    le code source n’étant pas visible sur votre site web ; je n’ai pas réussi
    à animer la jauge . Le code source pourrait il être envoyé ou retranscrit
    sur votre site . Merci pour votre compréhension .

    Mr.F

    • Bonjour,
      le code source est disponible…
      Il suffit de regarder le code source de la page ^^.
      Clic droit > afficher le code source (ou autre phrase selon les navigateur).
      D’ailleurs, pour que tout le monde puisse récupérer le code facilement, la CSS est également présent directement dans le html.
      Et il y a des commentaires pour repérer le code.

  16. Bonjour
    Je tente de tester l’animation mais cela ne fonctionne (chez moi) que sous Firefox et pas sous Safari ni Chrome. Pourtant votre page ici présente ouverte sous les 3 navigateurs précédemment nommés affiche correctement les animations.
    Je n’arrive pas à savoir ce qui cloche. Avez-vous une idée ?

    • Salut,
      c’est de ma faute…
      Sur le site je n’ai mis que la version préfixée pour Firefox mais dans le code source j’ai mis aussi pour Chrome.
      Il faut que tu rajoutes une version préfixée avec -webkit-
      Contacte moi sur openclassroom si tu n’y arrive pas.
      (il faut vraiment que je mette à jour tout ça…^^)

  17. Bonsoir .. svp : lorsque j’insère un lien pour le  » lien sous menu  » il m’amène vers un lien externe (une autre page) … j’ai besoin que lorsque je clique sur le  » lien sous menu  » il change L’URL dans la même page .. comment faire !? et mercii 🙂

  21. Bonsoir,

    Je cherche comment réaliser un menu vertical dans ce style là (dans le bloc qui est rond à droite):http://ehdreeahnah.tumblr.com/tags
    j’ai essayer d’inspecter l’élément mais je comprends pas comment ça a été fait, j’voudrais faire le même mais avec les textes à l’intérieur des boutons au passage de la souris ça s’étirerait je sais pas si c’est possible ?

    Merci d’avance

Laisser un commentaire