在慢速computer上禁用CSS转换

我的网站上有一个昂贵的CSS转换（我创建了一个云，如果你从顶部向下滚动，它会变得更透明）。在旧电脑上，我的整个页面开始滞后（滚动也滞后），所以有什么解决办法吗？ -使转换变得不那么平滑，但留下CPU进行滚动等 -或者检测较旧/较慢的计算机，并禁用整个转换

之前： 之后： 过渡时间：10秒

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）<100）{
$（“#云回”）.css（'box-shadow'，'100vw 110vh 30px 0px#fff'））
}否则{
$（“#云背”）.css（'box-shadow'，'100vw 110vh 200px-100px#fff'））
}
});
：根目录{
--行动：rgb（40、51、99）；
--梯度：线性梯度（145度，rgb（40,51,99），#13cadd）；
--阴影：0.03雷姆0 rgba（0,0,0,4）；
--背景：#FFF；
--灰白色：#f5；
--块文本：#FFF；
--梯度光：#13cadd；
--梯度暗：rgb（40,51,99）；
--浅蓝色：#8cc9e6；
--天空：rgb（9,33,70）；
--蓝色：#007bff；
--靛蓝：#6610f2；
--紫色：#6f42c1；
--粉红色：#e83e8c；
--红色：#dc3545；
--橙色：#f4623a；
--黄色：#ffc107；
--绿色：#28a745；
--teal:#20c997；
--青色：#17a2b8；
--白色：#fff；
--灰色：#6c757d；
--灰黑色：#343a40；
--初级：#f4623a；
--二级：#6c757d；
--成功：28a745；
--资料:#17a2b8 ;；
--警告：#ffc107；
--危险：#dc3545；
--灯光#f8f9fa；
--深色：#343a40；
--断点xs:0；
--断点sm:576px；
--断点md:768px；
--断点lg:992px；
--断点xl:1200px；
}
*,
*：：之前，
*：：之后{
框大小：边框框；
}
html{
字体系列：“Roboto”；
线高：1.15；
-webkit文本大小调整：100%；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
背景色：var（--sky）；
}
标题，
部分{
显示：块；
}
身体{
保证金：0；
字号：1rem；
字体大小：400；
线高：1.5；
颜色：#212529；
文本对齐：左对齐；
背景色：var（--背景色）；
溢出x：隐藏；
}
h2，
h4{
边际上限：0；
边缘底部：0.5雷姆；
}
p{
边际上限：0；
边缘底部：1rem；
}
svg{
溢出：隐藏；
垂直对齐：中间对齐；
}
按钮：不（：禁用），
[type=“button”]：不（：禁用），
[type=“reset”]：不（：禁用），
[type=“submit”]：未（：禁用）{
光标：指针；
}
：-webkit文件上载按钮{
字体：继承；
-webkit外观：按钮；
}
h2，
h4{
边缘底部：0.5雷姆；
字号：500；
线高：1.2；
}
氢{
字号：2rem；
}
h4{
字体大小：1.5rem；
}
.集装箱{
宽度：100%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
@介质（最小宽度：576px）{
.集装箱{
最大宽度：540像素；
}
}
@介质（最小宽度：768px）{
.集装箱{
最大宽度：720px；
}
}
@介质（最小宽度：992px）{
.集装箱{
最大宽度：960像素；
}
}
@介质（最小宽度：1200px）{
.集装箱{
最大宽度：1140px；
}
}
.行{
显示器：flex；
柔性包装：包装；
右边距：-15px；
左边距：-15px；
}
上校，
.col-lg-3，
.col-lg-8{
位置：相对位置；
宽度：100%；
右侧填充：15px；
左侧填充：15px；
}
上校{
弹性基准：0；
柔性生长：1；
最大宽度：100%；
}
@介质（最小宽度：992px）{
.col-lg-3{
弹性：0.25%；
最大宽度：25%；
}
.col-lg-8{
弹性：0.66.66667%；
最大宽度：66.66667%；
}
}
.已验证。自定义控件输入：有效：焦点：未（：选中）~.自定义控件标签：：之前，
.custom控件输入。有效：焦点：未（：选中）~.custom控件标签：：before{
边框颜色：#28a745；
}
.已验证。自定义控件输入：无效：焦点：未（：选中）~.自定义控件标签：：之前，
.custom控件输入。无效：焦点：未（：选中）~.custom控件标签：：before{
边框颜色：#dc3545；
}
.btn主：不（：禁用）：不（.disabled）：活动，
.btn主：不（：禁用）：不（.disabled）。活动{
颜色：#fff；
背景色：#ee3e0d；
边框颜色：#e23a0d；
}
.btn主：不（：禁用）：不（.disabled）：活动：焦点，
.btn主：未（：禁用）：未（.disabled）。活动：焦点{
盒影：0.2rem rgba（246,122,88,0.5）；
}
.btn次要：不（：禁用）：不（.disabled）：活动，
.btn辅助：不（：禁用）：不（.disabled）.活动{
颜色：#fff；
背景色：#545b62；
边框颜色：#4e555b；
}
.btn次要：不（：禁用）：不（.disabled）：活动：焦点，
.btn次要：未（：禁用）：未（.disabled）。活动：焦点{
盒影：0.2rem rgba（130、138、145、0.5）；
}
.btn成功：未（：禁用）：未（.disabled）：活动，
.btn成功：未（：禁用）：未（.disabled）。活动{
颜色：#fff；
背景色：#1e7e34；
边框颜色：#1c7430；
}
.btn成功：未（：禁用）：未（.disabled）：活动：焦点，
.btn成功：未（：禁用）：未（.disabled）。活动：焦点{
盒影：0.2rem rgba（72,180,97,0.5）；
}
.btn信息：不（：禁用）：不（.disabled）：活动，
.btn信息：不（：禁用）：不（.disabled）。活动{
颜色：#fff；
背景色：#117a8b；
边框颜色：#10707f；
}
.btn信息：不（：禁用）：不（.disabled）：活动：焦点，
.btn信息：未（：禁用）：未（.disabled）。活动：焦点{
盒影：0.2rem rgba（581761950,0.5）；
}
.btn警告：未（：禁用）：未（.disabled）：激活，
.btn警告：未（：禁用）：未（.disabled）。活动{
颜色：#212529；
背景色：#d39e00；
边框颜色：#c69500；
}
.btn警告：未（：禁用）：未（.disabled）：活动：焦点，
.btn警告：未（：禁用）：未（.disabled）。活动：焦点{
盒影：0.2rem rgba（222170,12,0.5）；
}
.btn危险：不（：禁用）：不（.disabled）：激活，
.btn危险：不（：禁用）：不（.disabled）。激活{
颜色：#fff；
背景色：#bd2130；
边框颜色：#b21f2d；
}
.btn危险：未（：禁用）：未（.disabled）：活动：焦点，
.btn危险：未（：禁用）：未（.disabled）。活动：焦点{
盒影：0.2rem rgba（225,83,97,0.5）；
}
.btn灯光：不（：禁用）：不（.disabled）：激活，
.btn灯：不（：禁用）：不（.disabled）.激活{
颜色：#212529；
背景色：#dae0e5；
边界-