Zoom in and Zoom out in CSS3 in the same animation

Question

Zoom in and Zoom out in CSS3 in the same animation

Navigation

#1 by (0 votes)

0

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 over the div, it decreases to 0.9 and then increases to 1.1 in the same animation.

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

html5 css3

asked by anonymous 07.07.2017 / 16:17

1 answer

Date field register date Connection error with database [duplicate]

score 0 · Answer 1

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

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