CODEWITHSUNDEEP
htmlcssanimation
Chrillewoodz
Chrillewoodz

Reputation: 28328

Adding animation to arrow appears to change the element's central point

I got an arrow in a banner section of my site which is supposed to be centered. However, as soon as I add the bounce effect to it the central point of the element appears to change so its left side is centered instead of the element's center. I've been searching for an answer for this but haven't found anyone who has had the same issue. How could I fix this?

The arrow:

<div id="banner">
    <img src="<?php echo get_field('arrow_icon', $homepage); ?>" id="site-banner__arrow">
</div>

The bounce animation:

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%);
  }
    60% {
    -webkit-transform: translateY(60%);
    transform: translateY(60%);
  }
}

The css for the arrow:

#site-banner__arrow {
  position: absolute;
  bottom: 10%;
  -webkit-transform: translateY(-10%);
  -ms-transform:     translateY(-10%);
  transform:         translateY(-10%);
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform:     translateX(-50%);
  transform:         translateX(-50%);
  width: 60px;
  height: 60px;
  cursor: pointer;
  -webkit-animation: bounce 1.5s infinite;
  -moz-animation:    bounce 1.5s infinite;
  -o-animation:      bounce 1.5s infinite;
  animation:         bounce 1.5s infinite;

  &:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state:    paused;
    -o-animation-play-state:      paused;
    animation-play-state:         paused;
  }
}

Upvotes: 0

Views: 109

Answers (1)

Paulie_D
Paulie_D

Reputation: 115047

As @Pepo_rasta has stated your multiple transform statements are overriding one another.

This includes the animation so the answer is to make sure you keep all the transforms together is single statements.

.center {
  height: 100vh;
  width: 1px;
  position: absolute;
  left: 50%;
  background: red;
}
#site-banner__arrow {
  position: absolute;
  bottom: 10%;
  -webkit-transform: translate(-50%, -10%);
  -ms-transform: translate(-50%, -10%);
  transform: translate(-50%, -10%);
  left: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  -webkit-animation: bounce 1.5s infinite;
  -moz-animation: bounce 1.5s infinite;
  -o-animation: bounce 1.5s infinite;
  animation: bounce 1.5s infinite;
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
  }
  40% {
    -webkit-transform: translate(-50%, 4%);
    -webkit-transform: translate(-50%, 4%);
  }
  60% {
    -webkit-transform: translate(-50%, 60%);
    -webkit-transform: translate(-50%, 60%);
  }
}
<div id="banner">
  <img src="http://lorempixel.com/output/abstract-q-c-75-75-1.jpg" id="site-banner__arrow" />
</div>

<div class="center"></div>

It should be noted that this makes the code somewhat easier to write and read than multiple statements since this

  -webkit-transform: translate(-50%, -10%);
  -ms-transform: translate(-50%, -10%);
  transform: translate(-50%, -10%);

could also be written as 

  -webkit-transform: translateX(-50%) translateY(-10%);
  -ms-transform: translateX(-50%) translateY(-10%);
  transform: translateX(-50%) translateY(-10%);

I also seem to recall that Safari may have (have had?) issues with separated transform statements.

Upvotes: 1

Related Questions