秋风_irwin 2016-08-05 11:42 采纳率: 50%
浏览 1446

css3的animation的animation-play-state问题

http://i.maka.im/pcviewer/T_EEGEQYFL?mode=storeTemplate&ts=1470395808
这个网址里面,他里面所有的div动画都用animation的running和pasued控制的。
图片说明
但是我自己写了一个demo的时候,,从pasued变到running却没有效果,他只有重新加载一次动画效果。下面是我的自己写的demo.

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
<style>
.aa,.bb{
    width: 300px;
    height: 300px;
    border:1px solid #ddd;
}
.a1{
    width: 100px;
    height: 100px;
    background: #ddd;
}
.a2{
    width: 100px;
    height: 100px;
    background: #f00;
}
.bb .b1,.bb .b2{
    width: 100px;
    height: 100px;
}
.b1{
    background: #000;
}
.b2{
    background: #dd0;
}
</style>

</head>
<body>
<div class="aa">
    <div class="a1 fadeInDown animated">

    </div>
    <div class="a2 fadeInDown animated">

    </div>
</div>
<div class="bb">
    <div class="b1 fadeInDown animated">

    </div>
    <div class="b2 fadeInDown animated">

    </div>
</div>
<button id="btn1">11</button>
<button id="btn2">22</button>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$("#btn1").click(function(){
    $(".a1").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"running"
    });
    $(".a2").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"running"
    });
    $(".b1").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"paused"
    });
    $(".b2").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"paused"
    });
});
$("#btn2").click(function(){
    $(".a1").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"paused"
    });
    $(".a2").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"paused"
    });
    $(".b1").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"running"
    });
    $(".b2").css({
        "animation-name":"fadeInDown",
        "-webkit-animation-play-state":"running"
    });
})
</script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • devmiao 2016-08-05 12:59
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)