Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to animate scale and move image without hover

Posted on 2016-08-26
5
Medium Priority
?
343 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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

704 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