CSS Animation

Hi, Experts

I am trying to create this simple CSS animation. I would like the CTA image to move toward bottom of page and stay there no matter what browser size is.... I adjust the number without success, thanks for advises. I have created a live demo below

LIVE Demo
Brian LinDesignerAsked:
Who is Participating?
 
David S.Connect With a Mentor Commented:
I recommend positioning and sizing the image to work for the final frame and then setting the first frame of the animation to appear larger and near the middle of the screen, using the viewport height unit ("vh"): https://jsfiddle.net/tzsydb5v/4/
0
 
Brian LinDesignerAuthor Commented:
Hi, David:

Thanks a lot. Your answer is exactly what I am looking for. I learn something new today :)
0
 
Brian LinDesignerAuthor Commented:
I got a question tho, if I would like to delay start img for few seconds, how do I position the img to be in the center ? thanks
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Brian LinDesignerAuthor Commented:
I changed to

.hero-text-box{
    position: fixed;
    width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    overflow: visible;
}     

.hero-text-box img {
    animation: example 2s 5s 0.8 forwards;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
}

@keyframes example {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
      transform: scale(0.5) translateY(79vh);
  }
}

Open in new window


Seems working...
0
 
David S.Commented:
You're welcome.

Instead of setting a delay (with animation-delay), you could also add another keyframe:
.hero-text-box img {
    animation: example 7s 0.8 forwards;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
}

@keyframes example {
  0% {
    transform: scale(1) translateY(0);
  }
  28.6% {
    transform: scale(1) translateY(0);
  }
  100% {
      transform: scale(0.5) translateY(79vh);
  }
}

Open in new window

0
 
Brian LinDesignerAuthor Commented:
Hello, I got another question relate to this project and post here https://www.experts-exchange.com/questions/28969353/CSS-for-Safari-only.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.