My animation repeats the movement several times in css-CodePudding

I have an animation that when I hover over the div right at the beginning of the element it repeats all the time, it gets stuck repeating itself.

#servicios {
  text-align : center;
  }
#servicios ul li {
  list-style : none;
  }
.grid-container {
  display               : grid;
  grid-template-columns : auto auto auto;
  column-gap            : 50px;
  justify-content       : space-around;
  }
.grid-item {
  font-family   : system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding       : 20px;
  font-size     : 30px;
  text-align    : center;
  margin-top    : 30px;
  width         : 250px;
  border-radius : 5px;
  box-shadow    : rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  }
.grid-item:hover {
  animation           : desplazamiento 700ms ease-in;
  animation-fill-mode : forwards;
  /* transform-origin: top left; */
  }
.grid-text:active {
  margin-top : 20px;
  }
@keyframes desplazamiento {
  0%   { position: relative; top: 0px;  }
  100% { position: relative; top: 25px; }
  }

<section id="servicios">
  <h2>Servicios</h2>
  <div >
    <div >
      <span >Diseño web</span>
    </div>
    <div >
      <span >Hosting Web</span>
    </div>
    <div >
      <span >Servicios de consultoría en línea</span>
    </div>
  </div>
</section>

I have tried several ways but I do not understand why it stays stuck And sorry for filling in the text in this question, it's that stack doesn't let me post because it says that there is only code in the question, that there is more code than text

CodePudding user response：

This is happening because the element you are hovering over moves out from under your pointer, thus no longer being hovered. You'll want to have a container that doesn't move, and apply the transition to the child (grid-item) of the hover pseudo class for the container.

Note that I've moved margin-top to the grid-item-container and changed the box-sizing for grid-item. I have used transition in lieu of the animation and used transform to move the element. Transition should be used for simple animations, where possible. I've used transform instead of animating the position, because it does not cause reflow, which can affect performance and page layout.

#servicios {
    text-align : center;
}
#servicios ul li {
    list-style : none;
}
.grid-container {
    display               : grid;
    grid-template-columns : auto auto auto;
    column-gap            : 50px;
    justify-content       : space-around;
}
.grid-item {
    font-family   : system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding       : 20px;
    font-size     : 30px;
    text-align    : center;
    margin-top    : 30px;
    width         : 250px;
    height: 100%;
    box-sizing: border-box;
    border-radius : 5px;
    box-shadow    : rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.grid-item-container:hover .grid-item {
    transform: translateY(25px);
    transition: transform .7s;
    cursor: pointer;
}
.grid-text:active {
    margin-top : 20px;
}
.grid-item-container {
    margin-top: 30px;
}

HTML

<section id="servicios">
    <h2>Servicios</h2>
    <div >
        <div >
            <div >
                <span >Diseño web</span>
            </div>
        </div>
        <div >
            <div >
                <span >Hosting Web</span>
            </div>
        </div>
        <div >
            <div >
                <span >Servicios de consultoría en línea</span>
            </div>
        </div>
    </div>
</section>