Solved

CSS Animation

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

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

758 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