ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーションでの円運動軌跡の実装
CSS3アニメーションでの円運動軌跡の実装
- 一个新手オリジナル
- 2017-10-20 09:32:133997ブラウズ
CSS3 では、アニメーションは @keyframes を通じて定義され、アニメーションはアニメーション効果を実現するためにアニメーション属性を設定します。
アニメーション属性では、アニメーションの名前、アニメーション全体の実行時間、アニメーションのスピード カーブを指定できます。動きやその遅延時間、再生回数など。
アニメーション
アニメーションには、複合属性として次のアニメーション属性が含まれます。
animation-name --------------------------------------アニメーション名を指定します
-
animation-duration ---------------------------------アニメーションが一度完了するまでの時間を規定します
animation-timing -function ------------------------アニメーションのモーションスピードカーブを指定します
animation-delay-- ----------- ------------------------アニメーションの遅延時間を指定する
animation-iteration -count--------------- ----------アニメーションの再生回数を指定します
animation-direction ----------- ----------------- --次のサイクルでアニメーションを逆方向に開始するかどうかを指定します
animation-fill-mode ---------- ------------------------ アニメーション時間外の状態を指定します
animation-play-state ---------- ----------------- アニメーションの実行と一時停止を指定します
animation-timing-function
はアニメーションのスピードカーブを指定します。デフォルトは「ease」です。一般的に使用されるモーション スピード カーブには次のタイプもあります:
linear: 線形遷移。
イーズイン: 低速から高速まで。
イーズアウト: 速いものから遅いものまで。
イーズインアウト: 低速から高速、そして再び低速へ。
ベジェ曲線を直接使用して走行速度曲線を指定することもできます。ベジェ曲線の 4 つの値は [0, 1] の範囲内にある必要があります。
animation-direction
次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。
reverse: 逆方向の動き
alternate: 最初に法線方向に動き、次に反対方向に、連続的に交互に動きます
alternate-reverse: 最初に逆方向に動き、次に法線方向に動きます、連続交互
animation-fill -mode
は、アニメーション時間外のオブジェクトの状態を指定します。一般的に使用される値は次のとおりです:
none: デフォルト値
forwards: オブジェクトの状態をアニメーションの終了時の状態に設定します
backwards: オブジェクトの状態をアニメーション終了時の状態に設定しますアニメーションの開始
円運動の軌跡
実装コードは以下の通りです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沿圆形轨迹运动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#trajectory {
width: 300px;
height: 300px;
border: 4px solid #949494;
border-radius: 50%;
position: relative;
left: calc(50% - 153px);
top:calc(50% - 153px);
}
@keyframes moveX{
0% {left: -22px;}
100% {left: 282px;}
}
@keyframes moveY{
0% {top: -22px;}
100% {top: 282px;}
}
#move {
width: 40px;
height: 40px;
font-size: 12px;
background-color: #32c33a;
border-radius: 50%;
position: absolute;
left:-22px;
top:-22px;
animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
}
</style></head><body>
<p id="trajectory">
<p id="move">Immortal brother</p>
</p></body></html>上記コードの注意点は以下の通りです:
体の高さを100%に設定する理由HTML5環境での本文のデフォルトの高さは0です
calc。使用中の値は同じです。値の間の「-」と「+」の両端のスペースは必須です。
アニメーションの左と上の値はオブジェクトの動きの開始位置と終了位置です
アニメーションは一度実行されます
速度曲線: cubic-bezier(0.36,0,0.64,1);
両方向の遅延時間の設定 X: -2s; Y: 0s
順方向に交互に実行し続ける方向と逆方向: 交互
以上がCSS3アニメーションでの円運動軌跡の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。