は@keyframesアニメーションには外部ライブラリが必要です

Question

私はCSSアニメーションの新機能です。@keyframeアニメーションについてもっと知りたいと思っています。

@keyframeを使用する場合、そのために外部ライブラリファイルをロードする必要がありますか？

外部ライブラリを追加せずに単独で置いた場合、期待した結果が得られませんでしたか？

Answer 1

keyframesを動作させるには外部ライブラリが必要ありません。

以下は、純粋なCSSを使用してmarqueeエフェクトを作成する例です。コードスニペットを確認し、キーフレームを使用します。

.marquee-parent { 
 
    position: relative; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    height: 30px; 
 
} 
 
.marquee-child { 
 
    display: block; 
 
    width: 147px; 
 
    /* width of your text div */ 
 
    height: 30px; 
 
    /* height of your text div */ 
 
    position: absolute; 
 
    animation: marquee 5s linear infinite; 
 
    /* change 5s value to your desired speed */ 
 
} 
 
.marquee-child:hover { 
 
    animation-play-state: paused; 
 
    cursor: pointer; 
 
} 
 
@keyframes marquee { 
 
    0% { 
 
    left: 100%; 
 
    } 
 
    100% { 
 
    left: -147px 
 
    /* same as your text width */ 
 
    } 
 
}

<div class="marquee-parent"> 
 
    <div class="marquee-child"> 
 
    Hover on me to stop 
 
    </div> 
 
</div>

。