Question

我想移动一个带有图像的球从左到右再向后移动。当它移动时，它必须反弹并移动。我无法做到这一点。有什么建议？

HTML

<body>
   <img src= "F:\New folder\1.jpg" />
   <img src="F:\New folder\2.jpg" />
   <img src="F:\New folder\3.jpg" />
   <img src="F:\New folder\4.jpg"/>
</body>

CSS

img
{
   width:30px;
   height:30px;
   border-style:solid;
   border-width:3px;
   border-radius:50%; 
   animation: spin 3s infinite linear  alternate , bounce 2s 1 forward , movement 5s 3s  1 ;
}

@-webkit-keyframes bounce {
0% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
}
16% {
    top: 190px;
    -webkit-animation-timing-function: ease-out;
}
32% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
}
48% {
    top: 190px;
    -webkit-animation-timing-function: ease-out;
}
62% {
    top: 100px;
    -webkit-animation-timing-function: ease-in;
}
78% {
    top: 190px;
    -webkit-animation-timing-function: ease-out;
}
90% {
    top: 150px;
    -webkit-animation-timing-function: ease-in;
}
100% {
    top: 190px;
    -webkit-animation-timing-function: ease-out;
     }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes movement {
 0% {
    top: 0%;
    left: 0%;
    }
 33% {
    top: 0%;
    left: 25%;
    }
 66% {
    top: 0;
    left: 50%;
    }
  100% {
    top: 0%;
    left: 100%;
    }
}

Answer 1

语法不正确;你无法设置这样的多个动画。

According to MDN，动画的语法如下：

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

此外，您目前需要使用-webkit前缀才能在Chrome / Safari中使用动画。

对于弹跳动画 - EXAMPLE HERE

为了让这个动画起作用，你需要在元素上设置position:relative，因为你在关键帧中使用了定位。

.ball {
    position:relative;
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
}

值得注意的是，您可以组合这样的关键帧属性：

@keyframes bounce {
    16%, 48%, 78%, 100% {
        top: 190px;
        animation-timing-function: ease-out;
    }
}

适用于旋转动画 - EXAMPLE HERE

使用linear作为计时功能。这将允许平滑的动画。

.ball {
    animation: spin 3s linear infinite;
    -webkit-animation: spin 3s linear infinite;
}

值得一提的是，您可以在此实例中从关键帧中排除0%：

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

适用于动画动画 - EXAMPLE HERE

如果元素定位于开头，则关键帧中的0%不需要值。

.ball {
    animation: movement 3s linear infinite;
    -webkit-animation: movement 3s linear infinite;
    left:0;
}

因此，在这种情况下，关键帧非常简单：

@keyframes movement {
    100% {
        left:100%;
    }
}

合并动画 - EXAMPLE HERE

如果您希望所有动画同时发生，只需组合关键帧。

@keyframes combined {
    16%, 48%, 78%  {
        top: 190px;
        animation-timing-function: ease-out;
    }
    32% {
        top: 50px;
        animation-timing-function: ease-in;
    }
    62% {
        top: 100px;
        animation-timing-function: ease-in;
    }
    90% {
        top: 150px;
        animation-timing-function: ease-in;
    }
    100% {
        transform: rotate(360deg);
        top: 190px;
        animation-timing-function: ease-out;
        left:100%;
    }
}

Answer 2

你还应该纠正你的移动代码以便将球送回

@-webkit-keyframes movement {
  0% {
    left: 0%;
  }
  50% {
    left: 100%; /* for moving right */
  }
  100% {
    left: 0%; /* for moving back or left */
  }
}

用于移动球的CSS3动画

2 个答案: