如何获得使用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