css-animations

1熱

1答えて

私はでCSS3アニメーションを使用しています。私は、キャプションの位置を計算するために使用されたwindow propertiesの1つを変更するアドレスバーによって引き起こされると思われる漫画のキャプション 'ジャンプ'に気付きました。ソースコードはここにあります：私は私の仮定で正しいんだ場合https://gitlab.com/ashleyconnor/adventurersclubco

2熱

1答えて

アニメーションで背景画像を変更するときに白いフラッシュを取り除く方法は？

コードは、サイトの背景イメージが5つの異なるイメージ間で遷移するようにしますが、アニメーションが実行され、次のアニメーションが始まるたびに白いフラッシュが表示されます。それをどうやって取り除くのですか？他の方法で説明する方法がわかりません。あなたはあなたのイメージをプリロードする必要が @keyframes backswitch { 0% { background-im

1熱

4答えて

マウスを要素の上に置くとアニメーションがアクティブになるように、このJavaScriptコードを調整するにはどうすればよいですか？

だから私は、私はそれの上に置くと、ボタンのアニメーションを有効にするにはジャスティン・アギラールのCSS3アニメーションチートシートから、このコードを使用： <div id="object" class="pulse"> <script> $('#animatedElement').hover(function() { $(this).addClass("pulse"); });

0熱

1答えて

最も簡単なCSS、JSポップアップ

ここではいくつかのHTML、CSSおよびJavaScriptコードです： <Body onload="document.getElementById('Chrome_popup').style = 'position: fixed; left:0; bottom:10%; height:10%; width:100%;';"> <Div id="pop-up" style="position:

-1熱

1答えて

は、だから私はここに画像のセットを持っているMozillaの

にCSSアニメーション作品を作ることは彼らのためにHTMLである： <figure> <img src=""> <figcaption> <h3>Title</h3> <p>Description.</p> </figcaption> </figure> <figure> <img src="http://lorempixel.

0熱

1答えて

CSSアニメーションを回転させる停止スムーズ

私は画像を無期限roateために、このサンプルのCSSクラスを作成しました： .rotate{ animation: rotation 2s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rot

0熱

1答えて

マテリアライズCSSのテキストボックスには、私はマテリアライズのCSSでテキストボックス内のアニメーションのこのタイプを作成する中央アニメーション

からボーダーを展開します。ウェブサイトの多くのcodepenをチェックしましたが、cssのマテリアライズに役立つものは何も見つかりません。時には2つの境界線が表示されるか、時には効果がありません。誰かがCSSのソースコードを提供していますので、実装することができます。私は他のCSSライブラリを含めたくありません。マテリアライズCSSと少しのCSSだけで。 .input-field input[t

0熱

1答えて

CSSアニメーションがCSSキーフレームを通して一度ループした後に停止させるにはどうすればよいですか？

CSSアニメーションとキーフレームを使用して一度実行されるズームアウトエフェクトを取得しようとしています。ただし、ズームはループし続け、停止しません。一度ループすればどうすればいいですか？ header { height: 100vh; width: 100%; float: left; height: calc(100vh - 40px); po

0熱

2答えて

キーフレームのアニメーションが後で実行されない

キーフレームアニメーションの一部としてアニメーション効果を作成しています（ゆっくりと高さを下げています）。アニメーションはforwardsを1回再生しますが、backwardsは再生せず、その後の再生も行いません。 JSFiddleここに - 所望の効果を得るためにページからhttp://jsfiddle.net/shaaraddalvi/eLwcw22e/ var scrollEventHand

0熱

2答えて

CSSアニメーションが別の要素でラップされても機能しない

次のHTMLおよびCSSアニメーションがあり、期待どおりに動作します。 app-root { display: flex; justify-content: center; align-items: center; height: 100vh; transition: all 0.8s ease-out; }