CSS Animation

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

Brian LinDesignerAsked:
Who is Participating?
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
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
 
Brian LinDesignerAuthor Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.