• leçons 62/65 animations

    Par jacky-micky dans 3-HTML & CSS le 30 Septembre 2020 à 06:55

     

    12-TRANSITIONS ANIMATIONS TRANSFORMATIONS

     

    62 - TRANSITIONS

     

    621-fonctionnement d'une transition

     

     

     

    622-la propriété CSS "transition-property"-

     

    la propriete: "transition-property"
    la propriete: "transition-property"
    la propriete: "transition-property"

     

    623-plusieurs transitions avecc la souris

     

    transition au survol de la souris
    &
    transition au clic de la souris

     

    625-la propriete CSS - transition-timing-function

     

    la propriete: "transition-timing-function : ease"
    la propriete: "transition-timing-function:courbe de bezier=background-color+width"
    la propriete: "transition-timing-function:courbe de bezier=width"

     

    626-la propriete CSS - transition-delay

     

    la proposition : transition-delay

     

    627- transition et reverse transition

     

     

     

    EXERCICE avec des couleurs dégradees

     

     

    63 - CREER DES ANIMATIONS EN CSS

     

    631-la règle CSS "@keyframes"

     

     

     

     

    632-la règle CSS "@keyframes"

     

     

     

     
    animation au passage de la souris

     

    animation sur les couleurs et la forme
    animation au passage de la souris

     

    633 - la propriete " animation-name"

     

    la propriété "animation-name" 

     

    634 - la propriete " animation-duration"

     

    durée animation : 2s
    durée animation : 5s
    durée animation : 10s

    pourquoi l'animation finit en vert au lieu de rose ?

     

    635 - la propriete " animation-timing-function"

     

     
    passer la souris sur le cercle pour voir l'animation

    la fonction "animation-timing-function ne fonctionne pas

     

    636 - la propriete " animation-iteration-count"

     

     
    passer la souris sur le cercle pour voir l'animation (2fois)

     

    637 - la propriete " animation-direction"

     

    animation-direction:REVERSE 
    animation-direction:ALTERNATE 
    animation-direction:ALTERNATE-REVERSE 

     

     

    638 - la propriete " animation-play-state"

     

     
     l'animation se met en pause au passage de la souris

     

    639 - la propriete "animation"

     

     
     
     

     

    LEÇON 63 - EXERCICE 631

     

    Animation en deux dimensions : longueur et hauteur

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    LEÇON 63 - EXERCICE 632

    Animation en trois dimensions : longueur, hauteur et profondeur

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    LEÇON 63 - EXERCICE 633

     

    Un conteneur disparait progressivement
    faisant apparaitre une image carree qui devient ronde

     

     

     
     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    LECON 63 - EXERCICE 634

     

    Animation : deplacement en " 8 "

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    64 - TRANSFORMATIONS

     

    641-definir une transformation

     

     
     
     
     
     

     

    642-modifier la taille d'un élément avec " scale "

     

    la premiere boite
    la deuxieme boite
    la troisieme boite
    la quatrieme boite

     

    643-déformer un élément avec "skewX() & skewY() "

     

     
    X(30deg)
    Y(30deg)
    X Y (30deg)

     

    644-effectuer une translation avec "transform:translate(X,Y)"

     

     
    150px -30px
    X(100px)
    Y(30px)

     

     

    645-effectuer une rotation avec "transform:rotate"

     

     
    rorate 45deg
    rotate 90deg
    rotate 225deg

     

    646-tester la fonction matrix()

     

     

     

     

    647-appliquer plusieurs transformation d'un coup

     

     
    translation & rotation
    rotation & translation

     

     

     

     

     

     

    648- animer des transformations

     

     

     
     

     

     

     

    648-EXERCICE- animer des transformations

     

    JACKY-MICKY

     

     

     

     

    micky

    jacky

     

     

     

     

     

     

     

     

     

     

     

    649/1 - les transformations 3D avec "translate3d"

     

     

     

     
     

     

     

     

     

     

    649/2 - les transformations 3D avec "rotate3d"

     

     

     
     

     

     

    65 - CRÉER UN DIAPORAMA

     

     

    651-diaporama avec effet de fondu

     

     

    passer la souris sur l'image pour arrêter le défilement

     
     

     

    652 - diaporama avec défilement des images - dimensions fixes

     

     
     

     

    653 - diaporama avec défilement des images - dimensions adaptables

     

     
     

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :