CSS - 刪除啓動動畫

在問我這個問題之前，讓我解決這個問題。我不想使用jQuery。CSS - 刪除啓動動畫

我想這個菜單，像這樣的hover增長和收縮：

@keyframes menugrow { 
    0% { 
    width:25px; 
    height:25px; 
    } 
    25% { 
    width:20%; 
    height:25px; 
    } 
    100% { 
    height:100vh; 
    width:20%; 
    } 
}

，並縮小我不喜歡這樣：

@keyframes menushrink { 
    0% { 
    width:20%; 
    height:100vh; 
    } 
    75% { 
    width:20%; 
    height:25px; 
    } 
    100% { 
    height:25px; 
    width:25px; 
    } 
}

而這裏就是我要激活這兩個：

.menu { 
    background:#1a1a1a; 
    width:25px; 
    height:25px; 
    animation: menushrink 0.3s linear; 

} 
.menu:hover { 
    animation: menugrow 0.3s linear; 
    height:100vh; 
    width:20%; 
}

我想要的只是當頁面加載時沒有動畫。這是JSBin project。

來源

2015-08-16 justanotherbadprogrammer

有一個在我的Chrome沒有啓動動畫。 – gzc

我在頁面加載時沒有收到任何啓動動畫。 –

沒有開始動畫！你使用的是什麼瀏覽器？ –

我知道這很奇怪，我正在回答我自己的問題。

感謝@ Daemedeor，我想出了答案。 Here's the final result。我做的是我把onmouseout指向我的Javascript功能menuout()（顯然你可以改變這一點，我只是選擇了這個名字）。我的JavaScript代碼結束了：

function menuout() { 
    document.getElementById("menu").className += " menuanimate"; 
}

而我的HTML代碼爲：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Menu</title> 
</head> 
<body> 
    <div class="menu" onmouseout="menuout()" id="menu"> 
</div> 
</body> 
</html>

最後但並非最不重要的我的CSS：

@keyframes menugrow { 
    0% { 
    width:50px; 
    height:50px; 
    } 
    25% { 
    width:30%; 
    height:50px; 
    } 
    100% { 
    height:100vh; 
    width:30%; 
    } 
} 
@keyframes menushrink { 
    0% { 
    width:30%; 
    height:100vh; 
    } 
    75% { 
    width:30%; 
    height:50px; 
    } 
    100% { 
    height:50px; 
    width:50px; 
    } 
} 
.menu { 
    background:#1a1a1a; 
    width:50px; 
    height:50px; 
} 
.menu:hover { 
    animation: menugrow 0.3s linear; 
    height:100vh; 
    width:30%; 
} 
body { 
    margin:0px; 
} 
.menuanimate { 
    animation:menushrink 0.3s linear; 
}

來源

2015-09-20 17:26:13 justanotherbadprogrammer

CSS - 刪除啓動動畫

回答

相關問題