cssのアニメーションのanimation-nameについて

Question

こんにちは。下記のようなサイトを見つけました。

https://flowers.naked.works/2018rondo/

ここで、「Event」と書かれたところの、背景のグラデーションのアニメーションが美しいと思います。

コードを見たところ、

.content__2018rondo .event__case__event {
    padding: 80px 0;
    background: -webkit-linear-gradient(5deg, #fcf38c, #ea94bc, #e1d2ea);
    background: -o-linear-gradient(5deg, #fcf38c, #ea94bc, #e1d2ea);
    background: linear-gradient(85deg, #fcf38c, #ea94bc, #e1d2ea);
    background-size: 600% 600%;
    -webkit-animation: gd__anime 8s ease infinite;
    animation: gd__anime 8s ease infinite;
}

このようになっておりました。

animation-nameにはgd__animeとありますが、これを消すとアニメーションが起こらなくなりました。
下記サイトを参考に、animation-nameの意味を調べましたが、@keyframesが設定されている様子がないので、
おかしいなと思いました。

http://www.htmq.com/css3/animation-name.shtml

なぜこのアニメーションにはanimation-nameが必要なのでしょうか？
こんなものなのでしょうか？

まだまだ初心者なので、よくわからずに質問しているかもしれませんが、お付き合いいただければ幸いです。

Answer 1

animation: gd__anime 8s ease infinite;
こちらで書かれている「gd__anime」は別の場所で定義されており、そこにkeyframeも設定されています。
この部分で書かれている意味は、
gd__animeを８秒間隔で
ease というイージングで
infinite　無限に繰り返す
という意味です。

ソースコードを見られるのであれば、cssの中をのぞいて「gd__anime」で文字検索してみると良いと思います。

Comments

[takane]

すみません。凡ミスでした。