SVG in 100 seconds

@Fireship

4 жыл бұрын

On the list!

@mudassirsayed8703

4 жыл бұрын

@@Fireship Canvas too

@MrPoselsky

4 жыл бұрын

SVG is just awesome. The best thing is that it behaves like any other DOM.

@TheNewton

4 жыл бұрын

then SVG workflow in 100 seconds lol

@sanusihassan7125

4 жыл бұрын

@@TheNewton 😁

Why did I put this off for so long, this is actually so easy wtf

@imawizardfools5934

4 жыл бұрын

Most things seem easy when you have a good teacher. ;)

@ben6

4 жыл бұрын

Same. I think it's because I tried to learn this when I was 12, alongside HTML and mathematics!

@supreetkumar7604

4 жыл бұрын

@@imawizardfools5934 that's true!

@mkULTRA52

4 жыл бұрын

same

@prohairnoob6986

4 жыл бұрын

that means Fireship is a teacher can he teach me math

> Learn the basics of... I end up learning more than in most videos 30 minutes long.

Wow, whoever is responsible for actually parsing CSS and turning this into rendering functions is pretty dang smart. I can't believe how much you can manipulate a browser with this simple grammar

I find it disturbing how shockingly informative and oppressively arousing these videos are.

@jaromor8808

4 жыл бұрын

the drawback is that now i have little patience for videos that drag over 20 minutes with 90% of time wasted on fluff & filler

@adamschneider868

4 жыл бұрын

@@jaromor8808 check our Derek Banas. His crash course vids are freaking preemo

@victorcosta3534

Ай бұрын

opressive arousing 😂 i ll start saying this

I generally love this 100sec series. Its awesome!

📃NOTES: CSS transitions work on number based properties so changing 'display:block' to 'display:none' will not work like we'd hope it would 😭. 💣 Remember with 0 opacity an element still exists in in the layout AND will capture clicks meant for anything below that element. You will need display and visibility tricks in CSS to get around that or javascript.

@Fireship

4 жыл бұрын

Good points! This topic could definitely use an extended video.

@sanusihassan7125

4 жыл бұрын

Try setting 'display:none' on the last keyframe and set 'animation-fill-mode' to forwards

@damirmustafic3403

4 жыл бұрын

You can animate width, height or opacity and set last frame on display none.

@daleryanaldover6545

4 жыл бұрын

I agree, this could have been extended. While I already understand css animations, your content gave others a quick look on how to do it easily. I'm looking forward to the next video!

@TheNewton

4 жыл бұрын

Damir Mustafić also transform scale

These are the best videos to refer back to. The first time you watch them you learn what can be done, then, each time you want to use it, you watch and try until it becomes second nature. Ive done this with flexbox, css grids and many others. Cheers!

As always Best short tutorials on the Web!

Please please make a long video on this one, this is really cool and you explaining very smoothly. Please, Jeff, it's a request and Thanks to you so much.

@Fireship

4 жыл бұрын

I will, a complete CSS animation guide is on the list

@sourishdutta9600

4 жыл бұрын

@@Fireship ThankYou :)

@desther

4 жыл бұрын

@@Fireship You rock! Can't wait.

@fayu7752

4 жыл бұрын

why do u need long video on that, you can just open css documentation and read it all

@ysammo214

2 жыл бұрын

@@Fireship Did you get around to making this?

Man, can’t thank you enough. Really good work. Your videos explain so much and with such clarity that really breaks through :)

You have made so many chapters understandable for me now! Thank you!

I always omit these keyframes, but in 5 seconds it was already well know to me. Thanks. Love your videos ❤️.

Hey , I was searching this Topic , and soon I got a notification😁

Absolutely love the 100 seconds series!! 💙💙🙂

You guys are doing a great job! Keep up the good work!

That was great. I really like the animation blurb too, because while I have begun understanding css transitions, css animations are a whole different ballpark---or so I once thought. Now I see that it isn't as hard as I imagined, at least when it is clearly explained like this.

Yasss smash the like for Fireship, cause don't know what I'd do without these amazing videos.

Most valuable 100 seconds! I want more

Thanks man! easy to understand and straight to the point.

Loving this series

brilliant, simple and informative. Love it

Great content as always, extra great with the key and peele sketch

Very solid and compact video! Thanks!

Very clean and fast explanation, thanks a lot

you keep raising that bar, idk how other coding channels will compete

Yesterday this video was 1:02 min long, 50% ready, Im glad you finished it :)

You’re a lifesaver, thank you!

MORE ANGULARFIRE VIDEOS! love them, I always end up adding or modifying something on my project after your videos

Magical, thanks Jeff!

You know, your videos are entertaining in a way, unlike lots of other online tutorials 🙃

Thanks bro it was so detailed but so short at the same time . You have a creative and a precise mind . This video helps so much for begginer who are learning css . I appreciate it . Thanks bro .

I definitely going to use Bazier curve and check how it works. I feel you have always something in your videos to learn. Feels great to watch your contents. Could you please refer any books for CSS!

was really AWESOME!

Excellent summary! Thank you!

Hey Jeff, I know the haters always crap on you for speeding through your videos, but this actually taught me transitions & animations better than actual tutorial videos. Thanks!

