Solved

How to animate scale and move image without hover

Posted on 2016-08-26
5
96 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
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
add image on html mail 6 27
innerHTML 7 34
Change Firefox bookmarks menu font size 2 34
Set time on Session (ASP) 14 22
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

860 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