SHARE

Hey ninjas, in this CSS animation tutorial, we’ll take what we’ve learnt so far and apply it to make a cool animating pop-up box which drops down and then swings.

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

20 COMMENTS

  1. Superior and short tutorials! Thank You!
    And just one recommendation: If you will use COPY PASTE on repeating lines of code – your tutorials will safe more viewers time, still having the same informational content and value.

  2. Hello, ninja! Your tutorials are awesome, haven't found any better ever! Got a question: don't animation-duration as property and animation-duration in keyframe overwrite each other? And if they do, how does this happen? I would really appreciate you answer, thanks in advance 🙂

  3. in this tutorial i've made animation but my in my 2nd keyframe traslate Y is not working.
    can somebody tell me where i am doing mistake?
    my code is below:-
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
    div.active{
    width: 400px;
    height: 100px;
    position: relative;
    background: red;
    top: -150px;
    transform-origin: 10px 10px;
    animation: purpose 3s linear forwards,
    example 3s linear 3s forwards;
    }

    @keyframes purpose{
    from{opacity: 0;}
    to{transform: translateY(350px); opacity: 1;}
    }
    @keyframes example{
    from{transform: translateY(350px); background: red;transform: rotateZ(0deg);}
    to{transform: translateY(350px); background: green;transform: rotateZ(10deg);}
    }
    </style>
    </head>
    <body>
    <div class="active">

    </div>

    </body>
    </html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here