如何獲得使用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); 
} 

創建了兩個新的規模和向外擴展

來源

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

Answer 2

你能趕上css-animations事件與JavaScript函數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

  • animationstart一個CSS動畫已經開始。
  • animationend一個CSS動畫已完成
  • animationiteration一個CSS動畫重複。
  • transitionstart一個CSS轉換實際上已經開始（在任何延遲後被觸發）。
  • transitioncancelCSS轉換已被取消。
  • transitionendCSS轉換已完成。
  • transitionrunCSS轉換已開始運行（在任何延遲開始之前觸發）。

• Detecting CSS Animation Completion with JavaScript

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