我的Div容器没有响应我所做的任何CSS更改

Question

我的主要目标是，我希望div容器中的svg在加载时从屏幕右侧进入，但它不会离开屏幕，也不会调整大小或其他任何东西，我不知道为什么。我把它搞得一团糟，似乎有些东西能用"；。太空船svg{}"；但它只是起了点作用。

HTML

<div class="space_ship">
<svg width="1136" height="815" viewBox="0 0 1136 815" fill="none" xmlns="http://www.w3.org/2000/svg" >
(its a lot of paths after this)
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="scipt.js" type="text/javascript"></script>

CSS

.space-ship{
right:  3000px;
padding:  1%;
margin:   1%;
position:  relative;
display: inline-block;
}
.space_ship svg{
width: 80vh;
}

JavaScript

anime({
targets: '.space-ship',
right: '0px',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad'
});

Answer 1

您的CSS和JS中有一个拼写错误。

.space_ship{   /* <---- "_" not "-"  */
right:  3000px;
padding:  1%;
margin:   1%;
position:  relative;
display: inline-block;
}

anime({
targets: '.space_ship',   // <---- "_" not "-"
right: '0px',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad'
});

Answer 2

这样的东西能解决你的问题吗？

.space_ship{
width:500px;
height:300px;
background:yellow;
position:relative;
}
svg{
position:absolute;
animation: kf1 5s infinite;
}
@keyframes kf1 {
from {top: 0px;right:0px}
to {top: 200px;right:500px;}
}

<div class="space_ship">
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>