Chrome does not allow the use of a CSS property for hover that has been used for animation

Question

Chrome does not allow the use of a CSS property for hover that has been used for animation

One issue I encountered is that when using a CSS property for animation and then also using the same property for a hover effect in Google Chrome, the hovering effect does not work properly.

Below is the animation code:

@keyframes fadeInUpBig {
  0% {
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

And here's the hover code:

.sImg:hover{
    opacity: 1 !important;
   @include scale(1.2);
}

You can view a working demo of this issue here. In the demo, the 5 round images at the bottom should scale on hover.

html css css-animations

Answer 1

Answer №1

To achieve the desired outcome, add the transform to the container div rather than the img tag as shown below.

.sImgCont:hover {
    opacity: 1 !important;
    -webkit-transform: scale(1.2); /* consider adding other browser prefixes for older versions */
    transform: scale(1.2);
}

Alternatively, you can change the a into a block element by using display: block and apply the transform to it (although this is the least preferred option).

Include the transition to either the div or the a to ensure a smoother transformation effect.

Note that Chrome (webkit) may not support scaling of non-block elements (reference here).

Edit 2: This solution addresses the issue mentioned in your comments.

The problem with the -webkit-animation-fill-mode property lies in using the value both when combining classes animated and fadeInUpBig. Changing it to backwards resolves the issue, as demonstrated in this example (note that forwards does not work either).

Edit 3: Here's a simpler demo showing two transformations applied. The fill mode forwards/both prevents hover transformation compared to backwards.

The conflict arises from only one transformation being allowed per element in CSS. Applying a new transformation to an already transformed element results in issues, explaining why certain modes fail.

Note: While not definitive, this analysis could prove helpful in similar situations.

Answer 2

To achieve the desired outcome, add the transform to the container div rather than the img tag as shown below.

.sImgCont:hover {
    opacity: 1 !important;
    -webkit-transform: scale(1.2); /* consider adding other browser prefixes for older versions */
    transform: scale(1.2);
}