diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index 36bf08a..ea748be 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -307,3 +307,82 @@ art-panel[size],
flex: 0 0 100%;
scroll-snap-align: center;
}
+
+/*Анимация декор-элементов*/
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@keyframes revers {
+ 0% { transform: rotate(-19deg); }
+ 100% { transform: rotate(-200deg); }
+}
+
+@keyframes trans {
+ 0% { transform: translate(0px); }
+ 100% { transform: translate(-270px); }
+}
+
+@keyframes reverans {
+ 20% { transform: translate(0px); }
+ 100% { transform: translate(350px); }
+}
+
+#circle,
+#square {
+ animation-timeline: view();
+ animation-range: contain 30% contain 125%;
+}
+
+#sticks::before {
+ animation-timeline: view();
+ animation-range: contain 30% contain 125%;
+}
+
+#square_yel {
+ animation-timeline: view();
+ animation-range: contain 25% contain 125%;
+}
+
+
+#frame_square {
+ animation-timeline: view();
+ animation-range: contain 0% contain 125%;
+}
+
+#two_circle {
+ animation-timeline: view();
+ animation-range: contain 10% contain 125%;
+}
+
+@supports not (animation-timeline: view()) {
+ #circle,
+ #square,
+ #two_circle {
+ animation: spin 12s linear infinite;
+ }
+
+ #sticks::before {
+ animation: revers 12s linear infinite;
+ }
+
+ #square_yel {
+ animation: trans 12s linear infinite;
+ }
+
+ #frame_square {
+ animation: reverans 12s linear infinite;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ #circle,
+ #square,
+ #sticks::before,
+ #square_yel,
+ #frame_square,
+ #two_circle {
+ animation: none;
+ }
+}
\ No newline at end of file
diff --git a/src/index.ejs b/src/index.ejs
index 9887d3c..2fa0cf6 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -131,7 +131,7 @@ area: 'main'
}
const groupDecor = {
twoCircle: "Ps-a_af Ct_af T49p_af L67p_af -Sz51_af Bdrd100p_af Bgc#394EB6_af Ps-a_b Ct_b T60p_b R10p_b -Sz82_b Bdrd100p_b Bgc#16348C_b",
- twoSticks: "Ps-a_af Ct_af T81p_af L-17p_af W162_af H6_af Bdrd4_af Bgc-$core202_af Ps-a_b Ct_b T49p_b L-86p_b W280_b H3_b Bdrd50p_b Bgc-$core231_b Tf_b -Rt-19d_b",
+ twoSticks: "Ps-a_af Ct_af T81p_af L-17p_af W162_af H6_af Bdrd4_af Bgc-$core202_af Ps-a_b Ct_b T49p_b L-86p_b W280_b H3_b Bdrd50p_b Bgc-$core231_b Tf_b -Rt-19d_b Ann-revers_b Antf-l_b Anfm-f_b",
circle: "Ps-a_af Ct_af T-124p_af L-44p_af -Sz40_af Bdrd100p_af Bgc-$core221_af"
}
%>
@@ -143,14 +143,14 @@ area: 'main'
<%# decor %>
@@ -372,15 +372,15 @@ area: 'main'