Best channel for basic knowledge

Concise and informative, as always thanks!

Would love to watch a more detailed video on this topic!!

Dude...great timing, I've been working on animations on my site, doing key frames, intersection observer to only animate when it's within the view port, figuring out performance bottle necks, great 100s! Learned something.

@pablodiamante

2 жыл бұрын

I also need to work with animations right now..isn't this channel scary?

YES PLEASE! MORE! MORE! MOREEEEEEE! lol jokes aside, this was awesome, very well explained. Keep it up mate! :) We definitely need more awesome stuff like this please :) Probably the first ever video where I learned so much in 100 second! :D loved the format.

Bruh ive legit been making my own functions to do this the whole time, I wish I knew this existed, but now itll def be a lot easier in the future

I already knew about this so this didn't do much in the way of teaching me new things but I must still commend this video's beautiful quick explanation of the subject at hand. I'm kinda sad this didn't exist when I was learning CSS animation myself!

OMG YOUR VIDEO IS ABSOLUTELY GOOOOOOOD!!!

Animation is something like transitioning between two different CSS files ! Its actually that simple ? Seems i'll have to give this a try .Thanx fireship !

Man, I love this videos :p

Another beautifully presented nugget of front end knowledge Jeff ;)

you're awesome man, even joey get this.

Great one! Thanks :)

Succinct and informative! Thank you very much!

love you man

Great video!

damn i love your channel

Very helpful, dear Sir. Thank you very much.

He actually covered everything

best on yet

Thanks for the video

beautiful video dude, your channel is on firee !!!

@berat02xz

4 жыл бұрын

hence the name of the channel i guess lmao

thank you !

so godamn helpful

learned more from this videos than from the web design class I took in university.

@Fireship

4 жыл бұрын

Up next... an entire CS degree in 100 seconds ;)

@alexisavls2601

4 жыл бұрын

Haha. And for real the class was 3 months and even though I was a freshman I didn't learn a thing. It was miserable knowing I was paying tuition for the class

@meldmagic

3 жыл бұрын

🦉 Uni is just a place for hipsters to hang out & to propagate political agendas. Too late for you now, but warn your friends. kzread.info/dash/bejne/mpOfq8Ojoq27fcY.html Check out this Humble Bundle deal, it covers CSS animation, game design & animation www.humblebundle.com/books/game-design-animation-packt-books

this is very well explained, thanks you

Please more animation in CSS !

THANK YOU

fireship #1 on KZread

I am very comfortable with CSS animations, but when I saw 'CSS Animation in 100 Seconds by Fireship', I just watched it. You got a wonderful teaching skill. Thank you. Next I am waiting for *100* *sec's* *of* *GraphQL.*

@TheNewton

4 жыл бұрын

Supinder Singh closest fireship has is the graphql server vid kzread.info/dash/bejne/anhtutCnmqmtfdY.html There's a longer one using the SpaceX api in the channel videos

@supindersingh8882

4 жыл бұрын

@@TheNewton thank you.

Amazing video. Can you make a detailed video about it please.

Its like doing simples old macromedia flash animations but in DOS

Great video

I'm pretty sure tween is an animation term not a computer science term but I'm just nitpicky. This is a fantastic intro to CSS animation.

Thank you

Fireship in 100 minutes..🔥🔥

Awesome 🔥

thank you super images

Love you!

Loved the video but one thing stuck out, 'tween' is not a computer science term and if there are CS texts that use it, they borrowed it from the original source. Tween is a term that came from the animation world. Someone who animates the steps in-between keyframes was known as an "in-between animator." The star animators back in the studio system (1930' - 1960's,) drew the keyframes while the interns and lower-paid animators filled in the tween animations (i.e. grunt work.) When 3D animations started to move out of academia/research and into the commercial world, the term was shortened to 'tween.' Adobe Flash really brought the term to the masses and it's most often associated with digital-based products now.

@solariklipz

3 жыл бұрын

That's very interesting to know. Thanks for sharing this dude!

I like this guy!

@raccoontickler7744

2 жыл бұрын

Gay

Real world analogy to cubic bezier make a great sentence to me

Subbed

this is INSANE! I was trying to wrap my head around animations and legit learned more in 100 secs than reading all the MDN documentation lol.

@thatoneuser8600

2 жыл бұрын

Bro the MDN documentation is so good, what you mean?!

Your are awesome

Looks like you love them more than us

F@*king awesome thank more please

ayo, that's the dog i saw in TOP project, u must be studying that course too

well, i need to watch it more times to get into my head. thats another story for what if.

i love you bro...

you should get a merch shop

Hey can you do Kotlin in 100 seconds? Looks really cool

@Fireship @Jeff Very Nice Animations in the CSS Animation's Video ;-)

nice

Thank you I just discovered that 100s is 2minutes and 4seconds

Thanks.

guy's goood!!

KZread algo just read my mind with this one

great video. One sugestion there is a more readeble style to do animation instead of from to. just put the animation % in front and the style behind. @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }

informative

you animate well

U r great

In beTWEENing 😅, so that's where the word came from. I feel so stupid right now 😅😅. Thanks a lot for your videos.

bro you saved me