Simple CSS animated loading icon

Hello!
I've recently got my first real programming job as a junior programmer and I'm still learning various thing along the way. Also, some time ago I have started thinking about writing some blog post to this site so here is my first attempt :)

For my first post, I've wanted to write about something simple so there is less space for me to make mistake :) so I've made a simple animated loading icon with CSS.

Here is codepen:

The animation is based on keyframes as you can see.
Basically,I'm just scaling and rotating html element and infinitely looping animation with alternating direction with means that keyframe animation is played forwards and then backward with ease-in-out timing function that sets the speed of the animation. The ease-in-out timing function plays animation starting and ending slowly. For example, if I've used ease-in function the animation will start slowly.

Any feedback positive or negative is highly appreciated! :) I'm looking forward to write about more stuff I've learned (including Spring, React and maybe Angular)

Thank you for reading :)