Solved

CSS Animation

Posted on 2016-08-30
6
83 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:mingchih
  • 4
  • 2
6 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 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:mingchih
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:mingchih
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
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

Author Comment

by:mingchih
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 42

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:mingchih
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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 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