?
Solved

CSS Animation

Posted on 2016-08-30
6
Medium Priority
?
142 Views
Last Modified: 2016-09-12
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
0
Comment
Question by:Brian Lin
  • 4
  • 2
6 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 41779230
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
 

Author Closing Comment

by:Brian Lin
ID: 41780357
Hi, David:

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

Author Comment

by:Brian Lin
ID: 41780844
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Brian Lin
ID: 41780860
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
 
LVL 43

Expert Comment

by:David S.
ID: 41780914
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
 

Author Comment

by:Brian Lin
ID: 41795270
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question