HomeОбразованиеRelated VideosMore From: The Net Ninja

CSS Animation Tutorial #4 - Keyframes

765 ratings | 59526 views
Hey dawgs, in this CSS animation tutorial, I'm going to introduce you to keyframes, and the @keyframes syntax. Keyframes are the power house of CSS animations, and are essentially where we define our different animations. ----- COURSE LINKS: + Repo - https://github.com/iamshaunjp/css-animations-playlist + Brackets editor - https://brackets.io/ --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ============ CSS for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Html code for embedding videos on your blog
Text Comments (73)
Nethertale (1 month ago)
Can anyone help me? I use sublime3 as my text editor, but it doens't read @keyframes as a thing. does anyone know how to solve that problem? sorry for bad English in advance
Nitesh Sharma (1 month ago)
awesome
Parth Makadiya (4 months ago)
I have a question . Look Here --> transform: translate(700px); for responsive design how we will determine the screen size like 100% ... Mario will go out so either need to use media query but thats not good idea ... suggest me
Zdravko Dimov (4 months ago)
Thanks a lot bro. Really good explanation!
piano0011 Lee (4 months ago)
Good tutorial but why do you use absolute and not relative? I have always used relative
Parth Makadiya (4 months ago)
What is the benefit ? I am curious !
MAC projects (4 months ago)
Wow that's amazing, thanks a lot for such easy tutorials U deserve more subscribers. Awesome work.
notmyname (4 months ago)
Thanks!
Melody T (6 months ago)
cheers dude
Deevhat (8 months ago)
OMG I get it , you are the best dude, the best
Christopher Derrell (8 months ago)
In case you don't want to clone the git repo. *CSS Code * - Save as style.css /*// BASE STYLES //*/ html, body{ height: 100%; width:100%; overflow: hidden; margin: 0; } .grass, .sky, .road{ position: relative; } .sky{ height: 40%; background: skyblue; } .grass{ height: 30%; background: seagreen; } .road{ height: 30%; background: dimgrey; box-sizing: border-box; border-top: 10px solid grey; border-bottom: 10px solid grey; width: 100%; } .lines{ box-sizing: border-box; border: 5px dashed #fff; height: 0px; width: 100%; position: absolute; top: 45%; } * HTML Code * <!DOCTYPE html> <head> <title>Mario Kart Animations</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="sky"></div> <div class="grass"></div> <div class="road"> <div class="lines"></div> </div> </body> * Mario Image * - https://github.com/iamshaunjp/css-animations-playlist/blob/master/mario-examples/img/mario.png * Luigi Image * - https://github.com/iamshaunjp/css-animations-playlist/blob/master/mario-examples/img/luigi.png * Cloud Image * - https://github.com/iamshaunjp/css-animations-playlist/blob/master/mario-examples/img/cloud.png
The Net Ninja (8 months ago)
Awesome, thanks dude
Nicole K (8 months ago)
You are a true life saver. My teacher doesn't actually teach anything in class, he just tells us about a feature, but not how or when to use it really. So thank you dude you are helping me pass school haha
buzzer79 (8 months ago)
whoever rated it down is just a coksuka
RufusCode (9 months ago)
how to come back to the left side ?
Hemanth SP (9 months ago)
Ngb-carousel angular how to apply sliding animation using css3 transition right now it is in fade in and fade up????????!!!!
kuku swuro (10 months ago)
very creative.. love it.. thank you
mark wilde (10 months ago)
Great teacher and a great guy too, cheers pal.
Abid Anggun (10 months ago)
where is the pict
ReyCuban Tv (11 months ago)
dude! amazing job! you make it easier to understand .
Elizabeth M.j (1 year ago)
http://www.clker.com/cliparts/B/8/U/Q/F/y/red-car-top-view-hi.png
Daniel Magar (1 year ago)
Lots of knowledge in short time thanks soo much...
GroovySalmon (1 year ago)
Any idea why I had to set .mario position to relative in order to make him visible? I.e. .mario { position: relative; top: -40%; left: 0px; }
moaaz bhnas (1 year ago)
You are the best
The Net Ninja (1 year ago)
:) Thanks
moaaz bhnas (1 year ago)
awesoooome ❤❤
The Net Ninja (1 year ago)
Thank you :)
張羿訢 (1 year ago)
u r awesome
mona mohey el-deen (1 year ago)
Heyyy Guru .. i've a question, if i add animate.css class to a div and i want it to play the animation then hold for a while and then play it again what to do i tried many tricks for that but didn't work ... thanks in advance
Wael Alkanzi (1 year ago)
Sorry but the keyframes did not work with me so how do i make it . and you are Amazing 😍
school is in session ;-)
PUBG ASN (1 year ago)
thanks brother , 😄😄
Mindaugas Rudz (1 year ago)
Fantastic tuts :) thanks! I have a problem with "invalid property values" . Whatever I do, transform:rotate doesn't work (chrome). Have tried to find the answer on the net but no success.
Ray Ali (1 year ago)
you did really teach us how to do it and you did good keep it up!
jacob h (1 year ago)
0 to 500 px real quick
joachim harksen (1 year ago)
you are fantastic, thx lot for this good and short example, most tutorials are very complex and for beginners not to understand, keep it short, your tutorial is quiet helpfull and i give you an abbo.
Aiso Milele (1 year ago)
Solved my fade-out problem... thanks a lot!
Alex Mercer (1 year ago)
@keyframes hero-stance{ from { top: 0; } to { top: -20; <------------- Why my browser keeps on telling that this is an invalid input. I dont get it. } }
Alex Mercer (1 year ago)
Never mind :D I found my mistake didnt put pixels at the end lol XD
Devang Patil (1 year ago)
Awesome!!
Tahsin Serkan Yaman (1 year ago)
It's fun watching you man:D I hope you keep your desire to teach
Gamal Abdall (1 year ago)
I did not know that you can use transform inside @keyframes .... Thanks a million
M Mohamed Fariz (1 year ago)
Simple & Super
Doctor Doubt (1 year ago)
You basically did my computer science homework for me. xD By which I mean that you helped me understand CSS after I missed like 6 lessons.
Scientist (1 year ago)
you deserve a like
The Net Ninja (1 year ago)
So do you :)
smell the ink. (1 year ago)
nice dude! but that sound in starting is littile bit iritating apart from that this is mrvolous exhibition of technicaly sound teaching of design.
A really nice explanation! Congratulations!!
Ilaria Me (2 years ago)
Your tutorials are absolutely brilliant, easy to follow and to understand. One can see results straight away and that makes a huge difference! Thank you so much :-)
The Net Ninja (2 years ago)
Ilaria Me Awesome, thank you! Really glad you like them 😀
Sameh Abbadi (2 years ago)
Man, I will always thank you <3 God bless you
3d animation (2 years ago)
Nice tutorial.but i want all properties like 'animation-name','animation-duration, where can i find it?
Juraj Pecháč (10 months ago)
3d animation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations
lester ross (2 years ago)
Simple and amazing thanks
Ratul Monzurul (2 years ago)
where can i get the image for mario or anything like it
Ratul Monzurul (2 years ago)
thanks,but the website is being blocked
Annisa Nadia (2 years ago)
https://github.com/iamshaunjp/css-animations-playlist
Dulal Deb (2 years ago)
it worked for me later as I wz gave semicolon newz thnx for d rply
Dulal Deb (2 years ago)
I have written the code but d image is not moving can u suggest d reason??????
dasads dasdasd (2 years ago)
well post your code lmao...
Adrián Beloki (2 years ago)
Im truly amazed with your channel dude. Im studying a webdesign master degree in Spain and our teacher sucks so much comparing him with you. Thanks for your work!!
The Net Ninja (2 years ago)
Share with your uni mates :D. Ha, thanks - really appreciate the nice comment and glad you like :)
Jeremiah Fernandez (2 years ago)
I swear that intro punched through my eardrum
Shaikhah Maasher (1 month ago)
I like it so much, better than the new one
ArmanGeboyan (2 years ago)
How did you open the mario index.html file using the live server? When I press ctrl shift 3, it opens the cloud/circle file by default (probably because its the outermost file in the directory that's named "index.html")?
Trung Phạm (2 years ago)
Love you guy! so interesting..
The Net Ninja (2 years ago)
Thanks :D
0HMILER (2 years ago)
SO CUTE I LOVE IT ♥
The Net Ninja (2 years ago)
+0HMILER Cheers dude :)
MM23 (2 years ago)
Gosh this is amazing. I love the Mario Kart example! Thanks for your work
The Net Ninja (2 years ago)
+HURR1STAR Glad you like :D
予言 (2 years ago)
Can't wait for the next tutorial!!! I'm so hyped right now! XD didn't know that you can animate just by using css though :3
The Net Ninja (2 years ago)
+Tsu Kun Awesome, happy you're liking them :D

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.