Solved

How to animate scale and move image without hover

Posted on 2016-08-26
5
148 Views
Last Modified: 2016-08-30
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
0
Comment
Question by:mingchih
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41772622
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
 

Author Closing Comment

by:mingchih
ID: 41775213
Thanks a lot !!
0
 

Author Comment

by:mingchih
ID: 41775631
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41775685
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
 

Author Comment

by:mingchih
ID: 41776876
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 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