上記作例のアニメーションを、現在私が制作しているReactのプロジェクトの背景に使用したいと思い、Scssに書き換えたのですがアニメーションが動きません。
エラーメッセージはありません。
上記作例のアニメーションを背景に適用する方法をご教示いただけないでしょうか。
作例のコード
Haml
1#stars 2#stars2 3#stars3
Sass
1@import compass 2 3@function multiple-box-shadow ($n) 4 $value: '#{random(2000)}px #{random(20000)}px #FFF' 5 @for $i from 2 through $n 6 $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF' 7 8 @return unquote($value) 9 10$shadows-small: multiple-box-shadow(700) 11$shadows-medium: multiple-box-shadow(200) 12$shadows-big: multiple-box-shadow(100) 13 14html 15 height: 100% 16 background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) 17 overflow: hidden 18 19#stars 20 width: 1px 21 height: 1px 22 background: transparent 23 box-shadow: $shadows-small 24 animation : animStar 50s linear infinite 25 26 &:after 27 content: " " 28 position: absolute 29 top: 2000px 30 width: 1px 31 height: 1px 32 background: transparent 33 box-shadow: $shadows-small 34 35#stars2 36 width: 2px 37 height: 2px 38 background: transparent 39 box-shadow: $shadows-medium 40 animation : animStar 100s linear infinite 41 42 &:after 43 content: " " 44 position: absolute 45 top: 2000px 46 width: 2px 47 height: 2px 48 background: transparent 49 box-shadow: $shadows-medium 50 51#stars3 52 width: 3px 53 height: 3px 54 background: transparent 55 box-shadow: $shadows-big 56 animation : animStar 150s linear infinite 57 58 &:after 59 content: " " 60 position: absolute 61 top: 2000px 62 width: 3px 63 height: 3px 64 background: transparent 65 box-shadow: $shadows-big 66 67@keyframes animStar 68 from 69 transform: translateY(0px) 70 to 71 transform: translateY(-2000px) 72
Sassの書き換え
SassからScssへ書き換えるツールが見つけられなかったので、手作業で下記のように書き換えました。
また、ひとまず動作をテストするためにDOM要素を一つにしています。
そのほかできるだけ行数を減らすために、CodePen上での動作に影響を与えなかったものは削除したり書き換えています。
html
1<div id="stars" />
Scss
1@function multiple-box-shadow ($n) { 2 $value: '#{random(2000)}px #{random(20000)}px #FFF'; 3 @for $i from 2 through $n { 4 $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'; 5 } 6 @return unquote($value); 7} 8 9html { 10 height: 100%; 11 background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); 12 overflow: hidden; 13} 14 15#stars { 16 width: 1px; 17 height: 1px; 18 background: transparent; 19 box-shadow: multiple-box-shadow(700); 20 animation: animStar 50s linear infinite; 21 22 &:after { 23 content: ""; 24 position: absolute; 25 top: 2000px; 26 width: 1px; 27 height: 1px; 28 background: transparent; 29 box-shadow: multiple-box-shadow(700); 30 } 31} 32 33@keyframes animStar { 34 from { 35 transform: translateY(0px); 36 } 37 to { 38 transform: translateY(-2000px) 39 } 40}
上記書き換え後コードはCodePen上では機能しますが、自分のプロジェクトに引っ張ってくるとアニメーションが起こりません。
あなたの回答
tips
プレビュー