CSS градиент анимация, убрать жесткие границы?

Question

[GeKskill]

Как поправить такую анимацию, чтобы не было видно резкого перехода к полной прозрачности? На полном экране градиент к прозрачному плавный, начинаешь уменьшать и появляются отчетливые границы градиента т.е он как будто отсекается.
https://jsfiddle.net/cruasv7y/

Comments

[szQocks]

заблюрить либо перечислить больше кол-во цветов для более плавного перехода, попробуй потом расскажешь получилось или нет

[GeKskill]

szQocks, блюр и центральную часть размажет, не получится сделать типа блика. А цвета я и так добавил, тоже прозрачный с отступом в 5% с обеих сторон не помогает... Вроде как увеличение width раза так в 4 улучшает дело, но там потом с анимацией косяк, слишком долго ждать приходится.

[szQocks]

GeKskill,

background: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.5) 55%, transparent 80%, rgba(255, 255, 255, 0.5) 55%, transparent 25%);

хз пойдёт нет, + ещё заблюрь это чуть чуть и идеально выйдет думаю хм filter: blur(1.5px) мб

[GeKskill]

szQocks, Не, проблему не решает. Но все равно спасибо за участие. Скорее всего сейчас градиент в svg сделаю, должно сработать

[szQocks]

GeKskill, на сколько я знаю, градиент ещё связан с монитором, не помню с чем именно, но если монитор фигня то и градиент будет беспонт полный, тот код что я скинул, у меня с ним плавный переход, даже без блюра

[Сергей Сергей]

переменные не анимируются, капец просто

body {
	background: black;
	height: 100vh;
}
/* Стили для блоков с классом loading */
.loading {
  position: relative;
  overflow: hidden; /* Обрезаем все, что выходит за пределы блока */
}

.loading::before {
  --off: 0%;
  content: '';
  position: absolute;
  top: 0;
  left: 0%; /* Начинаем за пределами блока слева */
  width: 100%; /* Задаем ширину равной ширине блока */
  height: 100%;
  background: linear-gradient(-45deg,
    rgba(255, 255, 255, 0) calc( var(--off) + 0% ),
    rgba(255, 255, 255, 0) calc( var(--off) + 5% ),
    rgba(240, 240, 240, 0.3) calc( var(--off) + 50% ),
    rgba(255, 255, 255, 0) calc( var(--off) + 95% ),
    rgba(255, 255, 255, 0) calc( var(--off) + 100% )
    ); /* Прозрачный градиент */
  animation: shine 5s linear infinite; /* Анимация для псевдоэлемента */
  z-index: 1; /* Поднимаем выше основного контента блока */
}

