Come mettere in pausa durante l'animazione/transizione

Ho un'immagine che desidero allungare per 3 secondi, quindi mettere in pausa per 2 secondi, quindi rimuovere per 3 secondi. Così com'è, non so come metterlo in pausa; il ritardo dell'animazione funziona solo all'inizio dell'animazione, non al centro. Ecco il mio codice:Come mettere in pausa durante l'animazione/transizione

<!DOCTYPE html> 

<html> 

    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Page 2</title> 

    <style type="text/css"> 
    /* Your styles go here */ 
    img { 
     width:200px; 
     height:100px; 
     animation: widthChange 6s; 
     -webkit-animation: widthChange 6s; 
     -moz-animation: widthChange 6s; 
     -0-animation: widthChange 6s; 


    } 

    p {text-align:center} 
    button {margin:20px} 
    .stylized { 
     font-style: italic; 
     border-width: 5px; 
     border-color: yellow; 
     border-style: outset; 
    } 

    @-webkit-keyframes widthChange { 
     0%, 100% {width: 200px;} 
     50% {width: 400px;} 
    } 
    @-o-keyframes widthChange { 
     0%, 100% {width: 200px;} 
     50% {width: 400px;}  } 
    @-moz-keyframes widthChange { 
     0%, 100% {width: 200px;} 
     50% {width: 400px;} 
    } 
    @keyframes widthChange { 
     0%, 100% {width: 200px;} 
     50% {width: 400px;} 

    } 

    </style> 

    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     // jQuery methods go here... 
     $(document).ready(function() { 

     $('img').addClass("loaded"); 
     $('img').addClass("loaded2"); 
     $("#button1").click(function() { 
      $("button").addClass("stylized"); 
      $("#button1").html("Fancy Button 1"); 
      $("#button2").html("Fancy Button 2"); 
      $("#button3").html("Fancy Button 3"); 
     }); 
     }); 

    }); 
    /* Your additional JavaScript goes here */ 
    </script> 
    </head> 

    <body> 
    <img class = "image" src="elephant.jpg" alt="elephant"/> 
    <p><button id="button1">Button 1</button><button id="button2">Button 2</button><button id="button3">Button 3</button></p> 

    </body> 
</html>

fonte

2015-04-26 Frank Tocci

provare qualcosa di simile. Se aggiungi il tempo di pausa al tempo totale (per ottenere 8 secondi anziché 6), quindi calcola il periodo di tempo in cui desideri che l'elemento sia statico (3/8 + 2/8, dove 2/8 è il tempo di pausa di 2 secondi), e quindi rendere l'elemento tornare alla larghezza predefinita alla fine (altri 3/8 del tempo totale), si dovrebbe ottenere una pausa di 2 secondi in mezzo.

Ho utilizzato solo il valore predefinito animation e @keyframes qui. È possibile copiare questo codice nelle altre versioni specifiche del browser per la compatibilità.

animation: widthChange 8s; 

@keyframes widthChange { 
    0% {width: 200px;} 
    37.5% {width: 400px;} 
    62.5% {width: 400px;} 
    100% {width: 200px;} 
}

esempio Stripped-down: http://jsfiddle.net/IronFlare/pjnk6z6f/

fonte

2015-04-26 16:54:12 IronFlare

Si può fare questo con l'aggiunta di fotogrammi chiave, in questo modo:

https://jsfiddle.net/kh3qa3L6/

Esempio:

@-webkit-keyframes widthChange { 
    0%, 100% { 
     width: 200px; 
    } 
    25% { 
     width: 400px; 
    } 
    75% { 
     width: 400px; 
    } 
}

fonte

2015-04-26 16:52:12

Come mettere in pausa durante l'animazione/transizione

risposta

Problemi correlati