質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

3回答

3125閲覧

CSSグラデーションのアニメーションについて

monopory

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2018/04/16 03:34

編集2018/04/16 05:09

cssのグラデーションでIEのことも考慮すると,backgroundにlinear-gradientなどを適用させると思うのですが、
hoverしたときに単色→グラデーションにアニメーションさせるには一番容易な方法は何でしょうか...?

一つのグラデーションをcssアニメーションさせるとなるとbackground-imageにtransitionは適用できないので、以下の方法が一般的だと思いますが、

以下はただの例です。

.button{ background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); background-size: 600% 600%; animation: AnimationName 10s ease infinite; } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

このやり方だとおそらく単色からの変化はできそうにないと思っております。

もし、単色のbackgroundからグラデーションにアニメーションしつつ切り替えるにはcssだけでは完結できないものなのでしょうか...?

やりたいこと

background: #fff; ↓ [hoverしたとき] background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/04/16 03:52 編集

まずは質問者さん自身で試されたコード等を提示し、状況も併せて質問してください。このままでは「やりたい事の丸投げ」と取られて低評価になると思われます。
defghi1977

2018/04/16 03:54

具体的なコードを提示し, 質問の対象を明確化して下さい.
m.ts10806

2018/04/16 04:20

bodyの背景なんですね。
guest

回答3

0

ベストアンサー

こういうことでしょうか

html

1<div class="sample"></div>

css

1.sample { 2 position: relative; 3 width:500px; 4 height:500px; 5 background-image: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); 6 border: 1px solid; 7} 8 9.sample::before { 10 content: ""; 11 display: block; 12 position: absolute; 13 top: 0; 14 right: 0; 15 bottom: 0; 16 left: 0; 17 background-color: #fff; 18} 19 20.sample:hover::before { 21 opacity: 0; 22 transition: opacity 0.2s ease-out; 23}

投稿2018/04/16 06:04

yukosnoopy

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

monopory

2018/04/16 06:50

ありがとうございます! こちらで再現できました!
guest

0

CSSだけで無理やりやろうとするとこんな感じでしょうか。

HTML

1<div class="button"><div class="foo">BTN</div></div>

CSS

1.foo { 2 background-color: rgba(255,255,255,1); 3 transition: background-color 1s; 4} 5.foo:hover { 6 background-color: rgba(255,255,255,0); 7} 8.button { 9 background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); 10 background-size: 600% 600%; 11 animation: AnimationName 10s ease infinite; 12 background-size: 600% 600%; 13} 14 15@keyframes AnimationName { 16 0%{background-position:0% 50%} 17 50%{background-position:100% 50%} 18 100%{background-position:0% 50%} 19}

codepenで確認する↓
https://codepen.io/RaRukAnA/pen/qoeOra/

投稿2018/04/16 05:48

Atsushi_Okumura

総合スコア355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

monopory

2018/04/16 06:50

ありがとうございます! できました。
guest

0

一応アニメーションしているようには見えますが・・・

css

1.button{ 2 background:#ccc; 3 width:500px; 4 height:500px; 5 6} 7.button:hover{ 8 background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); 9 background-size: 600% 600%; 10 animation: AnimationName 10s ease infinite; 11} 12 13@keyframes AnimationName { 14 0%{background-position:0% 50%} 15 50%{background-position:100% 50%} 16 100%{background-position:0% 50%} 17} 18

html

1<button class="button">aaaa</button>

投稿2018/04/16 04:27

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

monopory

2018/04/16 04:29

質問足らずですみません。 指定したグラデーション内であればkeyframeでいけると思いますが、 もともと単色だったものをグラデーションに変化させたいです。
m.ts10806

2018/04/16 04:32

うーん私の理解力が足りていないのか、ピンと来ていません。 図か何かあったほうがいいかもしれませんね。
m.ts10806

2018/04/16 04:41

一定時間アニメなしグラデーションを保持した後、アニメーションさせたいということでしょうか・・・。 javascriptが必要そうですね。
monopory

2018/04/16 05:32

Boxの背景色が白のものがあったとして、そこにhoverしたら背景色がグラデーションに切り替わるアニメーションをcssで行いたいです。
m.ts10806

2018/04/16 05:42

あー、そういうことですね。 アニメーションして最終的には指定したグラデーションに落ち着く と。
monopory

2018/04/16 06:03

そうなります。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問