Some cool CSS power
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!
lekker bezig man goeie post. Je had ff op mij moeten vote of commenten dan had ik je post gezien. En kunnen resteemen ofzo. Na 7 dagen kan je niet meer op een post vote.
Spreekje
Keyframes are indeed very powerful. To encourage (and hopefully inspire) you in your study take a look at some of my older demos using keyframes:
https://codepen.io/vlad-saling/pen/cspoj
https://codepen.io/vlad-saling/pen/gKyLf
https://codepen.io/vlad-saling/pen/Ftucg
Some help UX, some are just for the show :)
Btw, If you don't know codepen.io, I highly recommend browsing trough the catalogue. I am sure you'll find interesting things you can learn from.
Thanks for replying!
I love yoiur examples, especially the flashlight bar. Really cool (and simple) animation :).
Inspiring indeed!
I'm really into webdev since a year or so, and i can say that it might be the best time ever to get into webdevelopment. So much code is 'readable' nowadays and thus pretty straightforward to build.
I notice that some people tend to use extensive scripting or even worse to make any animation eg. like your examples.
In the end that's my main guideline ,if you will, for picking what i want to learn; simplicity.
SteemIt also does a lot for me, since the community is so active on building the Steem platform, i see awesome applications in my feed everytime i'm on Steemit.
Oh and appreciate the codepen ref. Seen the site before but never payed attention apparently.
Have used livegap and jsfiddle as live editors till now, but Codepen seems more 'integrated' , so thanks again :).
Oh btw,if i may ask, are you professional or freelancer or hobbyist?...
Your profile says 'dev', but that's pretty general i guess :P
Anyway , i'll be on learning new tricks for coming weeks, just have to mind getting enough sleep here :)
A pleasant day to you mrakodrap!
Simplicity is often undervalued, so +1 on that. It may prevent many problems down the road. And yes, your are right. Some people do tend to fall for extensive scripting.
I've recommended Codepen since it kinda is THE playground for CSS developers. Codepen's creator Chris Coiyer is the guy behind https://css-tricks.com/ so the community effect is very strong. Most high profile CSS personalities post there.
I am a professional since ~2007 (hobbyist/student before that). I mostly work on company-wide (won't mention which exactly) design systems. Kinda like bootstrap or material design - but company specific. I do freelancing from time to time as well just to keep things interesting.
Getting back on Codepen , signed up this week and it was instant pleasure, almost felt like a child on the playgrounds.
Need to spend some more time to adapt to Codepen, and indeed build myself a strong network.
Which brings me back to why i asked about your occupation, last year i got involved in some IT projects on my job where i got to write and work out the complete process: research/build/test/implement (Prince2) of some new software systems. These jobs sparked my interest and thus now i'm moving my career from digital geo/charting (for government) to development for web and applications.
There is a weird learning curve on that, because i went from learning HTML/CSS/JS to understanding out the fundamentals of development, use-ability, data-structures, networks and so on.
I'm interested in also learning from the more experienced, that helps save a lot of time throughout.
Anyway, thanks again, see you around!