こんにちは。下記のようなサイトを見つけました。
https://flowers.naked.works/2018rondo/
ここで、「Event」と書かれたところの、背景のグラデーションのアニメーションが美しいと思います。
コードを見たところ、
css
1.content__2018rondo .event__case__event { 2 padding: 80px 0; 3 background: -webkit-linear-gradient(5deg, #fcf38c, #ea94bc, #e1d2ea); 4 background: -o-linear-gradient(5deg, #fcf38c, #ea94bc, #e1d2ea); 5 background: linear-gradient(85deg, #fcf38c, #ea94bc, #e1d2ea); 6 background-size: 600% 600%; 7 -webkit-animation: gd__anime 8s ease infinite; 8 animation: gd__anime 8s ease infinite; 9}
このようになっておりました。
animation-nameにはgd__animeとありますが、これを消すとアニメーションが起こらなくなりました。
下記サイトを参考に、animation-nameの意味を調べましたが、@keyframesが設定されている様子がないので、
おかしいなと思いました。
http://www.htmq.com/css3/animation-name.shtml
なぜこのアニメーションにはanimation-nameが必要なのでしょうか?
こんなものなのでしょうか?
まだまだ初心者なので、よくわからずに質問しているかもしれませんが、お付き合いいただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/16 09:39