I am trying to apply the below animation of vertical flip but it doesn't work

user_18503990 0
Viewed 29

I have tried applying animation of rotating word vertically with the help of CSS and HTML but it does't work. Can anyone tell me that what is the problem with the code.

.line {
  width: 100%;
  height: 4rem;
  overflow: hidden;
  border: 1px solid black;
  padding: 0;
  margin-bottom: 16px;
}

/* flipping class and key frames*/
keyframes anim-flipX {
  0% {
    opacity: 0;
    transform: rotateX(90def);
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
  }
}
<div class='line'>
    <h2 class='flipX'>flip vertical</h2>
  </div>

css html
2 Answers

You have a couple of things wrong with your syntax. Here is the fixed up version that works. You were missing in @ at beginning of keyframe, missing the animation duration and animation name in the class. There was also a type (def instead of deg).

.line {
  width: 100%;
  height: 4rem;
  overflow: hidden;
  border: 1px solid black;
  padding: 0;
  margin-bottom: 16px;
  animation-duration: 3s;
  animation-name: anim-flipX;
}

/* flipping class and key frames*/
@keyframes anim-flipX {
  0% {
    opacity: 0;
    transform: rotateX(90deg);
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
  }
}
<div class='line'>
        <h2 class='flipX'>flip vertical</h2>
      </div>

user_55654060

You have to add animation-name and animation-duration properties:

.line {
    width: 100%;
    height: 4rem;
    overflow: hidden;
    border: 1px solid black;
    padding: 0;
    margin-bottom: 16px;
    animation-name: anim-flipX;  /* new */
    animation-duration: 2s; /* new */
}

Also you need to add @ before keyframes:

@keyframes anim-flipX {
    0% {
        opacity: 0;
        transform: rotateX(90deg);
    }
    50% {
        opacity: 1;
        transform: rotateX(720deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(720deg);
    }
}

And your animation should work.

user_187047530
Related