How Facebook Designs Microinteractions for Feature Discovery article fourth gist - https://bit.ly/2EtfB6V

facebook-micro-4.scss

// Basic keyframes 4-star to octagon and back animation
$four-points-star: 42.5% 32.5%, 70% 0%, 67.5% 42.5%, 100% 70%, 57.5% 67.5%, 30% 100%, 32.5% 58.5%, 0% 30%;
$octagon: 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%;

@keyframes fourStarToOcatgonAndBack {
    0% { clip-path: polygon($four-points-star); }
    50% { clip-path: polygon($octagon); }
    100% { clip-path: polygon($four-points-star); }
}