翻译(-50%，-50%)与动画的兼容性
提问于 2016-08-05 02:48:34
具有以下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/
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-05 02:52:41
您必须使用css组合如下所示
@keyframes kf_anim {
0% {
transform: translate(-50%, -50%) rotateY(315deg);
}
100% {
transform:translate(-50%, -50%) rotateY(360deg);
}
}更新小提琴这里
Stack Overflow用户
发布于 2016-08-05 02:52:09
CSS属性不是“加性”--您正在覆盖动画中先前的转换值。
您还需要在关键帧中指定转换部分：
@keyframes kf_anim {
0% {
transform: translate(-50%, -50%) rotateY(315deg);
}
100% {
transform: translate(-50%, -50%) rotateY(360deg);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38787392
复制
腾讯云开发者
