Solved

CSS Animation

Posted on 2016-08-30
2
55 Views
Last Modified: 2016-09-01
I am trying to transform .hero-text-box img to the bottom of page with fixed position. Here is the DEMO Thanks for any suggestion

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

.hero-text-box img {
  animation: example 3s 0s 1 forwards;
}

@keyframes example {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(.5) translateY(-50px);
  }
}

Open in new window

0
Comment
Question by:mingchih
2 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41777496
It seems that the positioning and the transform/translate are conflicting with one another. Remove the transform/translate, change the left position to 0 and add text-align: center. And change the bottom position to 10px.
.hero-text-box {
  position: fixed;
  bottom: 10px;
  left: 0;
  text-align: center;
  width: auto;
}

Open in new window

Text-align: center; centers the image horizontally in the div which is the width of the window. The left: 50%; and horizontal translate -50% were canceling each other anyway. The vertical translate 50% was overriding the bottom: 10px; style setting.

The issue now may be that the div is positioned at 10px from the bottom before the animation which scales from the center of the image. This leaves the image much more than 10px from the bottom of the screen after the animation. You may be able to compensate for that by changing the animation's translateY to move it down 50% of the original size, giving the appearance that the scale down is relative to the bottom center.
@keyframes example {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(.5) translateY(50%);
  }
}

Open in new window

Please notice that the image has a significant amount of clear space around it which causes the actual position of the visible image to still be much more than 10px from the bottom of the window. The image would have to be edited to remove the extra clear space in order to get the visible part of the image to be 10px from the bottom of the window.
0
 

Author Closing Comment

by:mingchih
ID: 41780405
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Host asp.net pages 5 33
manage footer size 4 50
CSS to create a button that has inward arrows at both ends 1 28
Change div area and length 1 26
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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 …

813 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

15 Experts available now in Live!

Get 1:1 Help Now