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

Currently I'm modifying this jsfiddle, but my problem is that I can't make it circle around a certain direction.

目前我正在修改这个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); }
}

This should be the behavior

这应该是行为

Explanation of behavior: It will circle around and follow the arrow and it will return in the original position.

行为说明:它会绕着箭头旋转,它将返回原始位置。

This should only animate when the user click the button not infinite.

这应仅在用户单击按钮不是无限时动画。

1 个解决方案

#1

IF IT SHOULD STOP AFTER RELEASE

The animation should be started in the active state. In your code, it is not in the active state so it gets started when page is loaded. Sure, it cannot be activated when pressing another button.

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

Try fix it with:

尝试修复它:

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

When you use this, the animation will play when the button is pressed, and on release, it will stop.

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

IF IT SHOULD NOT STOP AFTER RELEASE

If you don't want to use JavaScript, it is impossible.

如果您不想使用JavaScript,那是不可能的。

Using JavaScript, your css should be:

使用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...

Note that :active is replaced by .pressed

请注意:active被.pressed替换

In JavaScript, add the pressed class when pressed (i'm using jQuery):

在JavaScript中,按下时添加按下的类(我正在使用jQuery):

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

Replace click by mousedown if you want to start the animation when the mouse is down on the button. You can also another button. Use the setTimeout function to stop the animation.

如果要在鼠标按下按钮时启动动画,请单击mousedown单击。你也可以另一个按钮。使用setTimeout函数停止动画。

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