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

Хотя я только что узнал, что мой подход, кажется, не совершенен (такой же, как на исходной странице), вам нужно немного удерживать клавишу мыши, иначе анимация остановится, надеюсь, что другие люди смогут это улучшить.