Простой пример: кнопка уменьшается по :active, при помощи заанимированного трансформа scale: http://jsfiddle.net/3gTUX/2/
@-webkit-keyframes reduction {
100% {
-webkit-transform: scale(.8);
}
}
div {
display: inline-block;
padding: 0 20px;
border-radius: 25px;
background: #800080;
height: 50px;
line-height: 50px;
font-size: 20px;
color: #fff;
cursor: pointer;
transition: -webkit-transform .3s ease;
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -100px;
}
div:hover {
background: #990099;
}
div:active {
-webkit-animation: reduction .1s ease 1 forwards;
}
<div>Hello, transform</div>
Чтобы анимация проигралась до конца в этом примере кнопку нужно держать нажатой, не отпускать кнопку мыши.
Подскажите, пожалуйста, возможноли сделать так, что бы анимация проигрывалась до конца, даже если пользователь просто быстро кликнул по кнопке?
UPD: понятно, что можно JS-ом добавить класс .stand-by, например, и через секунду его снять и на этот класс уже повесить анимацию. Но хотелось бы ограничиться CSS-ом.