Minor improvement: Applied Visual Design

Contributors
1

Target: “Applied Visual Design: Make a CSS Heartbeat using an Infinite Animation Count”

The animation at "@keyframes beat " can become much smoother by simply switching:

transform: scale(0.6) rotate(-45deg);
into
transform: scale(0.7) rotate(-45deg);

At default scale size, a small lag is noticeable when animation reaches 50%, at least in my computer.

2

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

3

Found the cause (very dull): scroll bar compensation. As it kept poping in and out, margin was being constantly repositioned – and that was resulting in the visual “lag”.

Having a bigger transparent and static container (or white and lower z-index) would solve it.

1 Like