CSS Split Bullet animation effect
CSS Split Bullet animation
Similarly to the split CSS animation effect we create a very crude bullet impact animation. Insert a custom CSS clip-path#polygon to achieve different results.
<style>
.split-bullet {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: split-bullet;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes split-bullet {
0% { }
1% { transform: scale(1.2,1.2) rotate(5deg); filter:brightness(100%);}
2% { transform: scale(1,1) rotate(0deg); filter:brightness(10000%);
/* Simple CSS Bullet hole graphic - replace with your own if you like. */
clip-path: polygon(53% 25%, 53% 32%, 25% 48%, 33% 57%, 21% 62%, 12% 80%, 27% 70%, 39% 66%, 40% 82%, 51% 90%, 48% 79%, 51% 64%, 61% 61%, 71% 78%, 80% 77%, 87% 82%, 76% 73%, 67% 67%, 67% 52%, 77% 46%, 89% 32%, 80% 36%, 68% 43%, 60% 50%, 51% 44%, 63% 26%, 50% 28%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
3% { filter: brightness(100%); }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence