ホバーの提案以外のCSSトランジション効果のロード

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

あなたは少しJavascriptを使用する必要があります。ここでは

は、私は、要素の上にホバリング時に遷移が始めるためにで遊んで似た何かを探していたが負荷が自動的にホバリングせずにいることをされているスニペットです適切な遷移プロパティを持つ特定のクラスを.boxコンテナに追加して、ロード時に遷移を適用します。

遷移が表示されるように、クラスを追加するにはsetTimeoutを適用する必要があります。それ以外の場合は、プロパティがオーバーライドされます。

次のデモ参照してください：それは:hoverだかクラスannimationを持っているかどうか、それが引き金ますのであなたは、自動にそのdiv要素にクラスを追加することにより、annimation CSSを作ることができ

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>