我正在制作动画，但我似乎无法做到这一点。我试图显示一个红点变成三颗恒星，并使这些恒星在不同的地方结束。我遇到了三个主要问题。
我最多只能出现一颗星星。
我希望星星从10％-100％滑动到适当位置。现在它显示在位置的10％，然后在最后一点。
红点显示的是恒星的图像，因此该图像是在引入百分比之前发生的。
有人看到我在做这些错误的事情了吗？
注意-目前，我只有两颗星的CSS。
body {
background-color: #F5F5F5;
color: #555;
height: 100vh;
width: 100%;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star-container {
background-color: green;
color: white;
width: 70%;
height: 80%;
margin: 10% auto;
text-align: justify;
position: relative;
}
.star1 {
width: 250px;
height: 250px;
text-align: justify;
-webkit-animation-name: star1;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
/*-webkit-animation-timing-function: linear;*/
animation-name: star1;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
/*animation-timing-function: linear;*/
}
/* Chrome, Safari, Opera */
@-webkit-keyframes star1 {
0%,
5% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
background-image: none;
}
5.1%,
10% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 50px;
width: 50px;
border-radius: 50%;
background-image: none;
}
10.1% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
100% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
/* Standard syntax */
@keyframes star1 {
0%,
5% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
}
5.1%,
10% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 50px;
width: 50px;
border-radius: 50%;
}
10.1% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
100% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
}
.star2 {
width: 200px;
height: 200px;
text-align: justify;
-webkit-animation-name: star2;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
/*-webkit-animation-timing-function: linear;*/
animation-name: star2;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
/*animation-timing-function: linear;*/
}
/* Chrome, Safari, Opera */
@-webkit-keyframes star2 {
0%,
5% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
border-radius: 50%;
background-image: none;
}
5.1%,
10% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 40px;
width: 40px;
border-radius: 50%;
background-image: none;
}
10.1%,
100% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 40px;
width: 40px;
top: 5%;
right: 5%;
}
/* Standard syntax */
@keyframes star2 {
0%,
5% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
border-radius: 50%;
}
5.1%,
10% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 40px;
width: 40px;
border-radius: 50%;
}
10.1%,
100% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 40px;
width: 40px;
top: 5%;
right: 5%;
}
}<div class="star-container">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>最佳答案
您的问题的答案：
我最多只能展示一颗星
那似乎是由于输入错误。在两个}规则之后，您的代码缺少一个@-webkit-keyframes，因此@keyframes被嵌套在其下。如果纠正了此错误，则两个启动都将显示。
我希望星星从10％-100％滑动到适当位置。现在它显示在位置的10％，然后在最后一点。
那是因为您正在关键帧中更改position属性。它是not an animatable property，因此导致跳转。元素的绝对位置为10％时，该元素的绝对位置为left: 50%和top: 90%，但是在此之后，均未在关键帧内为position属性和定位属性提供值。这些属性在元素的默认状态下也没有值。因此，该元素从绝对定位为10％变为静态定位（默认为100％）。由于position属性不能设置动画（如前所述），因此它会跳转。
另外，在动画（或过渡）过程中，请勿将元素的定位属性从left更改为right或将top更改为bottom。这种变化也无法实现，因此会导致跳跃。
红点显示的是恒星的图像，因此该图像是在引入百分比之前发生的。
我不太确定这是什么意思。图像仅出现在正确的位置。我认为您假设图像有问题，但是（如果我对问题的理解是正确的）则是background-color问题。background-color是10％的红色，在此之后的任何关键帧中或默认状态下都没有任何值，因此它也会设置动画（红色到透明）。如果要避免这种情况，则应在background-color关键帧中将10.1%设置为透明。
解：
根据我的理解，以下是您要寻找的。整个过程可以使用单个动画本身来实现。只需进行以下更改：
在默认状态本身中添加position: absolute和定位属性的最终值（例如top: 5%，left: 5%）。依次使用left和top设置所有字符，以避免跳转。
还要在默认状态下指定元素的height和width。按照您当前的代码，该元素将永远不会得到height: 250px或width: 250px，因为在0%处该元素为50 x 50px，并且在动画末尾也相同。因此，将默认状态下的height和width替换为期望值，并将其从关键帧中删除。
将元素的最终位置设置为默认状态，并且在10.1%关键帧之后不要指定任何定位值。这意味着元素将滑动到其最终位置。这也使我们能够重用动画，而不是为每个元素编写一个动画。
如果您不希望颜色从红色逐渐变为透明，请在background-color: transparent关键帧中设置10.1%。否则，请忽略它。
为了确保安全，请在background-image: none和0%, 5%关键帧中设置5.1%, 10%。否则，图像将出现在中间，这也可能使图像看起来比应该出现的还要早。
最后，创建一个通用类（如代码片段中的star）并在其下设置所有通用属性。将当前的class属性更改为id，然后使用id选择器设置所有唯一属性。
body {
background-color: #F5F5F5;
color: #555;
height: 100vh;
width: 100%;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star-container {
background-color: green;
color: white;
width: 70%;
height: 90%;
margin: 10% auto;
text-align: justify;
position: relative;
}
.star{
position: absolute;
text-align: justify;
animation-name: star1;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#star1 {
left: 5%;
top: 5%;
height: 50px;
width: 50px;
}
#star2 {
left: 85%;
top: 5%;
height: 40px;
width: 40px;
}
#star3 {
left: 85%;
top: 85%;
height: 40px;
width: 40px;
}
@keyframes star1 {
0%, 5% {
left: 50%;
top: 50%;
background-color: red;
border-radius: 50%;
background-image: none;
}
5.1%,
10% {
background-color: red;
left: 50%;
top: 90%;
border-radius: 50%;
background-image: none;
}
10.1% {
left: 50%;
top: 90%;
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
background-color: transparent;
}
100% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
}
}<div class="star-container">
<div class="star" id="star1"></div>
<div class="star" id="star2"></div>
<div class="star" id="star3"></div>
</div>注意：如评论中所述，IE和Firefox不支持
background-image上的动画。在@keyframes规则中指定的图像甚至不会出现在其中。解决该问题的方法是在开始时添加图像，但使用background-position的负值（如here）将其隐藏。只要背景位置偏移大于或等于（-1 *最宽元素的宽度），它就可以在所有浏览器中和所有屏幕尺寸下工作。可以在here中找到Firefox和IE中问题的原因。
关于html - CSS动画-变形问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35979304/