Question

拥有以下css：

.screen {
    position: fixed;
    width: 100%;
    height: 100%;
}

.card {
    width: 200px; background: #ccc;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@keyframes kf_anim {
    0% {
        transform: rotateY(315deg);

    }

    100% {
        transform: rotateY(360deg);
    }
}

.card_anim {
    animation: kf_anim 0.5s forwards;
}

如果我这样做

<div class="screen">
    <div class="card">content</div>
</div>

我得到一个水平和垂直居中的div，这就是我想要的。但是如果我添加动画

<div class="screen">
    <div class="card card_anim">content</div>
</div>

执行动画但div不再居中，即翻译（-50％， - 50％）被覆盖。

我尝试在关键帧中的translate(-50%, -50%)旁边添加rotateY，但动画无效。

我怎么能解决这个问题，假设我不知道宽度和高度？

JSFiddle：https://jsfiddle.net/n5pma29m/

Answer 1

你必须使用如下所示的css

 @keyframes kf_anim {
        0% {
            transform: translate(-50%, -50%) rotateY(315deg);

        }

        100% {
            transform:translate(-50%, -50%) rotateY(360deg);
        }
    }

更新了小提琴here

Answer 2

CSS属性不是“附加” - 你覆盖动画中的前一个变换值。

您还需要在关键帧中指定翻译部分：

@keyframes kf_anim {
    0% {
        transform: translate(-50%, -50%) rotateY(315deg);

    }

    100% {
        transform: translate(-50%, -50%) rotateY(360deg);
    }
}

translate（-50％， - 50％）和动画之间的兼容性

2 个答案: