純粋なCSSスクロールアニメーション

質問

CSS3のみで、ページ上部にあるボタンをクリックすると下へスクロールする方法を探しています。

そこで、こんなチュートリアルを見つけました。 http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

デモです。 http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

しかし、私のニーズには少し高度すぎます。私は、ページの上部にある1つのボタンをクリックすると、ブラウザがスクロールダウンするようにしたいだけなので、私は疑問に思いました。

HTMLはこのような感じです。 <a href="#" class="button">Learn more</a>

ボタンがクリックされたときに起動する必要があるCSSがすでにいくつかあります。

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}

どのように解決するのですか？

css3を使ってアンカータグで行うことができます。 :target 擬似セレクタは、現在のURLのハッシュと同じIDを持つ要素がマッチしたときに発動されます。 の例

これを知っていると、このテクニックを "+" や "~" といった近接セレクタの使用と組み合わせて、ターゲット要素を通じて、現在の URL のハッシュと ID が一致する他の任意の要素を選択することが可能になります。この例としては、次のようなものがあります。 のようなものです。 .