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.

+ 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. 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">
    <meta charset="UTF-8">
    <title> </title>
    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);}
    <div class="active">




Please enter your comment!
Please enter your name here