Solved

CSS Animation

Posted on 2016-08-30
6
73 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

919 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now