CODEWITHSUNDEEP
htmlcsscss-animations
youngster
youngster

Reputation: 195

Element offsets after animation is competed

I have some problems with css animation.

I want to make that little plus icon to rotate/spins in center and stops after it is completed. A the moment it works just fine but when animation is done, it offsets to bottom and right.

.link {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
}

.link:after {
  position: absolute;
  top: 0%;
  left: 0%;
  background: blue;
  content: '';
  visibility: hidden;
  height: 100%;
  opacity: 0;
  transition: opacity 280ms ease-in-out;
  width: 100%;
  
}

.link:hover:after {
  visibility: visible;
  opacity: .6;
}

.link:hover:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: spin-plus 500ms 1;
  animation: spin-plus 500ms 1;
  color: white;
  content: '\f067';
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 1.750rem;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  z-index: 10;
}

@keyframes spin-plus {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
<a href="#" class="link">
  <img src="http://via.placeholder.com/150x150" class="image" />
</a>

Everything I have tried didn't fixed this problem. And I run out of ideas.

Upvotes: 0

Views: 33

Answers (1)

Jesse
Jesse

Reputation: 3622

It's because your transform resets back to nothing after the animation. If you add a default transform to your css it works as intended.

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


.link {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
}

.link:after {
  position: absolute;
  top: 0%;
  left: 0%;
  background: blue;
  content: '';
  visibility: hidden;
  height: 100%;
  opacity: 0;
  transition: opacity 280ms ease-in-out;
  width: 100%;
  
}

.link:hover:after {
  visibility: visible;
  opacity: .6;
}

.link:hover:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: spin-plus 500ms 1;
  animation: spin-plus 500ms 1;
  color: white;
  content: '\f067';
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 1.750rem;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
}

@keyframes spin-plus {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
<a href="#" class="link">
  <img src="http://via.placeholder.com/150x150" class="image" />
</a>

Upvotes: 1

Related Questions