Estou tentando fazer uma animação em CSS3 com zoom in, zoom out e transition em CSS3 + HTML. O que eu quero é que ao passar o mouse sobre a div, a mesma diminua para escala 0.9 e depois aumente para 1.1 na mesma animação.
Segue códigos CSS e HTML:
.abc
{
margin:1.5em;
background-color:#ff0;
border:0;
width:196px;
height:210px;
-webkit-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.abc:hover
{
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(0.9);
-webkit-transform: scale(1.1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(0.9);
-ms-transform: scale(1.1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(0.9);
-moz-transform: scale(1.1);
transition: all 200ms ease-in;
transform: scale(0.9);
transform: scale(1.1);
}
<div class="abc">
</div>