CSS Animation & Keyframes (CSS Animations Series Part 2)

[@TheMisterhomer1992]

One of the best and positive code-bloggeres on youtube, thank you!)

[@OfficialDevTips]

Thanks Marius, that is so nice :)

[@abardachov_dev]

i'd say, The Best code-bloggeres !

[@kaigatz]

Hey mate, this is Kai from Germany. Just so you know - for me, you are by far the best tutor here on KZbin when it comes to HTML&CSS - for real, when I started a few month ago I thought I had kinda an idea of what HTML and CSS does or can but turned out that I literally had "no idea" at all... I am an apprenticed Media Designer (more into image adjustment and stuff like that) for a few years now but haven't had any serious skills in (let me call it) "internet stuff" and you taught me those basics and advanced skills within a tick of time compared to the years I spent in an professional apprenticeship where we just roughly talked about HTML and CSS even when I was so interested into this kind of stuff. Thanks man you made it possible that I could update my skill portfolio tremendously! I hope this is proper Englisch and makes sense to you... Long story short: Thanks so much for all of your videos I really appreciate every single one of it! Keep going it is really great stuff!

[@javascriptEager]

word's number-one deep and easy way to teaching style. I am from India and love from India to you. keep it up bro.

[@sergi3629]

I'm seeing this 3 months into my web developing journey and it's blowing my mind, love to have this new tool, so many possibilities.

[@WouterHamal]

I have learned more from you than I learned in school. You are the best! Never stop please :D.

[@Silverlex5]

After watching first video and this one i was mad at myself. Why i couldn't find you sooner! The way you teach and the way you edit the video itself is amazing job! I know some css but i had no idea about JS. Now at least i can "read" what JS says. Thank you so much

[@datastorage5866]

while reading title of this video i thought that what going to tech it animate keyframes that i know "animate.css" is already there but after watching video really its different one... learned new attributes thank you DevTips really different video.

[@jamiec7015]

I have been watching you videos for quite some time. You have helped me go from disliking making websites to it being a passion of mine. I am know starting a web development company with a few friends of mine. Thank you for the amazing videos.

[@kiruslight4430]

These are HTML and CSS preprocessors, they are really helpful and easy to be learnt. Just try!

[@nathansonic]

You crack me up, man. It makes watching your videos good fun. And I really appreciate the amount of time you put in to these.

[@shannonmyers4972]

I have been waiting all week for this

[@OfficialDevTips]

Thanks for the support!!

[@ahmedam77]

Really such an AMAZING video I'm very happy that you returned to those technical videos

[@gareth_3d]

Thanks so much for this series. Its something i half learned at one point, wanted to know, forgot about, and then saw this video in my sub box. really clears things up. excited for the next parts.

[@OfficialDevTips]

That's awesome Gareth, thanks for the comment :)

[@joanricart3622]

You KILLED IT with this series!! Back to DevTips 101!!

[@OfficialDevTips]

Thanks Joan!

[@vicky.medrano]

Your examples are clear and useful, and you're funny without even trying. Thanks so much for taking the time to share your knowledge :)

[@nitram_nosnibor]

Another goodie Travis - thanks!! This is a very EXCITING series Trav!

[@OfficialDevTips]

You are welcome!

[@priteshjhaveri27]

One of the best channels on youtube to learn. I really love how you simplify things while teaching. You are a star! love from india :)

[@tolumideshopein]

I really miss Travis owning this channel

[@mukkuvaninthesea771]

I never see or attend a class like yours... lot of love

[@Rafiozoo]

Travis, you are a gifted teacher. Just now I've got animation holistically :) Thanks!!

[@OfficialDevTips]

Great news!!

[@orelhassid5812]

You are the first one that have a frame arround the videos in youtube

[@tarunjuluru99]

Thanks Travis, Your videoes are always been helpful to me. I feel so glad that I found this channel on youtube. :)

[@ISKCONTV]

This fellow is unbelievable good at teaching.

[@88puszkin]

Travis you're doing a really good job ,but for me sometimes is not clear what you show ,because you use jade and sass . I create website a few months and I'm trying to learn well: html css js .I have a question can you always show basic css and html code when you record? I think that you will get more viewers when you do it , because more people like me beginners They will understand what you create. :)

[@carolyn_s]

Where have you been all my life!!! Mind blown!

[@julianaferry]

I am learning so much. Thanks for these.

[@Emadmohamad]

Yay! Who doesn't like animation when it's done right?! Thanks a lot for making these videos, man!

[@OfficialDevTips]

You are welcome, thanks for watching :)

[@peterperez28]

Look forward to your videos Travis! Keep up the great work!

[@dansintean6820]

11:58 - "then, then...you know, the next one..." LMAO. Man you're so funny when you're auto-confused. Excellent tutorial!

[@TheMalni]

I love CSS animations, especially I like to play with page preloaders. Thanks for the video Travis :)

