CODEWITHSUNDEEP
htmlcsscss-animations
Makie Michaux
Makie Michaux

Reputation: 1

Combining two animations with pure CSS

I am trying to combine two animations smoothly for the title on the front page of my website to fadeIn and up, then slide to the left with the two 's being left aligned instead of center aligned. When trying to do so, I run into the problem of the two animations either running at the same time or one running over the other.

I have tried adding two separate CSS classes in the tags as well as creating only one to handle both 's. I believe creating two slideLeftTop and slideLeftBottom will work more efficiently because the text is longer at the bottom and the end goal is to have the two 's left-aligned instead of how they are center aligned at the start.

@-webkit-keyframes slideLeftTop{
  0% {
    -webkit-transform: translate3d(0,100%,0);
  }
  100% {
    -webkit-transform: translateX(-20%)
  }
}

https://jsfiddle.net/k2tvur84/1/

I expect the title to fadeIn and up, have a 3-second pause, and then slide to the left about 40% of the page.

Upvotes: 0

Views: 320

Answers (1)

A. Meshu
A. Meshu

Reputation: 4148

You can combine all changes with the keyframe. Is this what you want?

.animated {
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    -ms-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  25% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  70% { -webkit-transform: translate3d(0,100%,0);}
  100% {    -webkit-transform: translateX(-20%)}
}

You can have a look here for this approach. Hope that help!

Upvotes: 1

Related Questions