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', }} />