[@OfficialDevTips]

Yes! I hope to do some loader animations in a bit

[@BiGBANGTH3ORY]

20:48 Is just brilliant. Way to give it right back to everyone correcting you. Tomāto/Tomäto... Amirite?

[@OfficialDevTips]

Hahah, thanks for not thinking that was too much cheek. lol.

[@isunas16]

Dude,your tutorials are amazing....

[@OfficialDevTips]

I appreciate that :)

[@MaxWeir]

great overview Travis, nicely explained.

[@danieldrntss]

Your videos are incredible! Keep with the animation series please!

[@pedrobntto]

man, you are the best teacher ever!!! thanks a lot!!!!!

[@KumarNitesh]

as usual awesome video Travis

[@jpanda4835]

I always get excited everytime you upload a video Hahahahaha Thanks a lot dude

[@OfficialDevTips]

That's actually really cool to hear. Thanks for the support!

[@vinaykumar-to4dm]

Really made me understand how animations work

[@shmighty6681]

Such good work! Subscribed! These videos are helping me a ton, thank you so much!

[@philippdustin8120]

I just found you on KZbin, man you are a genius! Greetings from Germany :)

[@jesseshipe6074]

Excellent quality tutorials. Thanks for the good work!

[@potaitzahh]

i love you guy. I guess you know so much and that's why you know this good to explain. I'm a beginner in coding but you saved me all the time with your tutorials! /*sorry for bad english :D*/

[@jituraiyan]

Your tips are so much helpful. Thanks a lot Travis :)

[@MouhamadouDer]

Great tutorial, thank you @DevTip and l really like the sound at the end :)

[@ernstpaulswens]

Great video! Nice presentation at the start!

[@OfficialDevTips]

Thanks!

[@MediaCoastline]

WOW thank you for this series. My hero

[@mugebulazar4328]

wow have been looking so long for a good tutorial ! :D amazing :>

[@johnelliott5405]

Thank you so much for this! Clarified everything perfectly! I'll get you on patreon

[@wilsonmwangeka8647]

Great work Travis

[@OfficialDevTips]

Thanks Wilson :)

[@deserteagleto2780]

Travis, I love your videos. The way of explaining is damn awesome.

[@OfficialDevTips]

Thanks Yaser :)

[@deserteagleto2780]

DevTips I got reply from Travis. Im gonna party today. 🎉

[@sinanoztop328]

This is my first comment in your channel. Thank you for good lesson. I am waiting for next lesson...

[@OfficialDevTips]

Welcome to the channel :)

[@franciscodiaz6432]

what a likeable guy. Great series

[@OfficialDevTips]

Awww, thanks Francisco :)

[@JasonAir]

Super cool! Thank you for your awesome videos

[@cagriozarpaci1673]

You are teaching with fun i really enjoyed thank you

[@gogvale]

Wow, thank you so much!! Learned a lot from these videos! :D

[@Chitorra98duriduridr]

The JS code you show in the video for the exercise is JQUERY? And how it looks the code JS pure? Without JQuery.

[@boomer5015]

Oh my life, I completely forgot about fill mode...legend!! Animations doesn't seem to apply 0%/from keyframe properties until the animation begins, which causes headaches if you have a delay. Unless you manage state, the elements defined properties will be applied for the duration of the delay. Seems fill mode fixes this. p.s in SASS you can nest long name properties all under the headline, i.e animation: (nest) delay: 0s. This helps keep code organised but massively helps readability when a single element has font:, text:, background:, transform: long hand properties nested.

[@OfficialDevTips]

oooohhhh, that's totally true!

[@ahmedyasser56]

Dude, i love you more than my father

[@RajaBilalMehrban]

Great series :) helped me a lot :D

[@durgacreation9232]

Super and clarity of teaching

[@amitakolkar2389]

Hi, Travis, thanks for your all great tutorials series. Can you please make any tutorial on 3D Solar System using CSS?

[@karlguz2112]

You're great man 👊🏻 thanks for doing that

[@jasonreviews]

Thanks travis great episode!

[@OfficialDevTips]

You are welcome :)

[@jeiji137]

There, I say, time to upgrade my portfolio website :) Thank you Travis!

[@OfficialDevTips]

Wonderful, thanks for watching man :)

[@ar2zee]

Hope, my girlfriend wouldn't see it , Man you are absolutely awesome , I love you and everything what are you doing .Wish to have friend like you !Wish you all the best

[@Pankaj-Verma-]

Thank you so much for your kind help!

[@khibarrassul1582]

man this is amazing!

[@jong5946]

Wow! So thorough!

[@getpwnd89]

I got a question... If i have 2 box elements and I wanted to hover one box and it would animate the 2nd box using keyframes. Would that be possible without js?

[@BestChanelTV]

great tutorial, can you make a video for cool hover effect on image?

