SHARE

—– 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

30 COMMENTS

  1. Help ! why .panels li:hover div.front {animation: twirl 0.2s ease-in forwards;} this works but when i write is as .panels li div.front:hover{animation: twirl 0.2s ease-in forwards;} it doesn't! whats wrong with this syntax

  2. Will you make more videos? Please… Also, I have a question. How do you make CSS animations responsive? You have one of the best tutorials here!

  3. You're my master for this animation. I would like to share my own flipping events with the use of transition so that after hovering, there's another flipping event between front and back surface.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>

    #front{transition: 0.3s 0.3s ease-in ;z-index: 50;width: 100px; height: 100px; background: orange; text-align: center; line-height: 100px; position: relative;}

    #back{transition: 0.3s 0.2s ease-out ;transform: rotateY(90deg);z-index: 50;width: 100px; height: 100px; background:
    orange; text-align: center; line-height: 100px; color: black; position: absolute; top: 8.4px}
    div {width: 100px; height: 100px;z-index: 100; font-family: sans-serif;}
    div:hover #front{transform: rotateY(90deg);transition: 0.3s 0.1s ease-out}
    div:hover #back{transform: rotateY(0deg); transition: 0.3s 0.3s ease-out}

    </style>
    </head>
    <body>

    <div>
    <div id="back" >Back</div>
    <div id="front">Front</div>
    </div>

    </body>

    </html>

  4. Watched this entire playlist and it's super helpful! and you explain things so clearly! CSS animations will never scare me again haha!

  5. It's great material but it lacks one thing. How to make the card gently flip back the same way when the li-element loses focus. There is no :blur pseudo-class so I guess it has to be done with javascript? 🙂 Thanks for a great tutorial!

  6. Hi Ninja! This is awesome! Im actually trying to use this in a responsive site (using Bootstrap) and I don't know how to get the flipping cards responsive! Im using the classes correctly but it simply doesn't work… Do you think that this is compatible with Bootstrap? Thanks dude!

  7. What sort of chrome add-on or atom package are you using to make it so that when you click on an html element in atom, it highlights it on the web page?

LEAVE A REPLY

Please enter your comment!
Please enter your name here