Figuring out more in-depth CSS
Hello Steemians!
I came across the '@ keyframes' method which is used to build animations with CSS3.
For me, the best part of this is that to make cool animations, you don't need JS or any scripting to make this work
This fairly simple method of animating HTML- elements actually is pretty powerful!
So after having messed around for a day i thought it would be nice to build something useful.
Using transform:rotate i made a very simple div which spins a record when you hover it.
The second step was to animate the arm of a recordplayer to go over the record before it starts spinning, but haven't got that far yet.
I like the simplicity of it now and thus wanted to share this and show some CSS power through very simple coding.
If you feel like iediting this or making it even cooler, please go ahead :)
Sidenotes:
The picture of the record i used is not mine, neither is the record itself. It was merely used for visualisation.
Second, i just noticed the record is a little bit off-centre, that is due tot the picture not being completely centered.
The little bugger can be found here:
Spin Aninmation
One last thing, the speed of rotation acutally matches about 33 1/3 rpm, which would be actual speed of the reocrd playing.
Tell me what you think, and if there is room for improvement code-wise let me know so i and my output can improve :)
Follow me on SteemIt or Twitter ( @ betermichiel )for more powerful simplicity coming up!
Have a good day/night y-all! See you around!