Question

目前我正在修改此jsfiddle，但我的问题是我无法绕过某个方向。

  .dice-wrapper {
    position: absolute;
    /* top: 50%; */
    top: 209px;
    right: -9px;
    /* left: 50%; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
            animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
}

    @-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

    @-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

    @-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

    @keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-300deg); }
}

这应该是行为

行为说明：它将绕着箭头转动并沿箭头返回，它将返回原始位置。

只有当用户点击按钮不是无限时，才会生成此动画。

Answer 1

如果它在发布后应该停止

动画应该处于活动状态。在您的代码中，它不处于活动状态，因此在加载页面时它会启动。当然，按下另一个按钮时无法激活它。

尝试使用以下方法修复：

.dice-wrapper {
    position: absolute;
    /* top: 50%; */
    top: 209px;
    right: -9px;
    /* left: 50%; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper:active { // :active is the pseudo class when mouse is down
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear; /* Opera 12+ */
            animation: myOrbit 4s linear; /* Chrome, Firefox 16+, 
                                                  IE 10+, Safari 5 */
}
// Keyframes...

使用此功能时，按下按钮时动画将播放，释放时动画将停止。

如果它不能在发布后停止

如果您不想使用JavaScript，则无法使用。

使用JavaScript，你的css应该是：

.dice-wrapper {
    position: absolute;
    /* top: 50%; */
    top: 209px;
    right: -9px;
    /* left: 50%; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper.pressed { // .pressed class will be added in JavaScript
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear; /* Opera 12+ */
            animation: myOrbit 4s linear; /* Chrome, Firefox 16+, 
                                                  IE 10+, Safari 5 */
}
// Keyframes...

请注意:active替换为.pressed

在JavaScript中，按下时添加pressed类（我使用jQuery）：

$(".dice-wrapper").click(function(){
    $(this).addClass("pressed"); // Activate the animation
})

如果要在鼠标按下按钮时启动动画，请将click替换为mousedown。你也可以另一个按钮。使用setTimeout功能停止动画。

$("#button").click(function(){
    $(this).addClass("pressed");
})
setTimeout(function(){
    $(this).removeClass("pressed")
}, 2000); // 2 seconds = 2000 milliseconds

如何在Div包装器中实现循环动画

1 个答案:

如果它在发布后应该停止

如果它不能在发布后停止