缶CSSの移行が終了状態を保持する変換

Question

アニメーションはただ、それを行うことができます？

-webkit-animation-fill-mode: forwards; 

が、「トランジション」を、私はホバー状態の使用「転移」

内のdiv「末端」を聞かせて何ができますか

.div-box{ 
     position: relative; 
     top:0; 
     left: 0; 
     width: 100px; 
     height: 100px; 
     background: red; 
     transition:all 1s linear ; 
    } 
    .div-box:hover{ 
     transform: translate(100px,0); 
    } 

Answer 1

あなたは一種の次のトリックで、あなたが必要とする動作をエミュレートすることができます：マウスを除去した後

.div-box{ 
     position: relative; 
     top:0; 
     left: 0; 
     width: 100px; 
     height: 100px; 
     background: red; 
     transition:all 1s linear 99999s; /* huge delay for non-hovered state! */ 
    } 
    .div-box:hover{ 
     transform: translate(100px,0); 
     transition:all 1s linear; /* immediate transition start on hover */ 
    } 

Answer 2

はい、純粋なCSSを使用したいものに近いものを実行できます。あなたのCSSに次のものを追加すると、オブジェクト上にホバーされている限りアニメーションが実行され、アニメーションが完了すると停止します。

.div-box { 
    -webkit-animation-fill-mode: forwards; 
    animation-play-state: paused; 
} 

.div-box:hover { 
    animation-play-state: running; 
}