Problem The slightest change in CSS animations (@keyframes) requires a creation of a new animation. Problem Example @keyframes to-yellow { 50% { background-color: yellow; } } @keyframes to-skyblue { 50% { background-color: skyblue; } } Both of the animations pretty much do the same thing, but we had to create two of them. We had to create two of them because their property (background-color) had different values (i.e. yellow and skyblue).

Problem The CSS hover state often gets stuck on mobile (touch screen) browsers. It would be something like this: Hover state getting stuck on-click on mobile Solution Using the ‘hover’ CSS media query, which could be applied either through SCSS or CSS. In the case of SCSS, we’re going to use a mixin. Here is each solution respectively: Option 1: SCSS Mixin The mixin: @mixinhover-supported { @media (hover: hover) { @content; } } Example use: