純粋なCSSを使用して無限のバウンス効果を実装する必要があったため、 this サイトを参照し、最終的に this を実行しました。
.animated {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
50% {-webkit-transform: translateY(-5px);}
}
@keyframes bounce {
0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
50% {transform: translateY(-5px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
#animated-example {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
}
hr {
position: relative;
top: 92px;
left: -300px;
width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>
さて、私の唯一の問題は、跳ね返る要素が再び跳ね始める前に長い休憩を取ることです。 jQuery.animate
を使用して得られるバウンス効果のように、どのようにスムーズにバウンスさせることができますか?
その間の長い休みは、キーフレームの設定によるものです。現在のキーフレームルールでは、実際のバウンスはアニメーション期間の40%から60%の間(つまり、アニメーションの1秒から1.5秒の間)でのみ発生します。これらのルールを削除し、おそらくanimation-duration
ニーズに合わせて。
.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-5px);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
#animated-example {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
}
hr {
position: relative;
top: 92px;
left: -300px;
width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>
元のkeyframe
設定がブラウザによってどのように解釈されるかを以下に示します。
translate
by Y軸の0px。translate
でY軸に0px。translate
でY軸に0px。translate
でY軸に5px。これにより、徐々に上方に移動します。translate
でY軸に0px。これにより、徐々に下降します。translate
でY軸に0px。translate
でY軸に0px。以下は、キーフレームのパーセンテージを使用しないコードです。パーセンテージを使用したため、アニメーションは長い間何もしません。
この例の仕組み:
animation
を設定します。これは、アニメーションプロパティの略です。from
とto
を使用するため、すぐにアニメーションを開始します。 from = 0%およびto = 100%animation: bounce 1s infinite alternate;
1は、アニメーションの持続時間です。.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: cornflowerblue;
border: 2px solid #999;
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
<div class="ball"></div>
エレメントの配置に既にtransformプロパティを使用している場合(現在のように)、上余白をアニメーション化することもできます。
.ball {
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
from {
margin-top: 0;
}
to {
margin-top: -15px;
}
}