logo标签列表

如何在动画/过渡的中间暂停？

javascriptjqueryhtmlcssanimation
8

我有一张图片，希望能够把它拉伸3秒钟，然后暂停2秒钟，接着再拉回原样3秒钟。目前来看，我不知道如何暂停；animation-delay只在动画开始时起作用，而不是在中间。下面是我的代码：

<!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>
2个回答
7
尝试像这样做。如果将暂停时间添加到总时间中（以得到8秒而不是6秒），然后计算出要使元素保持静态的时间段（3/8 + 2/8，其中2/8为2秒暂停时间），然后在结束时使元素返回默认宽度（另外3/8的总时间），则应该会在两次之间获得2秒的暂停。
我仅使用了默认的animation和@ keyframes。您可以将此代码复制到其他浏览器特定版本以实现兼容性。
animation: widthChange 8s;

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

简化示例: http://jsfiddle.net/IronFlare/pjnk6z6f/

5
你可以通过添加额外的关键帧来实现，如下所示： https://jsfiddle.net/kh3qa3L6/ 例如：
@-webkit-keyframes widthChange {
    0%, 100% {
        width: 200px;
    }
    25% {
        width: 400px;
    }
    75% {
        width: 400px;
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接