AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Partie 2 - Etape 8 : Les Transitions

    Partagez
    Angelusia
    FémininAge : 31Messages : 1159

    le Ven 15 Mar 2013 - 23:49

    Les Transitions



    Voilà enfin ma partie.

    Si j'ai des oublie, faites moi signe ^^

    Les transitions ? Qu'est-ce que c'est ? Et particulièrement, quelle est son utilité ?

    Les transitions sont les propriétés qui agissent directement ou indirectement sur vos images, vos blocs ou simplement vos écritures.

    Il en existe plusieurs qui ont chacune leur fonctionnalité.

    Les voicis :

    - transition-property  : elle agit directement sur les propriétés comme height, width et background
    - transition-duration : celle-ci contrôle la durée de l'animation.
    - transition-timing-function : ici, c'est la courbe de vitesse de la transition qui est concernée, accélération ou non.
    - transition-delay : cette transition concerne le départ de l'effet.


    Transition-Property



    La transition-property influence directement les éléments d'un bloc que ce soit la largeur, la taille, le fond en lui-même lorsqu'on positionne directement sa souris dessus (hover).

    Jusqu'ici, cela peut paraître nébuleux.

    Imaginons, nous avons un rectangle des plus communs. Nous voudrions faire en sorte qu'il s'agrandisse en taille et en largeur lorsqu'on positionne la souris sur le bloc. . Nous créons donc notre CSS de base et le css d'effet de survol de la souris.

    Nous avons donc.

    Code:
    /* rectangle transition*/

    .rectangle {width: 200px;
    height: 100px;
    background-color: #000000;}

    /*Effet au survol de la souris*/

    .rectangle:hover {transition-property  : width, height, background-color;
    width: 400px;
    height: 200px;
    background-color: #ffffff;}

    Code:
    <div class="rectangle"></div>

    Nous obtiendrons.



    C'est plus parlant que des mots.

    Cet effet ne s'arrête pas qu'à des carrés, des rectangles, des ronds. Il s'étend aussi aux chiffre, nombres, lettres.

    Voici un exemple avec les mots : Never Utopia. Une class avec une largeur, un surlignement en pointillé. Au survol, un changement de couleur et de taille. Ce qui donne.

    Code:
    /*titre transition*/

    .titre_transition {font-size: 15px;
    border-bottom: 2px #000000 dotted;
      width: 200px;}

    .titre_transition:hover {font-size: 18px;
      transition-property  : width, font-size, border;
    border-bottom: 3px #ffffff dotted;
      width: 300px;}

    Html

    Code:

    <div class="titre_transition">Never Utopia</div>

    Never Utopia


    Vous connaissez maintenant son effet.


    Transition-duration



    La transition-duration, comme son nom l'indique, est une propriété qui possède une certaine influence sur le temps. Elle agit sur la durée d'activation de l'effet au passage de la souris. Sans elle, la plupart des effets vous paraîtront invisible. Pour n'en citer qu'un, la propriété rotate à 360°.

    Ce qui nous intéresse présentement, c'est qu'est ce qui se passerait si nous rajoutons cette propriété à nos cas suscités plus haut : le rectangle et le titre.

    Nous rajoutons donc la propriété, en prenant attention au préalable, à tous les navigateurs existants. Et nous le nommons durée. Cela nous donne.

    Code:
    /* rectangle transition*/

    .durée {-o-transition-duration: 2s;
    webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    transition-duration: 2s;}


    Nous le rajoutons à notre html. Ce qui nous donne donc.

    Code:
    <div class="durée rectangle"></div>

    Nous obtiendrons l'effet suivant. Comme vous pouvez le constater, l'agrandissement  du rectangle se réalise de manière plus légère.



    Et pour le titre.

    Never Utopia


    Code:
    <div class="titre_transition">Never Utopia</div>

    Ces effets ci-dessus peuvent être remplacés par d'autres.  Tentez l'expérience de la durée en utilisant à la place du width, un transform: letter-spacing ou avec un margin. :)


    Transition-timing-function



    La transition-timing-function influence le bloc, mais d'une façon assez spéciale. Elle contrôle la courbe de vitesse : accélération, lenteur. Selon la propriété, l'effet change.

    Cette transition comporte plusieurs propriétés. Les voici.

    linear : La vitesse est constante sur toute la durée de l'animation.
    ease : Rapide sur le début et ralenti sur la fin.
    ease-in : Lent sur le début et accélère de plus en plus vers la fin.
    ease-out : Rapide sur le début et décélère sur la fin.
    ease-in-out : Le départ et la fin sont lents.
    cubic-bezier(x,x,y,y) : Vous définissez vous même la courbe.

    Afin de pouvoir mieux en cerner son effet, nous allons reprendre notre cas. Puis, nous lui rajoutons par exemple, la propriété cubic-bezier.

    Code:
    /*transition timing function*/

    .transition2 { -webkit-transition-timing-function: cubic-bezier(0,0,1,1);
           -moz-transition-timing-function: cubic-bezier(0,0,1,1);
            -ms-transition-timing-function: cubic-bezier(0,0,1,1);
             -o-transition-timing-function: cubic-bezier(0,0,1,1);
                transition-timing-function: cubic-bezier(0,0,1,1);}

    Code:
    <div class="durée rectangle transition2"></div>

    Ce qui nous donne.




    Transition delay



    La propriété transition-delay influence le départ, plus principalement quand l'effet débute au passage de la souris. Il peut être retardé ou au contraire avancé.

    Pour mieux se donner une idée, nous reprendrons le cas du rectangle. Nous lui rajoutons la propriété transition-delay compatible avec tous les navigateurs. Ce qui nous donne.

    Code:
    /*transition delay*/

    .transition3 {   -webkit-transition-delay: 1s;
           -moz-transition-delay: 1s;
            -ms-transition-delay: 1s;
             -o-transition-delay: 1s;
                transition-delay: 1s;
    }

    Code:
    <div class="durée rectangle transition2 transition3"></div>



    Petits Conseils



    Toute les étapes sur les transitions peuvent être regroupées en une et unique propriété que vous verrez ci-dessous.

    Code:
    -moz-transition: property duration timing-function delay;
    -o-transition: property duration timing-function delay;
    _webkit-transition: property duration timing-function delay;
    transition: property duration timing-function delay;

    Mot de la fin



    Voilà, vous connaissez le secret des transitions. Avec un peu de curiosité, vous pouvez même tester autre chose. ^^ Comme avec les padding, l'espacement de lettres, les margins. Vous verrez, ce n'est pas difficile.

    Tutoriels utilisant des transitions



    - Catégories aux descriptions cachées derrière l'illustration
    - Défilement sur un titre
    - Page d'accueil Mozaik
    - Mise en forme complète du profil "upside down"

    Sites parlant de transition




    - http://creer-un-site.fr/propriete-transition-en-css3-270.php
    - http://css.mammouthland.net/css3/animation-transition.php
    - http://www.css3create.com/Les-Transitions

    Voir le sujet sur les positionnements et les z-index, par Scavenger


    Dernière édition par Angelusia le Mer 3 Avr 2013 - 15:08, édité 17 fois
    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Mer 22 Oct 2014 - 14:19

    Superbe tuto très facile à comprendre et réaliser, merci.



    Just want to be yours.
    sica3
    MasculinAge : 43Messages : 135

    le Sam 29 Nov 2014 - 1:38

    thank's
    Claclou02
    FémininAge : 18Messages : 46

    le Jeu 12 Fév 2015 - 17:55

    merci
    1XMisterX1
    MasculinAge : 18Messages : 423

    le Lun 16 Fév 2015 - 21:58

    Merci beaucoup pour ce tuto ! Very Happy
    Très utile et bien expliqué !
    Yukimura Esuki
    MasculinAge : 20Messages : 106

    le Ven 14 Aoû 2015 - 22:36

    Bonsoir et merci beaucoup pour ce tuto' !

    J'avais une question par-rapport par-rapport aux propriétés de transitions.

    Quelles seraient les conséquences si nous n'ajoutions pas les propriétés "-webkit-" ; "-moz-" ; "-o-" ; "-ms-" ?

    Je vous remercie d'avance !
    Nartiifiice
    FémininAge : 18Messages : 88

    le Jeu 5 Nov 2015 - 16:50

    thanks
    Invité

    le Ven 20 Nov 2015 - 14:33

    très bien expliqué merci !
    Shoki
    FémininAge : 15Messages : 1276

    le Mer 2 Déc 2015 - 13:32

    Merci !





    Mlle-C
    FémininAge : 21Messages : 20

    le Lun 11 Jan 2016 - 1:47

    Merci beaucoup pour ce sujet clair et précis.
    Akiyuki
    MasculinAge : 18Messages : 89

    le Jeu 3 Mar 2016 - 21:21

    Merci !
    Hakial
    MasculinAge : 20Messages : 37

    le Mer 9 Nov 2016 - 13:03

    Merci pour le tuto!
    Seohyunnie
    FémininAge : 20Messages : 22

    le Ven 25 Nov 2016 - 21:29

    Merci bien pour ce tuto très utile ^^
    Contenu sponsorisé

    Aujourd'hui à 0:56


      La date/heure actuelle est Ven 9 Déc 2016 - 0:56