css動畫當按鈕變得活動不起作用

Question

我想爲按鈕做一個css動畫。 不幸的是沒有成功。

請提供一個例子

訪問http://osvaldas.info/image-lightbox-responsive-touch-friendly並點擊演示按鈕，檢查動畫，這就是我想要的。

在此先感謝。

Answer 1

我今天剛學css3，20分鐘搞亂後，我想我有你想要的。所有的核心代碼都來自你的鏈接頁面的源代碼，我只是試圖修補失蹤的，我不得不說這個帖子也改善了我，歡呼！

這裏的CSS部分，HTML結構只有一個<a href="#">Hit Me</a>：

a { 
    display: inline-block; 
    margin: 20px; 
    width: 80px; 
    height: 20px; 
    text-align: center; 
    line-height: 20px; 
    color: aliceblue; 
    background: #08a8e6; 
    position: relative; 
} 

a:active::after{ 
    content: ''; 
    display: inline-block; 
    width: inherit; 
    height: inherit; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    background-color: #08a8e6; 
    animation: expand .25s ease, fade-out 0.25s linear; 
} 

@keyframes expand { 
    from {transform: scale(1)} 
    to {transform: scale(2)} 
} 

@keyframes fade-out { 
    from {opacity: 1} 
    to {opacity: 0} 
} 

這裏的demo

雖然我只是覺得，我的做法似乎並不完美（同原始網頁）你必須按住鼠標鍵一段時間，否則動畫將停止，希望其他人可以改善這一點。