28182 sujets

CSS et mise en forme, CSS3

[Résolu] Afficher un W avec un effet de fondu

Bonjour,

j'essaye d'Afficher un W avec un effet de fondu. Mon problème c'est que ma lettre s'affiche n'importe comment et je n'arrive pas à avoir l'effet attendu.

Je vous joins un lien de mon code actuel --> https://jsfiddle.net/a2ur8gd5/

Sinon voici les sources du code:


        <section id="global">
  
                <div class="anim">
              
                  <div id="top" class="mask">
                    <div class="plane"></div>
                  </div>
                  
                   <div id="middle-top" class="mask">
                    <div class="plane"></div>
                  </div>
                  
                  <div id="middle" class="mask">
                    <div class="plane"></div>
                  </div>
              
                  <div id="bottom" class="mask">
                    <div class="plane"></div>
                  </div>
                  
                   
                </div>
                  
                <p id="loading-texte"><i>LOADING...</i></p>
                  
              </section>




.anim {
    transform: rotate(90deg);
}

#global {
    width: 70px;
    margin: auto;
    zoom: 1.9;
    margin-top: 100px;
    position: relative;
    cursor: pointer;
    height: 60px;
}

.mask {
    position: absolute;
    border-radius: 2px;
    overflow: hidden;
    perspective: 1000;
    backface-visibility: hidden;
}

.plane {
    background: #2a6fed;
    width: 400%;
    height: 100%;
    position: absolute;
    transform: translate3d(0px, 0, 0);
    /*transition: all 0.8s ease; */
    z-index: 100;
    perspective: 1000;
    backface-visibility: hidden;
}

.animation {
    transition: all 0.3s ease;
}

#top .plane {
    z-index: 2000;
    animation: trans3 3s ease-out infinite 0s backwards;
}

#middle .plane {
    transform: translate3d(0px, 0, 0);
    background: #2358be;
    animation: trans2 3s ease-out infinite 1.5s backwards;
}

#middle-top .plane {
    transform: translate3d(0px, 0, 0);
    background: #2358be;
    animation: trans25 3s ease-out infinite 2s backwards;
}

#bottom .plane {
    z-index: 2000;
    animation: trans1 3s ease-out infinite 2.6s backwards;
}

#top {
    width: 53px;
    height: 20px;
    left: 40px;
    transform: skew(15deg, 0);
    z-index: 100;
    top: -26px;
}

#middle-top {
    width: 33px;
    height: 20px;
    left: 60px;
    top: -10px;

    transform: skew(15deg, -45deg);
}

#middle {
    width: 33px;
    height: 20px;
    left: 60px;
    top: 15px;

    transform: skew(-15deg, 40deg);
}

#bottom {
    width: 53px;
    height: 20px;
    left: 40px;
    top: 30px;
    transform: skew(-15deg, 0);
}

#loading-texte {
    color: white;
    position: absolute;
    top: 70px;
    font-family: Arial;
    text-align: center;
    font-size: 12px;
}

@keyframes trans1 {
    from {
        transform: translate3d(-250px, 0, 0);
    }
    to {
        transform: translate3d(53px, 0, 0);
    }
}

@keyframes trans2 {
    from {
        transform: translate3d(33px, 0, 0);
    }
    to {
        transform: translate3d(-250px, 0, 0);
    }
}

@keyframes trans25 {
    from {
        transform: translate3d(-250px, 0, 0);
    }
    to {
        transform: translate3d(33px, 0, 0);
    }
}

@keyframes trans3 {
    from {
        transform: translate3d(53px, 0, 0);
    }
    to {
        transform: translate3d(-250px, 0, 0);
    }
}
Modérateur
Salut,


Ca a l'air stylé !
Tu cherche a faire quoi exactement ? Parce-que un effet de fondu c'est quand on passe d'une opacité 0 a 1 (ou l'inverse).

Il faut que les 4 parties s'affichent les une après les autres ? Il faut qu'elles disparaissent ensuite ?
Cool oui dans ce genre merci, juste pour info tu pourrais me dire ce qui n'allait pas dans mon code ?
Modérateur
Alors, de mémoire le principal truc qui coinçait était l'utilisation des animation-delay et le timing : Tu avais toutes tes animations qui allaient de "from" à "to" donc de 0% à 100%. mais elles devaient se lancer les unes après les autres. Tu as donc utilisé le delay. C'est une bonne idée, mais le soucis c'est qu'il n'est utilisé qu'une seul fois au lancement et du coup les animations s’enchaînaient mal après. Ce que j'ai fait c'est que j'ai choisi de donner a toutes les animation la même durée sans délai. Pour l'exemple j'ai pris 4s. Et c'est à l'intérieur des animation que j'ai découpé en 4. L'animation 1 par exemple va bouger de 0 à 25% et rester immobile jusqu’à 100%. Ensuite j'ai décalé les autres anim (la 2 de 25 à 50%, la 3 de 50 à 75% et la 4 de 75 à 100%).
De cette façon les animations se déclenchent les une après les autres tout en conservant une durée globale commune.

Après il y avait quelques ajustements mineurs comme le fait de virer le width:400% au profit d'un 100% (pas besoin que le bloc soit plus grand) et de passer les valeurs de translate de "px" à "%" (plus souple, quelque soit la taille)

Je pense que c'est a peu près tout.
Modifié par _laurent (29 Apr 2019 - 11:56)
Sujet clos
Aller à