[英]Accelerate image spinning on hover
我有一張圖片
<div class="spin-image">
<img src="images/color-wheel.png" alt="" />
</div>
及其對應的CSS
.spin-image {
-webkit-animation:spin 10s linear infinite;
-moz-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
-webkit-transition-duration: 2s; /* Safari */
transition-duration: 2s;
}
.spin-image:hover {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
我正在嘗試做的是加速懸停時的圖像旋轉。 動畫有效,但過渡無效。
如果您意識到的話,就好像動畫和懸停動畫是兩個不同的動畫一樣,它們會重置為虛擬的旋轉狀態,以防它們一直在您懸停或不在懸停時一直在運行。 不幸的是,無法為兩個不同動畫持續時間之間的過渡設置動畫。
但是,如果您確實確實需要解決方案,則可以使用過渡和JavaScript間隔對動畫進行編程,以每轉一圈重置位置。 這樣,您可以隨時使用javascript重置屬性和過渡持續時間。
我給你一支筆: http : //codepen.io/vandervals/pen/aONmVL
這是您需要的CSS:
.spin-image img{
transition: transform 2s linear;
transform: rotate(0deg);
}
.spin-image img.hover{
transition: transform 1s linear;
}
和JS:
var vel = 2000;
var degs = 0;
var cat = document.querySelector("img");
function repeat(){
if(vel == 1000){
cat.classList.add("hover");
console.log("hover")
}else{
cat.classList.remove("hover");
console.log("nohover")
}
degs+=360;
cat.style.transform = "rotate("+degs+"deg)";
setTimeout(repeat, vel);
}
repeat();
document.querySelector("img").addEventListener("mouseenter",hovering);
function hovering(){
vel = 1000;
}
document.querySelector("img").addEventListener("mouseleave",nohovering);
function nohovering(){
vel = 2000;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.