<div>
Hi, David: 
 
Thanks a lot. Your answer is exactly what I am looking for. I learn something new today :)
</div>

<div>
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
</div>

<div>
I changed to 
 

<pre><code class="code-10 nolinks" id="code-20-41780860-1">.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);
 }
}
</code></pre>
 
Seems working...
</div>

<div>
You're welcome. 
 
Instead of setting a delay (with animation-delay), you could also add another keyframe: 

<pre><code class="code-10 nolinks" id="code-20-41780914-1">.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);
 }
}
</code></pre>
</div>

<div>
Hello, I got another question relate to this project and post here <a href="https://www.experts-exchange.com/questions/28969353/CSS-for-Safari-only.html" rel="ugc">https://www.experts-exchange.com/questions/28969353/CSS-for-Safari-only.html</a>
</div>

<div>
<div class="content wysiwyg-content">
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 
 
<a href="https://jsfiddle.net/mingchih/tzsydb5v/2/?utm_source=website&utm_medium=embed&utm_campaign=tzsydb5v" rel="ugc">LIVE Demo</a>
</div>
</div>

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 (https://jsfiddle.net/mingchih/tzsydb5v/2/?utm_source=website&utm_medium=embed&utm_campaign=tzsydb5v)

CSS Animation

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.