タグ付けされた質問 「css-transitions」

<ul>CSSトランジションを使用してスライドダウンを作成しようとしています。 はに<ul>始まりますheight: 0;。ホバーすると、高さがに設定されheight:auto;ます。ただし、これにより、遷移ではなく、単に表示されます。 からheight: 40px;まで実行すると、までheight: auto;スライドしheight: 0;、突然正しい高さにジャンプします。 JavaScriptを使用せずにこれを他にどのように実行できますか？ #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent0:hover #child0 { height: auto; } #child40 { height: 40px; overflow: hidden; background-color: #dedede; -moz-transition: height 1s …

2136 css  css-transitions 

私は現在、CSSの「メガドロップダウン」メニューを設計しています。基本的には通常のCSS専用のドロップダウンメニューですが、さまざまなタイプのコンテンツが含まれています。 現時点では、CSS 3の遷移は「display」プロパティには適用されないようです。つまり、display: noneからdisplay: block（または任意の組み合わせ）への遷移は一切実行できません。 上記の例の2段目のメニューを、誰かがトップレベルのメニュー項目の1つにカーソルを合わせたときに「フェードイン」する方法はありますか？ visibility:プロパティでトランジションを使用できることは承知していますが、それを効果的に使用する方法は考えられません。 私も高さを使用してみましたが、それはひどく失敗しました。 JavaScriptを使用してこれを達成するのは簡単なことでもありますが、CSSだけを使用するように自分自身に挑戦したかったので、少し不足していると思います。

1448 css  css-transitions 

複数のプロパティを持つCSSトランジションの省略形の正しい構文を見つけることができないようです。これは何もしません： .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { height: 200px; opacity: 1; } 私はjavascriptでshowクラスを追加します。要素が高くなり、表示されますが、遷移しません。最新のChrome、FF、Safariでのテスト。 何が悪いのですか？ 編集：明確にするために、CSSを縮小するための簡略版を探しています。すべてのベンダープレフィックスで十分に肥大化しています。サンプルコードも拡張しました。

519 css  webkit  css-transitions  shorthand 

CSSトランジションを使用して、ページの読み込み時にテキスト段落をフェードインできますか？ 私はそれがhttp://dotmailapp.com/でどのように見えるか本当に気に入っており、CSSを使用して同様の効果を使用したいと思います。このドメインは購入されており、言及された効果はありません。アーカイブされたコピーは、Wayback Machineで表示できます。 図 このマークアップがある： <div id="test"> <p>​This is a test</p> </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 次のCSSルールの場合： #test p { opacity: 0; margin-top: 25px; font-size: 21px; text-align: center; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; transition: opacity 2s ease-in; }​ ロード時に遷移をトリガーするにはどうすればよいですか？

442 css  css-transitions  opacity 

これはかなり簡単な質問ですが、CSS遷移プロパティに関する非常に優れたドキュメントは見つかりません。以下はCSSスニペットです。 .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear; -webkit-transition: text-shadow .2s linear; -moz-transition: text-shadow .2s linear; -o-transition: text-shadow .2s linear; transition: text-shadow …

327 animation  css  css-transitions 

サムネイルの上にcssを置いたホバーでトランジションを実行して、ホバーで背景のグラデーションがフェードインするようにします。トランジションは機能しませんが、単純にrgba()値に変更すると、うまく機能します。グラデーションはサポートされていませんか？画像も使ってみましたが、画像が遷移しません。 別の投稿で誰かがやったように、それが可能であることは知っていますが、正確にはわかりません。任意のヘルプ>使用するCSSは次のとおりです。 #container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position: absolute; width: 200px; height: 150px; border: 1px #000 solid; margin: 30px; z-index: 2 } #container div a:hover { background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, …

215 css  gradient  css-transitions 

JavaScriptを使用せずに、ページの読み込み時にCSS3遷移アニメーションを使用することは可能ですか？ これは私が望むものの一種ですが、ページの読み込み時に： http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html これまでに見つけたもの CSS3 transition-delay、要素への影響を遅延させる方法。ホバーでのみ機能します。 CSS3 Keyframe、ロード時に機能しますが、非常に遅いです。そのため役に立たない。 CSS3の移行は十分高速ですが、ページの読み込み時にアニメーション化しません。

195 css  webkit  css-transitions  css-animations 

css3トランジションが開始または終了したかどうかを確認するために要素によって起動されるイベントはありますか？

190 javascript  events  css  transition  css-transitions 

CSSのみを使用してスライドイン遷移を生成するJavaScriptなしのクロスブラウザーソリューションはありますか？以下は、htmlコンテンツの例です。 <div> <img id="slide" src="http://.../img.jpg /> </div>

177 css  css-transitions 

そのため、CSS3トランジションとアニメーションの両方を実行する方法を理解しています。はっきりしないのは、私がググってみましたが、いつどれを使用するかです。 たとえば、ボールをバウンドさせたい場合は、アニメーションが最適です。キーフレームを提供すると、ブラウザが中間フレームを実行し、素晴らしいアニメーションが作成されます。 ただし、いずれの方法でも上記の効果が得られる場合があります。シンプルで一般的な例は、Facebookスタイルのスライド式ドロワーメニューを実装することです。 この効果は、次のような遷移によって実現できます。 .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ または、次のようなアニメーションを通じて： .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); …

155 css  css-transitions  css-animations 

CSSトランジションを使用して「フェードインフェードアウト」効果を作成しようとしています。しかし、私はこれを背景画像で機能させることができません... CSS： .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background …

121 css  background  background-image  css-transitions 

だから私はa要素にアタッチされた次のCSS遷移を持っています： a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in; transition:color 0.1s ease-in, background-color 0.1s ease-in; } 特定のa要素でこれらの継承された遷移を無効にする方法はありますか？ a.tags { transition: none; } 仕事をしていないようです。

117 css  transitions  css-transitions 

.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } これは、ホバーインしたときだけ不透明度をアニメーション化し、オブジェクトをマウスで離れたときはアニメーション化しないのはなぜですか？ デモはこちら：http : //jsfiddle.net/7uR8z/ ​

115 css  css-transitions 

CSS3トランジションの違いは何だease-in、ease-outなどは、？

112 css  css-transitions 

CSSトランジションをbackground-position以外のすべてのプロパティに適用したいと思います。私はそれをこのようにしようとしました： .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease 0s; transition: background-position …

108 css  css-transitions