背景のグラデアニメーションが動かなくて困った話

チョコやばい……モンブランやばい……

背景をグラデでアニメーションさせたい!何故かって?グラデが好きで動いてるほうが好きだからだ!
まあやったことあるというか、コピペするだけだもんね、と余裕綽々に構えコードコピペしたら、
グラデが動かない
なんなら幅変えるとグラデが変わっててもはやグラデもおかしい

(背景グラデアニメーションはめっちゃ便利なサイトがあるのでそこからコピペ↓)

CSS Gradient Animator
A CSS generator to create beautiful animated gradients for use on your website.

動かない時のコード

bodyに貼り付ければいいんだろ?と以下のように。改行位置がきもいけどなんかコピペで反映してくれなくてやけくそ

animationも@keyframesも全部ひっくるめてbodyに書いてしまっていた

body { 
width: 100%;  
height: 100vh;  
background: linear-gradient(11deg, #034196, #1c6edf, #5e9cf2, #d04f29);  
background-size: 800% 800%;  
-webkit-animation: AnimationName 29s ease infinite;  
-moz-animation: AnimationName 29s ease infinite;  
animation: AnimationName 29s ease infinite;

@-webkit-keyframes AnimationName {   
0% {      background-position: 88% 0%;    }    
50% {      background-position: 13% 100%;    }    
100% {      background-position: 88% 0%;    }  
}  

@-moz-keyframes AnimationName {    
0% {      background-position: 88% 0%;    }    
50% {      background-position: 13% 100%;    }    
100% {      background-position: 88% 0%;    }  
}  

@keyframes AnimationName {    
0% {      background-position: 88% 0%;    }    
50% {      background-position: 13% 100%;    }    
100% {      background-position: 88% 0%;    }  
}  
}

@keyframes はbodyに突っ込んだらいけない

当然のように全部背景グラデアニメーションをかけたいとこに、サイトで生成されたコードを突っ込んだがそれが間違っていた……

正解は

サイトの上3行分 animation ~ は背景グラデアニメーションにしたいとこにいれる
そこ以外の @keyframes  は独立

こんな感じが正解だった……↓

body { 
width: 100%;  
height: 100vh;  
background: linear-gradient(11deg, #034196, #1c6edf, #5e9cf2, #d04f29);  
background-size: 800% 800%;  
-webkit-animation: AnimationName 29s ease infinite;  
-moz-animation: AnimationName 29s ease infinite;  
animation: AnimationName 29s ease infinite;
}

 @-webkit-keyframes AnimationName {   
0% {      background-position: 88% 0%;    }    
50% {      background-position: 13% 100%;    }    
100% {      background-position: 88% 0%;    }  }  

@-moz-keyframes AnimationName {    
0% {      background-position: 88% 0%;    }    
50% {      background-position: 13% 100%;    }    
100% {      background-position: 88% 0%;    }  }  

@keyframes AnimationName {    
0% {      background-position: 88% 0%;    }    
50% {      background-position: 13% 100%;    }    
100% {      background-position: 88% 0%;    }  }  
} 

他の動いてるサイト見てあれれ~?となって気づいた……なぜ気づかなかった……
でも解決してよかった……

コメント

タイトルとURLをコピーしました