Css 我的动画属性不能同时工作

我正在尝试一个简单的div动画，它在页面加载时进行动画制作。下面可以看到动画的GIF

这是密码

@keyframes newActivity{
到{
位置：固定；
z指数：100；
最高：18%；
左：10%；
宽度：70%；
身高：80%；
}
}
.div:第一个孩子{
动画名称：newActivity；
动画持续时间：5s；
}
div{
宽度：290px；
高度：200px；
浮动：左；
右边距：10px；
边缘底部：10px；
盒影：0 1px4pRGBA（0,0,0,0.27），0 0 5pRGBA（0,0,0,0.06）；
-webkit盒阴影：0 1px4pRGBA（0,0,0,0.27），0 0 5pRGBA（0,0,0,0.1）；
-莫兹盒阴影：0 1px4pRGBA（0,0,0,0.27），0 0 5pRGBA（0,0,0,0.06）；
背景色：红色；
边框：1px实心#bcbc；
溢出：隐藏；
z指数：-10；
}

---

发生这种情况是因为您已将

设置为高度作为百分比，但高度百分比是继承的；仅当父元素具有声明的高度时，它们才起作用

只有视口有一个固有的高度设置，因此如果您想在div上使用
height:80%
，那么您还需要在CSS中设置
html，body{height:100%；}
。
html
元素是视口的子元素，
body
是
html
的子元素。这样，你的div的
高度：80%
可以通过
body
和
html
一直继承到视口。请参见此示例：


html，正文{
身高：100%；
}
@新活动的关键帧{
到{
位置：固定；
z指数：100；
最高：18%；
左：10%；
宽度：70%；
身高：80%；
}
}
.分区：第一个孩子{
动画名称：newActivity；
动画持续时间：5s；
}
div{
宽度：290px；
高度：200px；
浮动：左；
右边距：10px；
边缘底部：10px；
盒影：0 1px4pRGBA（0,0,0,0.27），0 0 5pRGBA（0,0,0,0.06）；
-webkit盒阴影：0 1px4pRGBA（0,0,0,0.27），0 0 5pRGBA（0,0,0,0.1）；
-莫兹盒阴影：0 1px4pRGBA（0,0,0,0.27），0 0 5pRGBA（0,0,0,0.06）；
背景色：红色；
边框：1px实心#bcbc；
溢出：隐藏；
z指数：-10；
}
我通过从动画中删除
位置
规则（在动画结束后应用，而不是之前/期间），并在动画之前设置默认的
顶部
和
左侧
值，成功地改进了它。不过还是有点乱。是的，还是很乱。我需要更改动画的位置。Thanx我想我找到了一个方法。
位置
不是一个有效的动画属性。