Question

我正在制作一部动画，我似乎无法得到任何我想做的事情。我试图将红点变成三颗星，并让星星在不同的地方结束。我遇到了三个主要问题。

我无法获得超过一颗星。
我希望明星从10％ - 100％显示滑动到位。现在它显示在10％的位置，然后在最后一点。
红点显示星星的图像，因此图像在我介绍它的百分比之前发生。

有没有人看到我做错了什么来创造这些错误。

注意 - 此时我只有两颗星的CSS。

＆＃13;

    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%;
      }
    }

＆＃13;

<div class="star-container">
  <div class="star1"></div>
  <div class="star2"></div>
  <div class="star3"></div>
</div>

＆＃13;

Answer 1

您的问题的答案：

我不能让一个以上的明星出现

这似乎是因为拼写错误。在}个@-webkit-keyframes规则之后，您的代码缺少@keyframes，因此position将嵌套在其下。如果更正此错误，则两个开始都会显示。

我希望明星从10％ - 100％显示滑动到位。现在它显示在10％的位置，然后在最后一点。

这是因为您正在更改关键帧中的left: 50%属性。它是not an animatable property因此导致跳跃。在10％时，元素绝对位于top: 90%和position，但在此之后，position属性和定位属性都没有在关键帧内给出值。在元素的默认状态下，这些属性也没有值。因此，元素从绝对定位在10％到静态定位（默认值）为100％。由于left属性无法设置动画（如前所述），因此会跳转。

此外，在动画（或转换）过程中，请勿将元素的定位属性从right更改为top或bottom到background-color 。这种变化也不能动画，因此会导致跳跃。

红点显示星星的图像，因此图像在我引入它的百分比之前发生。

我不太清楚你的意思。图像仅出现在正确的位置。我认为你认为它是图像的一个问题但是（如果我对这个问题的理解是正确的）这是background-color的一个问题。

background-color为红色，为10％，并且在此之后的任何关键帧或默认状态下都没有值，因此它也会动画（红色到透明）。如果您想避免这种情况，那么您应该在10.1%关键帧中将position: absolute设置为透明。

<强>解决方案：

根据我的理解，以下是您正在寻找的内容。整个事情可以使用单个动画本身来实现。只需进行以下更改：

在默认状态下添加top: 5%和定位属性的最终值（如left: 5%，left）。使用top和height按顺序设置所有这些以避免跳转。
在默认状态下也指定元素的width和height: 250px。根据您当前的代码，该元素永远不会获得width: 250px或0%，因为在height它是50 x 50px并且在动画结束时它也是相同的。因此，将默认状态下的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>

background-image

注意：正如评论中所讨论的，IE和Firefox不支持@keyframes上的动画。 background-position规则中指定的图像甚至不会出现在其中。此问题的解决方案是在开始时添加图像，但使用{{1}}的负值隐藏它，如here。只要背景位置偏移大于或等于（-1 *最宽元素的宽度），它就适用于所有浏览器和所有屏幕尺寸。

可以找到Firefox和IE中出现问题的原因here。

CSS动画 - 转换问题

1 个答案: