Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di Tana
    Registrato dal
    Feb 2004
    residenza
    Reggio Calabria
    Messaggi
    137

    Ripetere parte di un'animazione

    Nella creazione di un'animazione impostiamo i "keyframe" e li facciamo eseguire in loop con l'opzione "infinite".
    E' possibile far ripetere solo parte di un'animazione?

    Aggiungo esempio:

    codice:
      animation: jump 2s linear alternate infinite;
    
    @keyframes jump {
      0%   {transform: translate3d(0,0,0) }
      40%  {transform: translate3d(0,5%,0) }
      100% {transform: translate3d(0,20%,0) }
    }
    Io voglio che al primo passaggio l'animazione vada da 0% a 100%, poi che sia ripetuta in infinite partendo da 40%...
    ...E' possibile?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,863
    Che io sappia non è possibile riprendere il loop da uno specifico keyframe.
    Una soluzione può essere quella di impostare due diverse animazioni, a quel punto puoi applicare la prima animazione per intero, che sia eseguita una sola volta, e la seconda animazione che riparta dal punto finale della prima, con un delay (uguale al tempo stabilito per la prima) e il loop alternato infinito.

    Qui un semplice esempio:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
        <title>Esempio</title>
        <style>
          #ball {
              width: 100px;
              height: 100px;
              border-radius: 50%;
              background: red;
              animation: jump-start .8s ease-in, jump-loop 1s .8s ease-out alternate infinite;
          }
          @keyframes jump-start {
            to    {transform: translate3d(0,20%,0) }
          }
          @keyframes jump-loop {
            from  {transform: translate3d(0,20%,0) }
            to    {transform: translate3d(0,5%,0) }
          }
        </style>
      </head>
      <body>
        <div id=ball></div>
      </body>
    </html>
    Fai sapere se può andare bene. Il codice è abbastanza intuitivo ma se hai dubbi non esitare a chiedere.
    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it L'avatar di Tana
    Registrato dal
    Feb 2004
    residenza
    Reggio Calabria
    Messaggi
    137
    Grazie per la tua risposta!
    Speravo ci fosse in una soluzione specifica per non dover fare molteplici animazioni ma benissimo anche così.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.