Zoom in and Zoom out CSS3 in the same animation

Question

I’m trying to make an animation in CSS3 with zoom in, zoom out and Transition in CSS3 + HTML. What I want is that by hovering the mouse over the div, it will scale down to 0.9 and then increase to 1.1 in the same animation.

Follows CSS and HTML codes:

.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>

Answer 1

Since I managed to solve it, I will answer my question to help others.

Follows the code:

  div{
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin: 1em;
    -webkit-transition: transform .1s;
    transition: transform .1s;
  }

div:hover{
  -webkit-animation: pulse .25s;
  animation: pulse .25s;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}
@keyframes pulse {
    0%   {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    }
    50%  {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    -moz-transform: scale(.8);
    transform: scale(.8);
    }
    100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    }
}

<div>

</div>