CODEWITHSUNDEEP
csscss-transitionscss-animationscss-transforms
DimNC
DimNC

Reputation: 130

Animation then transform, two successive animations

I'm trying to make a div bounce (1st animation), then come up (2nd animation). So, there are two animations. The first one is ok, but the div doesn't go to the last position. 

$(window).scroll(function(){

if($(document).scrollTop() > $(document).height() - $(window).height() - $('.link').height()){
    $('.link').addClass('boom');
}
});
.link {
  height: 250px;
  max-width: 900px;
  margin: auto;
  padding: 20px;
  background: lightblue;
  border-radius: 7px;
  box-shadow: 0px 2px 10px rgba(0, 30, 50, 0.4);
  
  transform: translateY(300px); 
  
  animation: bounce 0.5s cubic-bezier(0.63, 0.09, 0.75, 0.46) 0s alternate 9;
  
  transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1);
  transition-delay: 10s;
}


@keyframes bounce {
  0% {
    transform: translateY(230px);
  }
  100% {
    transform: translateY(170px);
  }
}

.link.boom {
  transform: translateY(100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=link></div>

How could it be done?

Thanks!

Upvotes: 1

Views: 365

Answers (1)

DimNC
DimNC

Reputation: 130

Well, I've got the answer, and there's no need for JS: 

.link {
  height: 250px;
  max-width: 900px;
  margin: auto;
  padding: 20px;
  align-items: center;
  transform: translateY(90px);
  border-radius: 7px;
  box-shadow: 0px 2px 10px rgba(0, 30, 50, 0.4);
  animation: breathing 3s ease-in-out alternate infinite, bounce 500ms cubic-bezier(0.63, 0.09, 0.75, 0.46) 0s alternate 9, boom 600ms ease-out 4.5s;
}


@keyframes breathing {
  0% {
    background-color: lightblue;
  }
  100% {
    background-color: black;
  }
}


@keyframes bounce {
  0% {
    transform: translateY(230px);
  }
  100% {
    transform: translateY(170px);
  }
}

@keyframes boom {
  0% {
    transform: translateY(170px);
  }
  100% {
    transform: translateY(90px);
  }
}
There's a little glitch that is not on my website… Weird…
<div class="link"></div>

Upvotes: 1

Related Questions