0

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.

Makie Michaux
  • 1
  • 1

1 Answers1

1

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!

A. Meshu
  • 4,053
  • 2
  • 20
  • 34
  • Thanks for the quick response! The only problem I see with this approach is when you combine all changes with the keyframes, it moves the longer text at the bottom in center alignment with the top as well. I want them to be left aligned and moved to the left....I hope this makes sense – Makie Michaux Jul 10 '19 at 18:42
  • Sorry but i don't exactly understand.. do you want both h1 to be text-align: left? – A. Meshu Jul 10 '19 at 18:53
  • Here, this should give a better example of what I am looking for. Thanks again!https://imgur.com/fZdVsoP – Makie Michaux Jul 10 '19 at 19:00
  • You can change the above to something like that: 99% {-webkit-transform: translateX(-20%); text-align: center; } 100% { text-align: left; }. Not exactly as your imgur since text-align can't be transitioned... If you want to change the markup (for instance two h1 is not semantically correct and i think that span is more suites to act as child from div), you can do something like that: https://stackoverflow.com/questions/18235764/is-it-possible-to-transition-text-alignment-using-css3-only – A. Meshu Jul 10 '19 at 19:47