Wie während Mitte des Animation/Übergangs pausieren

Ich habe ein Bild, das ich für 3 Sekunden strecken will, dann Pause für 2 Sekunden, dann für 3 Sekunden unstretch. So wie es aussieht, weiß ich nicht, wie ich es pausieren soll; Animation-Verzögerung funktioniert nur am Anfang der Animation, nicht die Mitte. Hier ist mein Code:Wie während Mitte des Animation/Übergangs pausieren

<!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>

Quelle

2015-04-26 Frank Tocci

Versuchen Sie so etwas wie dieses. Wenn Sie in der Pausenzeit zur Gesamtzeit (um 8 Sekunden statt 6) hinzufügen und dann die Zeit berechnen, die Sie das Element wollen statisch sein (3/8 + 2/8, wobei 2/8 ist die 2 Sekunden Pause Zeit), und dann am Ende auf die Standardbreite (weitere 3/8ths der Gesamtzeit) das Element Rückkehr machen Sie eine Pause von 2 Sekunden zwischen bekommen sollten.

habe ich nur die Standard-animation und @keyframes hier. Sie können diesen Code in den anderen browserspezifischen Versionen für die Kompatibilität kopieren.

animation: widthChange 8s; 

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

abgespeckte Beispiel: http://jsfiddle.net/IronFlare/pjnk6z6f/

Quelle

2015-04-26 16:54:12 IronFlare

Sie können dies tun, indem zusätzliche Keyframes hinzufügen, etwa so:

https://jsfiddle.net/kh3qa3L6/

ZB:

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

Quelle

2015-04-26 16:52:12

Wie während Mitte des Animation/Übergangs pausieren

Antwort

Verwandte Themen