Solved

CSS Animation

Posted on 2016-08-30
2
53 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

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
jquery, html5 UI 1 61
css, html 6 50
How to add loader animation to a page ? 2 40
Angular JS Route 3 50
"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 applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

910 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

20 Experts available now in Live!

Get 1:1 Help Now