examples - css move animation

CSS bucle una animación

Question

Estoy tratando de aprender HTML y CSS pero he encontrado un problema:

<style style="text/css">
    div.slide-slow {
        width: 100%;
        overflow: hidden;
    }

    div.slide-slow div.inner {
        animation: slide-slow 30s;
        margin-top: 0%;
    }

    @keyframes slide-slow {
        from {
            margin-left: 100%;
        }

        to {
            margin-left: 0%;
        }
    }
</style>

<div class="slide-slow">
    <div class="inner">
        <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
    </div>
</div>

Quiero que este CSS se reproduzca y no se detenga cuando se haga. ¿Es posible hacer una función CSS para hacer un bucle?

Answer 1

Creo que solo agregar este código te ayudará ... Esto agregará también la dirección de la animación ...

CSS

div.slide-slow {
   width: 100%;
   overflow: hidden;
}

div.slide-slow div.inner {
   animation: slide-slow 3s;
   margin-top: 0%;
   animation-direction: alternate;
   animation-iteration-count: infinite;
}

Answer 2

Puede agregar la llamada infinita en la propiedad CSS de animation normal.

Para hacer que la animación sea más suave, también recomendaría tener un paso adicional que haga que los peces salgan de la pantalla, simplemente completa la animación, de lo contrario el pez simplemente desaparece.

div.slide-slow {
  width: 100%;
  overflow: hidden;
}
div.slide-slow div.inner {
  animation: slide-slow 3s infinite;
  margin-top: 0%;
}
@keyframes slide-slow {
  from {
    margin-left: 100%;
  }
  75% {
    margin-left: 0%;
  }
  100% {
    margin-left: -15%;
  }
}

<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>

Answer 3

Puedes añadir esta propiedad:

 div.slide-slow div.inner {
      animation-iteration-count:infinite;
 }

Answer 4

Utilice animation-iteration-count: infinite . Limite el bucle con un valor numérico.

<style style="text/css">
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 3s;
    margin-top: 0%;
    animation-iteration-count: infinite;
  }
  @keyframes slide-slow {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: 0%;
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>

Adicional: Para que la sugerencia de Ismael sea lograr una animación de ida y vuelta con un efecto flip, puede usar rotateY(180deg) . Al contrario de voltear en un lugar / posición estática, es mejor rotar el pez como si se estuviera moviendo con el flujo de agua hacia atrás (animación normal). ease-in-out puede ayudar a mantener mejor la función de sincronización. He utilizado el width: 40vw para que la función de rotación sea ligeramente dependiente / vista dependiente del puerto y no gire con demasiado desplazamiento.

Juega con los valores de margen y ancho para lograr una animación adecuada.

<style style="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 15s;
    margin-top: 0%;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    width: 40vw;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }
  @keyframes slide-slow {
    0% {
      margin-left: 85%;
    }
    25% {
      margin-left: 20%;
      transform: rotateY(0deg);
    }
    50% {
      margin-left: -25%;
      transform: rotateY(180deg);
      transform-origin: center center;
    }
    75% {
      margin-left: 50%;
      transform: rotateY(180deg);
    }
    100% {
      margin-left: 85%;
      transform: rotateY(0deg);
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
  </div>
</div>

(Fuente de la imagen: http://www.html.am/images/html-codes/marquees/fish-swimming.gif )