除了悬停建议之外的css过渡效果onload

Question

I have been playing around with css transition effects. All is working but trying different properties other than :hover .

I am looking for something that transition the div onload, for instance so if I am on the page and I am scrolling down and as soon as I reach the certain div then the transition property applies.

Here is snippet I have been playing around with to get the transition started when hovering over the element, looking for something similar but that loads automatically without hovering:

.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

You will need to use a little Javascript to append a certain class with the appropriate transition properties to your .box container to apply transition on load.

Note that a setTimeout needs to be applied to append the class so that the transition is visible, otherwise the properties just override.

Refer the following demo:

 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

You can make annimation css , automaticly by adding a class to that div , so whether it's :hover or have a class annimation it'll trigger : (use setTimeout to define time to start end animmation )

bellow a working snippet :

 $(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>