css Hold animation after it finish -
for example make scale 1 2, , want make hold when gets scale 2, example while user hovers image scaled, possible?
@-webkit-keyframes scale { { transform: scale(1); -ms-transform: scale(1); /* ie 9 */ -webkit-transform: scale(1); /* safari , chrome */ } { transform: scale(1.5); -ms-transform: scale(1.5); /* ie 9 */ -webkit-transform: scale(1.5); /* safari , chrome */ } } @keyframes scale { { transform: scale(1); -ms-transform: scale(1); /* ie 9 */ -webkit-transform: scale(1); /* safari , chrome */ } { transform: scale(1.5); -ms-transform: scale(1.5); /* ie 9 */ -webkit-transform: scale(1.5); /* safari , chrome */ } } div.item:hover { animation: scale 2s; -webkit-animation: scale 2s; }
you can use transition property instead of keyframes animation.
div.item { transform: scale(1); transition: .2s; } div.item:hover { transform: scale(1.5); }
see fiddle example: http://jsfiddle.net/8ehhl/