1

我想从左到右移动一个带有图像的球，然后再回来。当它移动时，它必须弹跳并移动。我不能让这发生。有什么建议么？

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

2 回答 2

2

语法不正确；你不能像那样设置多个动画。

根据 MDN，动画的语法如下：

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

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

对于弹跳动画-示例在这里

为了使此动画正常工作，您需要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;
    }
}

对于旋转动画-示例在这里

用于linear计时功能。这将允许流畅的动画。

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

值得一提的是，0%在这种情况下，您可以从关键帧中排除：

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

对于运动动画——这里的例子

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

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

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

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

组合动画——此处为示例

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

@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%;
    }
}
于 2013-10-02T19:07:35.303 回答
0

您还应该更正您的运动代码，以使球回来是

@-webkit-keyframes movement {
  0% {
    left: 0%;
  }
  50% {
    left: 100%; /* for moving right */
  }
  100% {
    left: 0%; /* for moving back or left */
  }
}
于 2013-10-02T19:15:37.597 回答