Home>

css - i want to stop moving with the animation

code
<body>
     
      
</body>
css}
@keyframes line {
  0% {
    width: 1px;
    height: 0px;
    background: 000;
    position: relative;
    top: 0
  }
  50% {
    width: 1px;
    height: 50px;
    position: relative;
    top: 0
  }
  75% {
    width: 1px;
    height: 0px;
    position: relative;
    top: 50px
  }
  100% {
    width: 1px;
    height: 0px;
    position: relative;
    top: 50px
  }
}

html

Up to the next element (img element) will move up and down with the animation.
Why does the img tag move without animation?

css
  • Answer # 1

    Would you set margin-bottom to compensate for the height?

    0% {
    height: 0px;
    margin-bottom: 50px;
    top: 0px;
  }
  50% {
    height: 50px;
    margin-bottom: 0px;
    top: 0px;
  }
  / * And so on */

  • Answer # 2


    Because the height of has changed.

Related articles