css-animations

4熱

3答えて

ボタンをクリックするたびにアニメーションを繰り返したいと思います。私は何かしようとしたlike this。 const dist = document.querySelector('.dist'); document.querySelector('button').addEventListener('click',() => { dist.classList.remove

0熱

1答えて

SVGの中心コンテンツ

私は以下のようなSVGを持っています。現在、サークルはSVG全体のサイズを取ります。どのように私はそれをこのように見えるようにすることができます：SVGは一定のサイズ（215x250と言う）を持ち、円はSVGの中心でサイズ16でなければなりません。この中心のサークルをアニメーション化するのも素晴らしいですので、ローディングスピナーのように見えます。 <svg version="1.1" id="E

1熱

1答えて

リアクションコンポーネントで背景の色を変える方法は？

新しいメッセージがページに投稿されたときに、背景のフェードアウトアニメーションを設定するだけです。背景を変更したいだけです。青から不透明に0 リアルタイムで新しい投稿がページに追加されたときの単なる基本アニメーション。私はこれを試しましたが動作しません。メッセージを追加すると、背景色は青色のままです。私はSASS /コンパス <div className="successfully-save

0熱

2答えて

ホバーアニメーションフェードイン不透明度0.5ホバー不透明度1

最初は、マウスオーバー時に不透明度を0.5から1に変更するボックスがありました。それはうまくいく。ここでは、遅延フェードインアニメーションを不透明度0から0.5の冒頭に追加したいと考えています。残念ながら、マウスオーバーの移行はもはや機能しません。私はあなたがLESSを使用して考えがあり、すべてのアイデア:) .box { width: 200px: height: 50px;

2熱

1答えて

キーフレームアニメーションを追加すると、Z-インデックスが変更されるのはなぜですか？

私は、バックグラウンドヘルパーとして働く子供を持つdivをアニメーション化する必要があるシナリオを持っています。子供たちはいつもdivの背景の後ろにいなければなりません。アニメーションを追加しない場合 z-index: -1は、背景が透明でない状態に保ちます。しかし、アニメーション化するときに背景の背後に留まることはありません。は、私はこれを表示するためにjsFiddleを用意しています -->

2熱

1答えて

Jquery/Javascript/CSSを使用してページの読み込み時に 'Transform：rotate'を実行する

スピードメーターを表示する単純なdiv。 <div class="outer"> <div class="needle" ></div> </div> ホバーでスピードメーターが正常に動く。 .outer:hover .needle { transform: rotate(313deg); transform-origin: center center; }

-2熱

1答えて

CSSキーフレームアニメーションスクリーンドア効果

このデモのコードをWebページに実装しました。https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.htmlデモでわかるように、背景画像には、VRヘッドセットに表示されるようなスクリーンドア効果があります。私のウェブページでは少し悪化しています。おそらく、デモと比較してイメージが明るいからです。これはおそらくパフォーマンスを向上さ

-2熱

1答えて

ボタンクリックでHTML5キャンバスの形が変化しますか？

私はキャンバスに関する簡単な情報を提供するウェブサイトがあることを知りたいだけです。私は自分のプロジェクトに取り組んでいます。 1つのキャンバスと4つのボタンがあります。これらは、CIRCLE、RECTANGLE、SQUARE、ANIMATED RAINBOWの4つのボタンです。矩形ボタンをクリックするとキャンバスアニメーションサークル内の円ボタンをクリックするとアニメーション内のイージーイ

1熱

1答えて

アニメーション - 予期しない位置変更

私のコードに問題があります。 divを回転させたいのですが、divが回転しているときの位置は以前とは違っています。 .rotateWindow { position: absolute; text-align: center; margin: 0 auto; width: 150px; height: 150px; left:50%;

0熱

1答えて

CSSアニメーション：ドキュメントからdiv floatを外す

左から右に浮かぶ雲のCSSアニメーションを作成したいと思います。私は幅100％のdivを持ち、雲は "position：absolute"の画像です。私の解決策はかなりシンプルです。時間の経過とともに画像の「左」プロパティを120％に変更するアニメーションを作成します。しかし、その解決策の問題は、雲がHTML文書全体の幅を超えた後にHTML文書全体の幅を拡張することである。どのように私はそれを防