**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](https://betermichiel.nl/p/spin.html) 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!
| author | devbymbea |
|---|---|
| permlink | some-cool-css-power |
| category | life |
| json_metadata | {"tags":["life","blog","writing","music","coding"],"image":["https://steemitimages.com/DQmb7Q9edMsFxk7iU2UQaTAoA4YDybc9T2ZUCFNmVZzCvgS/images.duckduckgo.com.jpg"],"links":["https://betermichiel.nl/p/spin.html"],"app":"steemit/0.1","format":"markdown"} |
| created | 2018-02-03 23:24:39 |
| last_update | 2018-02-03 23:24:39 |
| depth | 0 |
| children | 5 |
| last_payout | 2018-02-10 23:24:39 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 1,715 |
| author_reputation | 25,445,679,108 |
| root_title | "Some cool CSS power" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 34,752,590 |
| net_rshares | 1,161,815,524 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| mrakodrap | 0 | 552,648,724 | 100% | ||
| devbymbea | 0 | 609,166,800 | 100% |
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
| author | markush |
|---|---|
| permlink | re-devbymbea-some-cool-css-power-20180213t150152023z |
| category | life |
| json_metadata | {"tags":["life"],"app":"steemit/0.1"} |
| created | 2018-02-13 15:01:54 |
| last_update | 2018-02-13 16:39:39 |
| depth | 1 |
| children | 0 |
| last_payout | 2018-02-20 15:01:54 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.468 HBD |
| curator_payout_value | 0.150 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 181 |
| author_reputation | 13,440,209,801,477 |
| root_title | "Some cool CSS power" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 37,235,301 |
| net_rshares | 86,847,273,276 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| pharesim | 0 | 76,956,287,193 | 0.04% | ||
| englishtchrivy | 0 | 9,890,986,083 | 5% |
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.
| author | mrakodrap |
|---|---|
| permlink | re-devbymbea-some-cool-css-power-20180204t155834965z |
| category | life |
| json_metadata | {"tags":["life"],"links":["https://codepen.io/vlad-saling/pen/cspoj","https://codepen.io/vlad-saling/pen/gKyLf","https://codepen.io/vlad-saling/pen/Ftucg"],"app":"steemit/0.1"} |
| created | 2018-02-04 15:58:36 |
| last_update | 2018-02-04 15:58:36 |
| depth | 1 |
| children | 3 |
| last_payout | 2018-02-11 15:58:36 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 463 |
| author_reputation | 160,587,942,185 |
| root_title | "Some cool CSS power" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 34,919,655 |
| net_rshares | 1,155,954,622 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| mrakodrap | 0 | 540,634,622 | 100% | ||
| devbymbea | 0 | 615,320,000 | 100% |
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](codepen.io) ref. Seen the site before but never payed attention apparently. Have used [livegap](editor.livegap.com) and [jsfiddle](jsfiddle.net) as live editors till now, but [Codepen](codepen.io) 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!
| author | devbymbea |
|---|---|
| permlink | re-mrakodrap-re-devbymbea-some-cool-css-power-20180204t193040517z |
| category | life |
| json_metadata | {"tags":["life"],"links":["codepen.io","editor.livegap.com","jsfiddle.net"],"app":"steemit/0.1"} |
| created | 2018-02-04 19:30:51 |
| last_update | 2018-02-04 19:30:51 |
| depth | 2 |
| children | 2 |
| last_payout | 2018-02-11 19:30:51 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 1,268 |
| author_reputation | 25,445,679,108 |
| root_title | "Some cool CSS power" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 34,961,604 |
| net_rshares | 532,625,220 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| mrakodrap | 0 | 532,625,220 | 100% |
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.
| author | mrakodrap |
|---|---|
| permlink | re-devbymbea-re-mrakodrap-re-devbymbea-some-cool-css-power-20180205t071648519z |
| category | life |
| json_metadata | {"tags":["life"],"links":["https://css-tricks.com/"],"app":"steemit/0.1"} |
| created | 2018-02-05 07:16:48 |
| last_update | 2018-02-05 07:21:57 |
| depth | 3 |
| children | 1 |
| last_payout | 2018-02-12 07:16:48 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 691 |
| author_reputation | 160,587,942,185 |
| root_title | "Some cool CSS power" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 35,078,378 |
| net_rshares | 528,620,519 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| mrakodrap | 0 | 528,620,519 | 100% | ||
| devbymbea | 0 | 0 | 100% |
hiveblocks