How to animate scale and move image without hover

Hi, experts

I would like to learn how to animate scale image from 100% to 50% and move to a place 50px below without rollover a button

            
<div class="hero-text-box">
 <img src="img/Z_image.png" alt="cta" class="cta">
</div>

Open in new window


.hero-text-box{
    position: absolute;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}     

Open in new window


Thanks
Brian LinDesignerAsked:
Who is Participating?
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
CSS3 animations do not required a button. You simply set up an @keyframes with the properties you want to animate and the values you want them to have at the different stages in your animation. Then you apply that @keyframes configuration to your element by name (example is the name in my solution below) with an animation property which includes the time duration and delay. If you want the animation to occur immediately when the page loads, you would omit the delay. You should also include a number of iterations and the fill-mode (in my solution I've set the fill-mode to move forwards and stop) in the animation configuration.

But I've run into a problem trying to set up an animation according to your requirements because you would need to use a translateY to move the element -50px and you already have a translate(-50%,-50%) on the div element. So I applied the animation to the img instead.
.hero-text-box{
    position: absolute;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.hero-text-box img {
    animation: example 5s 1s 1 forwards;
}
@keyframes example {
	0% { transform: scale(1) translateY(0); }
	100% { transform: scale(.5) translateY(-50px); }
}

Open in new window

1
 
Brian LinDesignerAuthor Commented:
Thanks a lot !!
0
 
Brian LinDesignerAuthor Commented:
I have one more question.... I would like img to end up 10 px above bottom of page and always stay the same position no matter what browser size is.... i try change the number but img would go out the page ... any suggestion ? thanks
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Try using position: fixed; and a bottom position instead of a top position.
position: fixed;
// top: 50%; REMOVE THIS LINE
bottom: 10px;
left: 50%;

Open in new window


Technically this should be asked in a separate question as it does not pertain to the subject of this question. If you need further information, please ask a new question.
0
 
Brian LinDesignerAuthor Commented:
0
All Courses

From novice to tech pro — start learning today.