/* Небольшие изменения в анимации */
@keyframes shine {
0% { --off: 100.0%; }
0.8% { --off: 98.4%; }
1.6% { --off: 96.8%; }
2.4% { --off: 95.2%; }
3.2% { --off: 93.6%; }
4% { --off: 92.0%; }
4.8% { --off: 90.4%; }
5.6% { --off: 88.8%; }
6.4% { --off: 87.2%; }
7.2% { --off: 85.6%; }
8% { --off: 84.0%; }
8.8% { --off: 82.4%; }
9.6% { --off: 80.8%; }
10.4% { --off: 79.2%; }
11.2% { --off: 77.6%; }
12% { --off: 76.0%; }
12.8% { --off: 74.4%; }
13.6% { --off: 72.8%; }
14.4% { --off: 71.2%; }
15.2% { --off: 69.6%; }
16% { --off: 68.0%; }
16.8% { --off: 66.4%; }
17.6% { --off: 64.8%; }
18.4% { --off: 63.2%; }
19.2% { --off: 61.6%; }
20% { --off: 60.0%; }
20.8% { --off: 58.4%; }
21.6% { --off: 56.8%; }
22.4% { --off: 55.2%; }
23.2% { --off: 53.6%; }
24% { --off: 52.0%; }
24.8% { --off: 50.4%; }
25.6% { --off: 48.8%; }
26.4% { --off: 47.2%; }
27.2% { --off: 45.6%; }
28% { --off: 44.0%; }
28.8% { --off: 42.4%; }
29.6% { --off: 40.8%; }
30.4% { --off: 39.2%; }
31.2% { --off: 37.6%; }
32% { --off: 36.0%; }
32.8% { --off: 34.4%; }
33.6% { --off: 32.8%; }
34.4% { --off: 31.2%; }
35.2% { --off: 29.6%; }
36% { --off: 28.0%; }
36.8% { --off: 26.4%; }
37.6% { --off: 24.8%; }
38.4% { --off: 23.2%; }
39.2% { --off: 21.6%; }
40% { --off: 20.0%; }
40.8% { --off: 18.4%; }
41.6% { --off: 16.8%; }
42.4% { --off: 15.2%; }
43.2% { --off: 13.6%; }
44% { --off: 12.0%; }
44.8% { --off: 10.4%; }
45.6% { --off: 8.8%; }
46.4% { --off: 7.2%; }
47.2% { --off: 5.6%; }
48% { --off: 4.0%; }
48.8% { --off: 2.4%; }
49.6% { --off: 0.8%; }
50.4% { --off: -0.8%; }
51.2% { --off: -2.4%; }
52% { --off: -4.0%; }
52.8% { --off: -5.6%; }
53.6% { --off: -7.2%; }
54.4% { --off: -8.8%; }
55.2% { --off: -10.4%; }
56% { --off: -12.0%; }
56.8% { --off: -13.6%; }
57.6% { --off: -15.2%; }
58.4% { --off: -16.8%; }
59.2% { --off: -18.4%; }
60% { --off: -20.0%; }
60.8% { --off: -21.6%; }
61.6% { --off: -23.2%; }
62.4% { --off: -24.8%; }
63.2% { --off: -26.4%; }
64% { --off: -28.0%; }
64.8% { --off: -29.6%; }
65.6% { --off: -31.2%; }
66.4% { --off: -32.8%; }
67.2% { --off: -34.4%; }
68% { --off: -36.0%; }
68.8% { --off: -37.6%; }
69.6% { --off: -39.2%; }
70.4% { --off: -40.8%; }
71.2% { --off: -42.4%; }
72% { --off: -44.0%; }
72.8% { --off: -45.6%; }
73.6% { --off: -47.2%; }
74.4% { --off: -48.8%; }
75.2% { --off: -50.4%; }
76% { --off: -52.0%; }
76.8% { --off: -53.6%; }
77.6% { --off: -55.2%; }
78.4% { --off: -56.8%; }
79.2% { --off: -58.4%; }
80% { --off: -60.0%; }
80.8% { --off: -61.6%; }
81.6% { --off: -63.2%; }
82.4% { --off: -64.8%; }
83.2% { --off: -66.4%; }
84% { --off: -68.0%; }
84.8% { --off: -69.6%; }
85.6% { --off: -71.2%; }
86.4% { --off: -72.8%; }
87.2% { --off: -74.4%; }
88% { --off: -76.0%; }
88.8% { --off: -77.6%; }
89.6% { --off: -79.2%; }
90.4% { --off: -80.8%; }
91.2% { --off: -82.4%; }
92% { --off: -84.0%; }
92.8% { --off: -85.6%; }
93.6% { --off: -87.2%; }
94.4% { --off: -88.8%; }
95.2% { --off: -90.4%; }
96% { --off: -92.0%; }
96.8% { --off: -93.6%; }
97.6% { --off: -95.2%; }
98.4% { --off: -96.8%; }
99.2% { --off: -98.4%; }
100% { --off: 100%; }
}

[szQocks]

Сергей Сергей, говно какое-то

[GeKskill]

Сергей Сергей, Спасибо за рабочий вариант) Хотя и не думаю, что такое в прод пускать можно.

Answer 1

[Сергей delphinpro]

Градиент не помещается в свой контейнер (псевдоэлемент в данном случае).
можно увеличивать ширину контейнера или его высоту. можно не указывая высоту, задать aspect-ratio (aspect-ratio:8; для данного случая становится нормальным).
можно изменить контрольные точки. вместо пяти процентов поставить 20-25, но тогда он будет с более резким переходом.
Можно изменить наклон, увеличить угол относительно горизонта.
Можно совместить все методы для достижения оптимального резульата.

наглядно, на картинках

Градиент можно наглядно представить как скошенный прямоугольник. На картинке показан красным. Границы прямоугольника - этот момент перехода градиента в полностью прозрачный цвет.
Если ширина достаточная, то весь прямоугольник будет помещаться в холст и обрезок не будет



Однако, если ширину холста уменьшить, он перестанет помещаться

Comments

[GeKskill]

Спасибо. Угол только вертикальный нормально показывает) Но, наверное все таки уже проще svg градиент сделать и его по идее так плющить не будет.

[Сергей delphinpro]

GeKskill, если конкретно в вашем случае убрать width:100% и добавить aspect-ratio:8; то обрезок не будет. При данной высоте блока.

[GeKskill]

Сергей delphinpro, не, это надо для элементов которые ajax подгружаться будут, там разные форматы блоков