css effet de transition onload autre que les suggestions de vol stationnaire

Question

J'ai joué avec les effets de transition css. Tout fonctionne mais en essayant différentes propriétés autres que :hover.

Je cherche quelque chose que la transition de la div onload, par exemple si je suis sur la page et je défilement vers le bas et dès que je l'atteins certains div alors la propriété de transition s'applique.

est snippet I ici ont été jouer avec pour obtenir la transition a commencé en vol stationnaire au-dessus de l'élément, à la recherche de quelque chose de similaire, mais qui se charge automatiquement sans vol stationnaire:

.box { 
    border-style: solid; 
    border-width: 1px; 
    display: block; 
    width: 760px; 
    height: 760px; 
    background-image: url("1.png"); 
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, background-color 2s, transform 2s; 
    padding-bottom:20px; 
} 

.box:hover { 
    background-image: url("1.png"); 
    width: 760px; 
    height: 760px; 
    -webkit-transform: rotate(180deg); 
    transform: rotate(-2deg); 
    padding-bottom:20px; 
} 

Answer 1

Vous aurez besoin d'utiliser un peu Javascript pour ajouter une certaine classe avec les propriétés de transition appropriées à votre conteneur .box pour appliquer la transition au chargement.

Notez qu'un setTimeout doit être appliqué pour ajouter la classe de façon à ce que la transition soit visible, sinon les propriétés remplacent simplement.

Consulte la démonstration suivante:

setTimeout(function() { 
 
    document.getElementsByClassName("box")[0].classList.add("transitionBox"); 
 
}, 100);

.box { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: block; 
 
    width: 760px; 
 
    height: 760px; 
 
    background-image: url("1.png"); 
 
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; 
 
    transition: width 2s, height 2s, background-color 2s, transform 2s; 
 
    padding-bottom: 20px; 
 
} 
 

 
.transitionBox { 
 
    background-image: url("1.png"); 
 
    width: 760px; 
 
    height: 760px; 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(-2deg); 
 
    padding-bottom: 20px; 
 
}

<div class="box"></div>

Answer 2

Vous pouvez faire annimation css, automaticly en ajoutant une classe à cette div, de sorte que ce soit :hover ou une classe annimation il va déclencher : (utilisez setTimeout pour définir l'heure de début de l'animation de fin)

Ci-dessous un extrait de travail:

$(function() { 
 
    setTimeout(function() { 
 
    $(".box").addClass("annimation"); 
 
    }, 500) 
 
    setTimeout(function() { 
 
    $(".box").removeClass("annimation"); 
 
    }, 3000) 
 
})

.box { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: block; 
 
    width: 360px; 
 
    height: 360px; 
 
    background-image: url("http://www.wallpaperstop.com/wallpapers/flower-wallpapers/flower-imag-336x210-0111.jpg"); 
 
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; 
 
    transition: width 2s, height 2s, background-color 2s, transform 2s; 
 
    padding-bottom: 20px; 
 
} 
 

 
.box.annimation, 
 
.box:hover { 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    padding-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 

 
</div>