[@truesoldier27]

awesome videos! im finding myself wanting to animated between class names such as btn-default to btn-active. in my app i would normally justadd/remove classes. is there a way to animate with class names instead of having to copy all of the class properties into keyframes?

[@wudanclanwealth7660]

dude ur awsome i think i love you @DevTips *man crush*

[@jimmyb2kool]

Hello, what editor are you using. I just started with web development and would like to see what works best. I myself use atom at the moment. I also noticed that you didn't use the curly brackets for your CSS code...does the editor you use not need them?

[@fadygamilmahrousmasoud5863]

thank u for ur brilliant tutorials :)

[@arturocoronel]

Interestingly, their tutorials are very good thanks for sharing .....

[@OfficialDevTips]

Thanks for watching!!

[@AlvaroLauEgun]

Thank you so much Travis! I really appreciate it, you're brilliant! cheeeers!

[@OfficialDevTips]

You are so nice, thank you!

[@lucasn.munhoz3596]

Awesome video man

[@OfficialDevTips]

Thanks!

[@codastr]

He describes everything perfectly!

[@nhatanhnguyen6429]

can u tell me what the difference between Keyframe using percent and Keyframe using FROM TO ??

[@NERV0USMONKEYS]

Hi, can someone help or explain me? I'm still not able to use SCSS, I tried to follow the video with my knowledge of HTML, CSS and JAvascript. I got 2 promblems: the animation compiled with @keyframe.. {from {} to {}} doesn't work, but works if I use % - my text compiler is ATOM- Than I wrote the javascript as it is in the video, but obviously it doesn't work... I'm not able to translate it in order to understand my css. Sorry for my ignorance in SCSS, I'll try to fix it.

[@cperzam7700]

Hi Travis, great video. I'm kind of struggling with something hope someone can help me out. I'm making a dropdown menu with divs, and I toggle a class with JS so it expands and collapses. I applied an animation done with a keyframes where each option (div) seems like it's folding in (.options-container.active > .option:nth-child() and that works perfectly. But when I try to apply the animation in reverse when the options collapse, I just can't get it right.

[@raphaelandrade555]

oh man, Thanks a lot, that was really useful!!!

[@avegailcastillo4534]

Now i love using @keyframes Thanks a lot😃

[@CamIsMac.]

so I can create a jQuery slideshow with this code right. because everything I use plugins I have problems with my picture sizes when I use other carousel plugins. btw great video.

[@OfficialDevTips]

yea, give it a go! Link us the result :)

[@MyNegativeCreep]

Can you tell me how to use two keyframes at once? I have a code and somehow only the second keyframe works now.. I want a coin to move from left to right and animate a rotation: html { background: #d2d2d2 } .coin { } .coin img { animation-name: roll, rotation; animation-duration: 8s, 8s; } @keyframes roll { from {transform: translateX(0)} to {transform: translateX(2300px)} } @keyframes rotation { from {transform: rotateZ(0deg)} to {transform: rotateZ(360deg)} }

[@ZIAITCLASSES]

Sir, which html editor you are using

[@marvindoufresn6507]

Greate channel! One question, what are you using for your presentation (the silides in the beginning)? Thank you in advance

[@khmermovie314]

Marvin Doufresn that's the same question I want to ask too.

[@CodingMazaa]

You saved me a fat wad of money that I would have used to buy a Lynda.com subscription or a few brick-sized books

[@mayaahmed]

Thanks. Awesome work.

[@cbx360]

How can you make the animation start when clicking a button than pause and only change when you hit the next button

[@zoecarlibur]

I miss travis :(

[@AndyRSV]

Quick question, do you use apple's keynote when making your presentations and also the text / background animation at the start of the video?

[@OfficialDevTips]

Yes, that's apple keynote, most all of it.

[@adamshuck]

What package in Atom are you using to do this spilt view in your coding? Like seeing HTML, CSS, JD all at the same time?

[@govindrai93]

He's using codepen. Free to use. Plus he's using Jade.

[@utkarshbhimte212]

Hey Travis, What software did you used to make that presentation?

[@mushymushy19]

Thx for this nice tutorial including the one before this. I made a bouncing ball based on this :)

[@vinaykotturi1283]

Thank you very much. Awesome video.

[@OfficialDevTips]

You are welcome!

[@sarasahar9796]

What are u using for editing? Plxx can u tell me

[@rafaelgrube]

Thanks again Travis!!!

[@OfficialDevTips]

You are welcome Rafael!

[@farfarawaygirl]

What program are you using to edit this ?

[@mukeshsoni]

You look like Daniel Shiffman's brother :). Great video, btw!

[@thwbn3993]

Thank God, it's monday ;-) 'taking my beer, some chips .. sitting on the chair and waiting for the popup message "dev tips hat gerade ein Video hochgeladen"

[@OfficialDevTips]

Nice! Sounds great :)