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.

+ Repo –
+ Brackets editor –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…


========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. 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

  2. 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.

  3. 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.

  4. @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.

  5. 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.

  6. nice dude! but that sound in starting is littile bit iritating apart from that this is mrvolous exhibition of technicaly sound teaching of design.

  7. 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 🙂

  8. 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!!

  9. 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")?

  10. 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


Please enter your comment!
Please enter your name here