动画没有按照设定的方式运行

Animation not functioning as it is set

本文关键字：方式 运行 动画      更新时间：2023-09-26

我想让文本以垂直的方式从袋子里出来，然后做一个90度的转弯，这样文本就在我想要它的正确位置。

现在，我的测试在我的页面上出现了一个巨大的圆圈。它落在我想要的地方，但它从页面上出来完全错了。我创造了一把小提琴，但它真的不公平，因为它看起来一点也不像我的。如果有任何方法可以显示我在做什么，我愿意。

我想让它看起来像从包里取名字。就像你让十个人在一个房间里从袋子里掏出名字一样。

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);
    }

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

你知道我该怎么解决这个问题吗?

您考虑过使用transform-origin属性吗?

看一下这个。这就是你想要达到的目标吗?

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;
}
相关文章：