現在、オープンソースのコードを使用してJavaスクリプト

Question

現在、私が実行しているCSSベースのken burn effectを使用して表示しているCSSアニメーションの背景画像を取得する方法https://codepen.io/anon/pen/VzYRWV

私は、テキストボックスに表示なっている現在の画像を取得する方法を知っていただきたいと思います

上記のデモに示されています。

ご協力ありがとうございます。

Answer 1

試してみてくださいこれらのCSS効果https://jsfiddle.net/ipsjolly/cugLbrfu/4/

.parent.rotate:hover .child, .parent.rotate:focus .child { 
    -ms-transform: rotate(7deg); /* IE 9 */ 
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ 
    transform: rotate(360deg); 
} 
.parent.scalein:hover .child, .parent.scalein:focus .child { 
    -ms-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -webkit-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 
} 
.parent.scaleout:hover .child, .parent.scaleout:focus .child { 
    -ms-transform: scale(0.9); 
    -moz-transform: scale(0.9); 
    -webkit-transform: scale(0.9); 
    -o-transform: scale(0.9); 
    transform: scale(0.9); 
} 

二つの新しい尺度でを作成し、スケールアウトあなたはjavascript関数でcss-animationsイベントをキャッチすることができます

https://css-tricks.com/zooming-background-images/

Answer 2

ソースaddeventlistener

Ex。今

// first image 
var img = document.getElementsByClassName('slideshow-image')[0]; 

// fired on animation start 
img.addEventListener("animationstart",function() { 
    // do stuff here 
    console.log("Animation start"); 
},0); 

、これはうまく機能し、それが と、それを行うことになっているどのようなアニメーションが同時にシーケンシャルが、すべてではないので（ないあなた）例はうまく動作しませんが。 （ステップの代わりにパーセンテージを制御する）

しかし、あなたが探しているものをアーカイブするために、そのアイデアを出して遊ぶことができます。

重要な注記：ベンダー接頭辞は引き続き使用されます。

その他の参照：

• Event reference

  • animationstartCSSアニメーションが開始されました。
  • animationendCSSアニメーションは、CSSアニメーションが繰り返される
  • animationiteration完了しました。
  • transitionstartCSSトランジションが実際に開始されました（遅延後に起動されました）。
  • transitioncancelCSSトランジションがキャンセルされました。
  • transitionendCSSの移行が完了しました。
  • transitionrunCSSの移行が開始されました（遅延開始前に起動）。

• Detecting CSS Animation Completion with JavaScript

• CSS Animation Events
• SO tag addeventlistener
• SO tag css animations