Solved

How to animate scale and move image without hover

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Blog posts not showing up on Blog page 7 51
[HTML] Graphic not centered on page 4 45
JavaScript: Issue with onClick 5 35
P tag not forcing line space 2 22
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now