'css animation on fixed and centred element jump about when animating

I have a fixed element that it centered like this

.cen-div
  position: fixed!important
  top: 50%!important
  right: 50%!important
  transform: translate(50%, -50%)!important

then I have a keyframe animation that scales the element.


.modal-animation
  animation: ping-open ease-in-out
  animation-duration: .25s
  animation-iteration-count: 1

@keyframes ping-open
  0%
    transform: scale(.95)
  100%
    transform: scale(1)

When it plays the element jumps to a different position then finally rests back to its correct and original place.

Does any one know why?

csssass


Solution 1:[1]

add translate(50%, -50%) also to animation keyframes

@keyframes ping-open
  0%
    transform: translate(50%, -50%) scale(.95)
  100%
    transform: translate(50%, -50%) scale(1)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sheng Huang

Related Questions