web-dev-qa-db-ja.com

CSSスムースバウンスアニメーション

純粋な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を使用して得られるバウンス効果のように、どのようにスムーズにバウンスさせることができますか？

csscss3css-animations
17
Abhi

その間の長い休みは、キーフレームの設定によるものです。現在のキーフレームルールでは、実際のバウンスはアニメーション期間の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設定がブラウザによってどのように解釈されるかを以下に示します。

  • ％（つまり、0sまたはアニメーションの開始時）-translate by Y軸の0px。
  • 20％で（つまり、0.5秒のアニメーションで）-translateでY軸に0px。
  • 40％で（つまり、アニメーションの1秒で）-translateでY軸に0px。
  • 50％で（つまり、1.25秒のアニメーションで）-translateでY軸に5px。これにより、徐々に上方に移動します。
  • 60％で（つまり、アニメーションの1.5秒で）-translateでY軸に0px。これにより、徐々に下降します。
  • 80％で（つまり、アニメーションの2秒で）-translateでY軸に0px。
  • 100％で（つまり、2.5秒またはアニメーションの終わり）-translateでY軸に0px。
38
Harry

以下は、キーフレームのパーセンテージを使用しないコードです。パーセンテージを使用したため、アニメーションは長い間何もしません。

  • 0％変換0px
  • 20％が0pxを翻訳
  • 等.

この例の仕組み：

  1. animationを設定します。これは、アニメーションプロパティの略です。
  2. キーフレームでfromとtoを使用するため、すぐにアニメーションを開始します。 from = 0％およびto = 100％
  3. アニメーション時間を設定することで、バウンスの速度を制御できるようになりました：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>
16
Persijn

エレメントの配置に既にtransformプロパティを使用している場合（現在のように）、上余白をアニメーション化することもできます。

.ball {
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -15px;
  }
}
1
GerritElbrink