Grow circular image using keyframes and CSS

Question

I'm trying to grow a circular image on hover, but can't get this code to work.

I can get the circle to grow using the CSS transform but it grows immediately and is a bit ugly. Ideally I'd want there to be a 2-3000ms delay with linear growth both on hover and mouse out.

I know I can do this with JS/D3 but need to do it with CSS if possible.

Have tried

.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{

animation: mymove 3s normal;
}
@-webkit-keyframes mymove {
        0%
        {
        width:250px;}

    25%
    {
    width:260px;}

    75%
    {
    width:270px;}

    100%
    {
    width:280px;
    }
}

and

 .wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
@-webkit-keyframes mymove {
        0%
        {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);}
         }
        25%
        {
        -webkit-transform: scale(1.033);
        -ms-transform: scale(1.033);
        transform: scale(1.033);}

        75%
        {
        -webkit-transform: scale(1.066);
        -ms-transform: scale(1.066);
        transform: scale(1.066);}

        100%
        {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        }

But neither are working.

Is there a better way to do this?

Use [**animation-delay**](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) — Paulie_D, May 21 '15 at 15:40
And `transition-timing-function: linear;` if I remember correctly — Morpheus, May 21 '15 at 15:44

Pixelomo · Answer 1 · 2015-05-21T16:12:12.660

1

I've created a pen based on your code

Using transform: scale is a better method since it increases both width and height.

The key thing you missed out on for creating a smooth animation is the transition attribute, this needs to be applied to the element in it's normal state not it's :hover state.

I've added this transition styling:

transition: 3s ease-in-out;

Note that it's the same length as your animation timing. ease-in-out is a standard easing function, if you'd like to get more in-depth try playing around with cubic-bezier

Animation delay can be added easily with this attribute:

animation-delay:2s

Another thing which makes keyframe animations smoother is having the 0% and 100% stylings the same, so in this example the circle returns to the original scale by the time it reaches 100% which creates a nice, smooth, repeatable animation.

I've also created an alternative animation which looks even smoother, this is done by simply setting scale for the 0% and 100% points in the animation:

0%{transform: scale(1)}
100%{transform: scale(2)}

Another thing you can do is change your animation loop setting from normal to infinite alternate, checkout my second example this is using infinite alternate which makes the circle grow and shrink with no sudden snaps.

edited May 21 '15 at 16:12

answered May 21 '15 at 15:47

Pixelomo

6,373
4
47
57

are you using Chrome? I've missed out the browser prefixes, also with regards to reversing the animation on mousleave this answer might help http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover – Pixelomo May 21 '15 at 16:04
I've added vendor prefixes to my second example now – Pixelomo May 21 '15 at 16:08
Actually still not working for me even with the vendor prefixes. I'm using Chrome – Max Holloway May 22 '15 at 09:32
what both demos? there is a 2 second delay as requested so you need to hover for 2 seconds before the animation starts – Pixelomo May 22 '15 at 09:59
Yeah both demos. I thought it might be because I have a touchscreen (which turns :hover into a click event), but it doesn't work on non-touchscreen laptop also. – Max Holloway May 26 '15 at 09:21
so you're seeing no animation at all? – Pixelomo May 26 '15 at 09:23
No nothing at all, just a 250X250 red circle – Max Holloway May 26 '15 at 09:55

score 0 · Answer 2 · answered May 21 '15 at 15:50

You can delay the start of an animation with animation-delay

Such as

.delay {
     animation-delay:2s
}

Reference @ MDN

Demo showing the difference below

.circle {
  border-radius: 50%;
  display: block;
}
.circle:hover {
  animation: mymove 3s normal;
}
.delay:hover {
  animation-delay: 2s
}
@-webkit-keyframes mymove {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
25% {
  -webkit-transform: scale(1.033);
  -ms-transform: scale(1.033);
  transform: scale(1.033);
}
75% {
  -webkit-transform: scale(1.066);
  -ms-transform: scale(1.066);
  transform: scale(1.066);
}
100% {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
@-webkit-keyframes mymove {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.033);
    -ms-transform: scale(1.033);
    transform: scale(1.033);
  }
  75% {
    -webkit-transform: scale(1.066);
    -ms-transform: scale(1.066);
    transform: scale(1.066);
  }
  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<div>
  <img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle" />
</div>

<div>
  <img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle delay" />
</div>

score 0 · Answer 3 · answered May 21 '15 at 15:54

0

You can delay the start of the transition by using the transition-delay property.

div {
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}

W3Schools

answered May 21 '15 at 15:54

matthewelsom

944
1
10
21

Grow circular image using keyframes and CSS

3 Answers3