CSS Animation

Brian Lin
Brian Lin used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
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/
Brian LinDesigner

Author

Commented:
Hi, David:

Thanks a lot. Your answer is exactly what I am looking for. I learn something new today :)
Brian LinDesigner

Author

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
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Brian LinDesigner

Author

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...
David S.Consultant & Challenge Subduer
Top Expert 2009

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

Brian LinDesigner

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial