Question

我正在尝试制作2张图像的动画： 1.从左下到右上。其他从右下到左上。图片1正在移动，而其他图片则不在...

1张图像正在移动（图像从左下到右上），另一张图像仍未移动当我在saprate html filr中运行静态图像的代码时，它运行得很好...

<style>
    html
    {
        height:100%
    }
    body
    {
        height: 100%;
        width:100%;
        margin: 0;
        background-repeat: no-repeat;
       /* background-attachment: fixed;*/
        background-image: radial-gradient(black,white);
    }
    div.move_to_right
    {
        width: auto;
        height: auto;
        position: absolute;
        left:200px;
        /*background-color: black;*/
       /* background-image: url('/f16.png');*/
        
    }
    .move_to_right{
        position: absolute;
        left:200px;
    }
    #move_to_right
    {
  width: 150px;
  height: 150px;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 3s;
  animation-iteration-count:infinite;
}
    .ptag
    {
        color:white;
    }

/* Safari 4.0 - 8.0 */
/* Standard syntax */
@keyframes example {
    0%{
        opacity: 0.5;
        transform: translate(-200px,150px);
    }
    100%{
        opacity: 1;
        transform: translate(0px,0px);   
    }
div.move_to_left
    {
        width: auto;
        height: auto;
        position: absolute;
        left:200px;
        /*background-color: black;*/
       /* background-image: url('/f16.png');*/
        
    }
    .move_to_left{
        position: absolute;
        right:200px;
    }
    #move_to_left
    {
  width: 150px;
  height: 150px;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 3s;
  animation-iteration-count:infinite;
}
    .ptag
    {
        color:white;
    }

/* Safari 4.0 - 8.0 */
/* Standard syntax */
@keyframes example {
    0%{
        opacity: 0.5;
        transform: translate(200px,150px);
    }
    100%{
        opacity: 1;
        transform: translate(0px,0px);   
    }
    </style>

<html><body>
    <div class="move_to_right">
      <!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
      <img id="move_to_right" src="f16.png" style="width:150px; height:150px;">
    </div>
<div class="move_to_left">
      <!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
      <img id="move_to_left" src="f162.png" style="width:150px; height:150px;">
    </div>
</body></html>

Answer 1

一些问题：

您没有关闭@keyframes的大括号
两个关键帧都具有相同的名称examples

html {
  height: 100%
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-image: radial-gradient(black, white);
}

div.move_to_right {
  width: auto;
  height: auto;
  position: absolute;
  left: 200px;
}

.move_to_right {
  position: absolute;
  left: 200px;
}

#move_to_right {
  width: 150px;
  height: 150px;
  position: relative;
  -webkit-animation-name: move_to_right;
  -webkit-animation-duration: 10s;
  animation-name: move_to_right;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes move_to_right {
  0% {
    opacity: 0.5;
    transform: translate(-200px, 150px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

div.move_to_left {
  width: auto;
  height: auto;
  position: absolute;
  left: 200px;
}

.move_to_left {
  position: absolute;
  right: 200px;
}

#move_to_left {
  width: 150px;
  height: 150px;
  position: relative;
  -webkit-animation-name: move_to_left;
  -webkit-animation-duration: 10s;
  animation-name: move_to_left;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes move_to_left {
  0% {
    opacity: 0.5;
    transform: translate(200px, 150px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

<div class="move_to_right">
  <img id="move_to_right" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>
<div class="move_to_left">
  <img id="move_to_left" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>

为什么我的第二张图片没有移动或动画

1 个答案: