Brian Lin
asked on
CSS Animation
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
ASKER
I changed to
Seems working...
.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);
}
}
Seems working...
You're welcome.
Instead of setting a delay (with animation-delay), you could also add another keyframe:
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);
}
}
ASKER
Hello, I got another question relate to this project and post here https://www.experts-exchange.com/questions/28969353/CSS-for-Safari-only.html
ASKER
Thanks a lot. Your answer is exactly what I am looking for. I learn something new today :)