diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css
index c77ba09de..afd1b25ed 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css
@@ -8,6 +8,10 @@
}
}
+.ricochet-visualizer-penetrating-shell {
+ animation: penetrating-shell-slide 3s infinite;
+}
+
@keyframes ricocheting-shell-slide {
0% {
margin-top: -18rem;
@@ -39,13 +43,7 @@
}
}
-.ricochet-visualizer-penetrating-shell {
- position: absolute;
- animation: penetrating-shell-slide 3s infinite;
-}
-
.ricochet-visualizer-ricocheting-shell {
- position: absolute;
animation: ricocheting-shell-slide 3s infinite;
}
@@ -55,18 +53,17 @@
@keyframes surface-impact {
0%,
- 10% {
+ 60% {
opacity: 1;
width: 0;
height: 0;
}
- 15%,
- 30% {
+ 66% {
opacity: 1;
- width: 3rem;
- height: 3rem;
+ width: 1.5rem;
+ height: 1.5rem;
}
- 45%,
+ 72%,
100% {
opacity: 0;
width: 3rem;
@@ -75,5 +72,27 @@
}
.ricochet-visualizer-surface-impact {
- animation: surface-impact 3s infinite;
+ animation: surface-impact 3s linear infinite;
+}
+
+@keyframes puncture {
+ 0%,
+ 10% {
+ opacity: 1;
+ margin-top: -6rem;
+ }
+ 15%,
+ 30% {
+ opacity: 1;
+ margin-top: -1rem;
+ }
+ 45%,
+ 100% {
+ opacity: 0;
+ margin-top: -1rem;
+ }
+}
+
+.ricochet-visualizer-puncture {
+ animation: puncture 3s infinite;
}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx
index 624034f28..cf2c203d9 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx
@@ -38,6 +38,25 @@ export function RicochetVisualizer({ stats }: VisualizerProps) {
backgroundImage: `url(/assets/images/tankopedia/visualizers/ricochet/armor-hash.png)`,
}}
/>
+
+
+
+
@@ -160,6 +180,7 @@ export function RicochetVisualizer({ stats }: VisualizerProps) {
transform: 'translateY(50%) rotate(135deg)',
width: '100%',
height: '100%',
+ position: 'absolute',
}}
/>