CODEWITHSUNDEEP
cssanimationcss-positionpositioning
Daniel Zaharia
Daniel Zaharia

Reputation: 35

css animations moves element position

I have this problem with my CSS animation. I have an element position absolute centered in the middle of the page and when I put the animation on, it moves to the right and when the animation is finished it moves back to the middle of the page. Here's the code:

@keyframes motto
 from
  opacity: 0
  transform: translate3d(0, -100%, 0)
 to
  opacity: 1
  transform: none

#home
 .motto
  position: absolute
  top: 50%
  left: 50%
  margin-right: -50%
  transform: translate(-50%, -50%)
  animation-name: motto
  animation-duration: 2s
  h1
   margin: 0
   font-size: 42px
   font-weight: 100
   opacity: .5
   -webkit-animation-duration: 2s

Thx in advance!

     @keyframes motto {
       from {
         opacity: 0;
         transform: translate3d(0, -100%, 0);
       }
       to {
         opacity: 1;
         transform: none;
       }
    }
    .motto {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      animation-name: motto;
      animation-duration: 2s;
    }
    .motto h1 {
      margin: 0;
      font-size: 42px;
      font-weight: 100;
      opacity: .5
      -webkit-animation-duration: 2s;
      }
<div class="motto"><h1>css <span>animation</span></h1></div>

Upvotes: 3

Views: 9755

Answers (1)

EGxo
EGxo

Reputation: 315

Use the following line in the CSS of .motto :

animation-fill-mode: forwards;

This sets the element to display as it is in the final frame of the animation.

@keyframes motto {
       from {
         opacity: 0;
         transform: translate3d(0, -100%, 0);
       }
       to {
         opacity: 1;
         transform: none;
       }
    }
    .motto {
      position: absolute;
      width: 400px;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      animation-name: motto;
      animation-duration: 2s;
      animation-fill-mode: forwards;
    }
    .motto h1 {
      margin: 0;
      font-size: 42px;
      font-weight: 100;
      opacity: .5;
      text-align: center;
      }
<div class="motto"><h1>css <span>animation</span></h1></div>

Upvotes: 3

Related Questions