호버 제안 이외의 CSS 전환 효과 onload

Question

저는 CSS 전환 효과로 놀아 왔습니다. 모두 작동하지만, :hover 이외의 다른 속성을 시도했습니다.

예를 들어, div에 onload를 전환하는 무언가를 찾고 있는데, 페이지에있는 상태에서 아래로 스크롤하면 특정 div에 도달하면 전환 속성이 ​​적용됩니다.

.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

당신은 약간의 자바 스크립트를 사용해야합니다 : 여기

내가 유혹없이 자동으로 부하를 요소 유혹 할 때, 시작 전환을 얻을 놀아 비슷한 뭔가를 찾고 있지만, 한 니펫 적절한 전환 속성이있는 특정 클래스를 .box 컨테이너에 추가하여로드시 전환을 적용합니다.

전환을 표시 할 수 있도록 클래스를 추가하려면 setTimeout을 적용해야합니다. 그렇지 않으면 속성이 무시됩니다. 당신이 :hover을의 여부, 그래서를 automaticly 그 DIV에 클래스를 추가하여, annimation의 CSS를 만들거나 실행할 수 있습니다 클래스 annimation을 가질 수

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

:

은 다음과 데모를 참조하십시오 : (종료 애니메이션을 시작하기위한 시간을 정의하기 위해 setTimeout을 사용하십시오)

작업 스 니펫 :

,

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