Get Sharp Animation with These Techniques

These rotating black and white tiles have been revamped by Andy Liu to enhance their optical illusion effect by removing the fuzzy orders. He has changed the resolution to improve the animation quality, also adding lines of code to adjust the framerate and rotation speed. The spinning squares alternate between black and white to produce an interesting effect as the black squares seem to change into the white ones. As such, it requires a repeat variable to make the motion continue. Keyframes are indexed by background color in CSS to produce smoother transitions from black to white.

People in the web design community are already sharing their feedback on the HTML and CSS format. Someone suggested generating HTML with js to save space so that he wouldn't need to duplicate HTML. Another way to do this is to use a preprocessor like pug: Set the variable to n=0 and limit the grid in HTML for n<64 as shown.

It cuts down on how many IDs are needed to classify each square on the grid. The only downside is that you can't condense tons of times in pug so you have to substitute it with an array. This one is particularly unique in that he replicated the effects using just CSS instead of adding lines in Javascript.

Overall, people liked the transitions from a checkered board to an optical illusion. One user explained how the percentages for transitions were calculated to produce a sharper animation effect. Each percentage translates to roughly 2 frames per second. Andy has decided to run more tests in Codepen to see if the clockwise rotation can be slowed down in devtools. He also tried it in Chrome's animation debugger to test the timing in decimal increments. Of course, you do have to make a distinction between the length and duration of animation when implementing how it should display in a web browser. For more information click here https://codepen.io/andy_liu/pen/xJZwqE.