javascript - 动画无法按设置运行

Question

我希望文本以垂直方式从袋子中出来，然后旋转 90 度，以便文本位于我想要的正确位置。

现在，我的测试在我的页面上绕了一个大圈。它落在我想要的地方，但它从页面中出来完全错误。我创造了一个 fiddle ，但它真的没有任何正义，因为它看起来根本不是我的。如果有什么方法可以展示我在做什么，我会的。

我希望它看起来像是从包中取出名字。就像一个房间里有 10 个人从袋子里拿出名字一样。

https://jsfiddle.net/n2o672q3/1/

我已将这些关键帧设置为我想要的效果，所以我还是不确定我为什么要进行 360 度旋转。

@-moz-keyframes spin {


 0% {
        -moz-transform: rotate(110deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(110deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(110deg);
        transform:rotate(110deg);
    }

只需想象一只鸟飞起来并在空中绕一个大圈，这就是我正在做的。

知道如何解决这个问题吗？

Answer 1

您是否考虑过使用 transform-origin属性(property)？

看看 this 。这是您要实现的目标吗？

CSS:

.shuffle_results {
    position: relative;
    z-index: -1;
    font-size: 2em;
    -webkit-animation:spin 3s linear;
    -moz-animation:spin 3s linear;
    animation:spin 3s linear;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}
@-moz-keyframes spin {
    0% { -moz-transform: translate(0px, 200px) rotate(140deg); }
    100% { -moz-transform: translate(0px, 0px) rotate(0deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: translate(0px, 200px) rotate(140deg); }
    100% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes spin {
    0% { -webkit-transform: translate(100px, 200px) rotate(140deg); transform: translate(100px, 200px) rotate(140deg); }
    100% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); }
}
#paperBag {
    position: relative;
    bottom: 0px;
    left: 0px;
    margin-top: 40px;
    z-index: 1;
}