How to make transition go back and forth once

Question

I've heard of animations/transitions that occur multiple times. I need a transition that changes the width once and then changes it back (again, over a three-second interval) after a two-second pause. How would I do this?

Here's my code:

<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-name: widthChange; 
        animation-duration: 3s;
        -webkit-animation-name: widthChange; 
        -webkit-animation-duration: 3s;
        -moz-animation-name: widthChange; 
        -moz-animation-duration: 3s;
        -0-animation-name: widthChange; 
        -0-animation-duration: 3s;   


    }

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

    @-webkit-keyframes widthChange {
        from {width: 200px;}
        to {width: 400px;}
        from {width: 400px;}
        to {width: 200px;}
    }
    @-o-keyframes widthChange {
        from {width: 200px;}
        to {width: 400px;}
        from {width: 400px;}
        to {width: 200px;}
    }
    @-moz-keyframes widthChange {
        from {width: 200px;}
        to {width: 400px;}
        from {width: 400px;}
        to {width: 200px;}
    }
    @keyframes widthChange {
        from {width: 200px;}
        to {width: 400px;}
        from {width: 400px;}
        to {width: 200px;}

    }

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

Answer 1

 img { width:200px; height:100px; animation: widthChange 3s 2s; -webkit-animation: widthChange 3s 2s; -moz-animation: widthChange 3s 2s; -0-animation: widthChange 3s 2s; } 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;} }

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

Use % and animation-delay

How to make transition go back and forth once

Question

1 answers

solution1
1 2015-04-25 19:01:21

How to make transition go back and forth once

Question

1 answers

solution1 1 2015-04-25 19:01:21

solution1
1 2015-04-25 19:01:21