ボールの放物線運動のアニメーション効果をCSSで実現（コード）

この記事の内容はCSSでボールの放物線運動を実現するアニメーション効果(コード)ですので、お困りの方は参考にしていただければ幸いです。

オブジェクトは物理的に水平方向の動き（等速度）と垂直方向の動き（加速度）に分けられます。これはcss3でも同様です。レベルを制御するには、CSS3 では、トランジションのベジェ曲線またはアニメーション タイミング関数を通じて速度を設定できます。そのため、さまざまなベジェを設定できます。上投げ、平投げ、ひねりなどの多彩な曲線モーションを実現。

以下のHTML部分の主な実装はメインの2層divで、1つは水平方向の動きを制御し、もう1つは垂直方向の動きを制御します

    <div class="wraper">         <!--控制竖直运动-->
        <div class="item"></div> <!--控制水平运动-->
    </div>
    <div class="item2"></div>

これもCSSで直接水平方向と垂直方向の動きとアニメーション設定を設定するのは比較的簡単です。

    *{margin: 0;padding: 0}  /*简单的浏览器兼容*/
    /*设置初始样式*/
    .item, .item2 {
        width:20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 20px;
        background-color: #00aa00;
        border-radius: 50%;
    }
    /*竖直运动*/
    .wraper {
        animation: vertical-animation 2s  .5s 2;
        animation-timing-function: cubic-bezier(.11,-.33,.55,.11);
    }
    /*水平运动*/
    .wraper .item {
        animation: hor-animation 2s linear .5s 2;
    }
    @-moz-keyframes hor-animation {
        0% { transform: translateX(0px); }
        100% { transform: translateX(400px); }
    }
    @-webkit-keyframes hor-animation {
        0% { transform: translateX(0px);     }
        100% { transform: translateX(400px); }
    }
    @-moz-keyframes vertical-animation {
        0% { transform: translateY(0px);  }
        100% { transform: translateY(400px); }
    }
    @-webkit-keyframes vertical-animation {
        0% { transform: translateY(0px);     }
        100% { transform: translateY(400px); }
    }

主に使用するベジェ曲線の傾きはオブジェクトの速度です

関連する推奨事項:

html5 は平らな投げ動作をシミュレートします (平らな投げ動作プロセスをシミュレートします)。小さなボールの)_html5 チュートリアル スキル

純粋な CSS を使用して砂時計アニメーション効果を実現する方法

以上がボールの放物線運動のアニメーション効果をCSSで実現（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。