CSS Split animation effect
CSS Split animation
This animation effects splits an HTML element with a simple CSS clip-path graphic. You can easily replace the clip-path with a custom path, see our Split bullet effect for example. We also use the CSS filter function filter#brightness to simulate a flash of light and transform#rotate to rotate the HTML element slightly on impact.
<style>
.split {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: split;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes split {
0% { }
1% { transform: scale(1.2,1.2) rotate(5deg); }
2% { transform: scale(1,1) rotate(0deg); filter:brightness(10000%);
/* Simple CSS spark graphic - replace with your own if you like. */
clip-path: polygon(50% 0%, 30% 34%, 46% 53%, 45% 99%, 0% 100%, 0% 0%, 99% 0%, 100% 99%, 48% 100%, 60% 55%, 44% 35%, 66% 0%); }
2.1% { 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