- 締切済み
CSS3キーフレームアニメーションで%毎の時間指定
CSS3キーフレームアニメーションで、 アニメーション全体ではなく、%毎の時間指定をするにはどうすればよいでしょうか？ ・例えば、95%に記述した処理を、30秒かけて実施するには？ 95%{opacity:0.2;animation-duration:30s}？
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
関連するQ&A
- 次のhtml・cssでspan内の文字を点滅させる
次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 但し、テスト1が表示されている間は、テスト2と3は消えており、 テスト2、3が表示されている間はテスト1が消えている状態にしたいです。 なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。 <div class="test"> <span class="brinking1">テスト1</span> <span class="brinking2">テスト2</span> <span class="brinking3">テスト3</span> </div> <style> .test { margin: auto; background-color: white; position: relative; } .test blinking { width: 50%; animation-name: test; -webkit-animation-name: test; animation-duration:blink 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;} .test .brinking1 { display: block; margin: 0 auto; } .test .brinking2,.test .brinking3 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 25%; } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } </style>
- 締切済み
- CSS
- cssのanimationの設定の仕方
Animationの表示タイミングが合わないので教えてください。 今回初めてcssのanimationを使ってみました。 同時に、jQuery.BgSwitcher を使って背景画像５枚を５秒間づつ表示させてループさせています。（合計２５秒間）そして、cssのanimation でテキストA,B,Cの３枚を２５秒間表示させています。 表示タイミングは 【背景画像1を表示 テキストＡを表示 テキストＢを非表示 テキストＣを非表示】 【背景画像2を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像3を表示 テキストＡを非表示 テキストＢを表示 テキストＣを非表示】 【背景画像4を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像5を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを表示】 背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚５秒です。５枚ですので２５秒でループです。animationが適応されているテキストＡ，Ｂ，Ｃの animation-duration: 25s; にしています。 テキスト画像Ａ，Ｂ，Ｃは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。 初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい５分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストＡが背景画像5で表示されるようになってしまいます。 jQuery.BgSwitcherでの背景画像５枚の１ループの時間は２５秒。animationのテキストA,B,Cのanimation-duration: 25s; なのですが、徐々にずれてしまいます。 animation側の設定に問題があるかもしれませんので教えていただけないでしょうか？ 現在のテストサイトは下記です。 http://cm-creation.net/yoshida/text-anime-test/index13.html どうぞよろしくお願いいたします。Cssとhtml設定は下記です。 ■cssの設定 .bg-slider { width: 99.1vw; height: 100vh; background-position:center center; background-size: cover; display: flex; justify-content: center; position: relative; } .textA { position: absolute; top: 5%; left:20%; animation-name:animation1; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textB { position: absolute; top: 5%; right:20%; animation-name:animation2; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textC { position: absolute; top: 5%; animation-name:animation3; animation-duration: 25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } @keyframes animation1 { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 5% { opacity: 1; transform: translate3d(0, 0, 0); } 26% { opacity: 0; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation2 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 41% { opacity: 0; transform: translate3d(0, 30px, 0); } 45% { opacity: 1; transform: translate3d(0, 0, 0); } 66% { opacity: 0; transform: translate3d(0, 0px, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation3 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 81% { opacity: 0; transform: translate3d(0, 30px, 0); } 85% { opacity: 1; transform: translate3d(0, 0, 0); } 101% { opacity: 0; transform: translate3d(0, 0px, 0); } 102% { opacity: 0; transform: translate3d(0, 0, 0); } } ■html <script> jQuery(function($) { $('.bg-slider').bgSwitcher({ images: image/main10.jpg','image/main11.jpg','image/main12.jpg','image/main13.jpg','image/main14.jpg'], // 切り替える背景画像を指定 interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒 loop: true, // shuffle: false, // effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定 duration: 500, // エフェクトの時間を指定します。 easing: "swing" // エフェクトのイージングをlinear,swingから指定 }); }); </script> <div class="container-fluid px-0 bg-slider " > <div class="textA"><img src="image/item8.png" class="img-fluid" alt=""/></div> <div class="textB"><img src="image/item9.png" class="img-fluid" alt=""/></div> <div class="textC"><img src="image/item10.png" class="img-fluid" alt=""/></div> </div>
- ベストアンサー
- HTML
- jquery animate
もともとID hogeはopacity: 0で透明 $("#hoge,#poge").animate({opacity: 1},{duration: 1000,easing:"linear",queue: true}).animate({opacity: 1},{duration: 2000,easing:"linear",queue: false}); 上記で ID hogeは１秒かけて透明度０（opacity: 1）となりそれがおわると2秒かけて半透明になりますが、 この間に表示したままの時間 （opacity: 1のままの時間）を５秒とる場合はどのようにしたらよいでしょうか？ easingを自作する必要がありますか？その他の記述方法がありますか？
- ベストアンサー
- JavaScript
- jQueryでCSSのプロパティに変数を付与
javascriptで、ブラウザの種類を判別し変数prefix にfirefoxなら-moz-、webkitなら-webkit-を格納するスクリプトを作成しました。 jquery1.7にてCSSを操作する際に $("#hoge").css({ prefix + "animation-name" : "name", prefix + "animation-duration": "5s" }); と記述した所、構文エラーになってしまいました。 ｊQueryでCSSの値に変数を使用することはできるようですが、プロパティに変数を使用することは出来ないのでしょうか？
- ベストアンサー
- JavaScript
- javascriptでCSSを書き換える際の記述
javascriptのイベントで背景を透明化するため .css("opacity","0") としていたのですが、ＩＥだけうまく透過しませんでした そこでＩＥ用に filter: alpha( opacity=0) を適用するように書き足したいのですが どうもうまくいきません どのように記述すればよいでしょうか？
- 締切済み
- JavaScript
- cssで文字背景を透明化できますか？
cssで文字背景を透明化できますか？ 文字の背景にbackground-colorで色をつけ、その色を透けて見せたいのですが、 わかりません・・。 「-moz-opacity:50；」とか「filter:alpha(opacity=50)；」などで色の透明効果を 出せるとありましたが、ソースをどう記述すればいいのかわかりません。 よろしくお願いしますm(_ _)m
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで「html」にも背景指定をするのはどのような場合？
CSSで「html」にも背景指定をするのはどのような場合？ CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか？ もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる？と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。
- ベストアンサー
- CSS
- css box 背景画像透過表示させる
cssboxで枠を作っています。メインボックスにbodyで指定した背景を透過して入れたいと思っています。こんなcssを使ってみましたが背景どころか全て薄くなってしまいました。 filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;
- ベストアンサー
- CSS
- CSSで、テキストのみの背景色を指定するには？
CSSで、テキストのみの背景色を指定するには？ ＣＳＳを使って、 h1 { color: orange; background: green; } とすると、<h1>タグで示されたテキストの行の背景色が緑色になりますが、 行全体ではなく、テキストのみの背景色を指定するにはどうすればよいでしょうか？
- 締切済み
- その他(ソフトウェア)
- CSSでwidthの指定は%、pxどっちがいい
HTML5、CSS3の記述方法で教えていただきたい事がございます。 横幅を指定する場合には、px、%、vwなどどんな単位で記述するのがいいのでしょうか。また、%とpxを混ぜて使ってもいいのでしょうか。高さも%を使うものでしょうか。 お手数ではございますが、それぞれの説明サイトはあるのですが、では実際にどれを使うのが良いかの記述はどこにもなかったので、書き込ませていただきました。 知識をお持ちの方、よろしくお願いいたします。
- 締切済み
- CSS
