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

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>

CodePudding user response：

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>

CodePudding user response：

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.