javascript - 如何使用@keyframes 将动画从当前位置移动到 CSS3 中的固定位置？

Question

此 css3 代码，将元素从当前位置移动到 100px 下方。

@keyframes movingtocenter
{
from {top:0%;}
to {top:100px;}
}

但是我想将我的对象移动到页面的中心。
我在一页上的不同位置有很多对象。
我想使用这个关键帧将它们全部移动到右中心，在相同的位置。而且不能这样做!无论如何要这样做？

Answer 1

您需要确保父 div 覆盖整个屏幕。您可以使用以下 css 执行此操作:

.wrapper {
    position: fixed;
    width: 100%;
    min-height: 100%;
}

然后您只需要在适当的 div 上指定动画，给它一个绝对位置并使用关键帧告诉它去哪里。

.wrapper div {
    position: absolute;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
} 

.wrapper div.el1{
    right: 200px;
}

.wrapper div.el2 {
    right: 500px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {top:0;}
    100% {top: 50%; right: 0;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {top:0;}
    100% {top:50%; right: 0;}
}

Fiddle