Sposób wstrzymania w trakcie animacji/przejścia

Mam obraz, który chcę rozciągnąć na 3 sekundy, a następnie wstrzymać na 2 sekundy, a następnie odciąć na 3 sekundy. W tej chwili nie wiem, jak to zatrzymać; opóźnienie animacji działa tylko na początku animacji, a nie na środku. Oto mój kod:Sposób wstrzymania w trakcie animacji/przejścia

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

Źródło

2015-04-26 Frank Tocci

Spróbuj czegoś takiego. Jeśli dodasz czas pauzy do całkowitego czasu (otrzymasz 8 sekund zamiast 6), a następnie oblicz czas, w którym element ma być statyczny (3/8 + 2/8, gdzie 2/8 to 2-sekundowy czas pauzy), a następnie, aby element powrócił do domyślnej szerokości przed końcem (kolejne 3/8 całości czasu), należy uzyskać dwusekundową pauzę pomiędzy nimi.

Tutaj użyłem tylko domyślnych animation i @keyframes tutaj. Możesz skopiować ten kod do innych wersji specyficznych dla przeglądarki w celu zapewnienia zgodności.

animation: widthChange 8s; 

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

okrojoną przykład: http://jsfiddle.net/IronFlare/pjnk6z6f/

Źródło

2015-04-26 16:54:12 IronFlare

Można to zrobić poprzez dodanie dodatkowych klatek kluczowych, tak jak poniżej:

https://jsfiddle.net/kh3qa3L6/

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

Źródło

2015-04-26 16:52:12

Sposób wstrzymania w trakcie animacji/przejścia

Odpowiedz

Powiązane problemy