CSS Tutorial: Creating Animations & Keyframes | Web Development Tutorials #36

CSS Tutorial: Creating Animations & Keyframes | Internet Improvement Tutorials #36

by



► Supply Code & Notes: https://codewithharry.com/movies/web-development-in-hindi-36
►This video is part of this Full Internet Improvement in Hindi Course Playlist: https://www.youtube.com/playlist?listing=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg
►Click on right here to subscribe – https://www.youtube.com/channel/UCeVMnSShP_Iviwkknt83cww
►Checkout my English channel right here: https://www.youtube.com/ProgrammingWithHarry

Greatest Hindi Movies For Studying Programming:

►Study Python In One Video – https://www.youtube.com/watch?v=ihk_Xglr164

►Python Full Course In Hindi – https://www.youtube.com/playlist?listing=PLu0W_9lII9agICnT8t4iYVSZ3eykIAOME

►C Language Full Course In Hindi –
https://www.youtube.com/playlist?listing=PLu0W_9lII9aiXlHcLx-mDH1Qul38wD3aR&disable_polymer=true

►JavaScript Full Course In Hindi –
https://www.youtube.com/playlist?listing=PLu0W_9lII9ajyk081To1Cbt2eI5913SsL

►Study JavaScript in One Video – https://www.youtube.com/watch?v=onbBV0uFVpo

►Study PHP In One Video – https://www.youtube.com/watch?v=xW7ro3lwaCI

►Django Full Course In Hindi –
https://www.youtube.com/playlist?listing=PLu0W_9lII9ah7DDtYtflgwMwpT3xmjXY9

►Machine Studying Utilizing Python – https://www.youtube.com/playlist?listing=PLu0W_9lII9ai6fAMHp-acBmJONT7Y4BSG

►Creating & Internet hosting A Web site (Tech Weblog) Utilizing Python – https://www.youtube.com/playlist?listing=PLu0W_9lII9agAiWp6Y41ueUKx1VcTRxmf

►Superior Python Tutorials – https://www.youtube.com/playlist?listing=PLu0W_9lII9aiJWQ7VhY712fuimEpQZYp4

►Object Oriented Programming In Python – https://www.youtube.com/playlist?listing=PLu0W_9lII9ahfRrhFcoB-4lpp9YaBmdCP

►Python Knowledge Science and Huge Knowledge Tutorials – https://www.youtube.com/playlist?listing=PLu0W_9lII9agK8pojo23OHiNz3Jm6VQCH

Comply with Me On Social Media
►Web site (created utilizing Flask) – http://www.codewithharry.com
►Fb – https://www.fb.com/CodeWithHarry
►Instagram – https://www.instagram.com/codewithharry/
►Private Fb A/c – https://www.fb.com/geekyharis
Twitter – https://twitter.com/Haris_Is_Here

source

35 thoughts on “CSS Tutorial: Creating Animations & Keyframes | Internet Improvement Tutorials #36”

  6. @code <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML</title>

    <!– HTML –>
    <style>
    *{
    padding: 0px;
    margin: 0px;
    }
    .back_box{
    background: #C36006;
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: center;

    }
    .boll{
    background: #000000;
    height: 40px;
    width: 40px;
    border-radius: 30px;
    animation-name: boll;
    animation-duration: 4s;
    position:relative;
    bottom : 5px;
    }
    @keyframes boll{
    0%{
    left:0%;
    }
    25%{
    left: 10%;
    bottom:10%;
    }
    30%{
    left:20%;
    bottom:-10%;
    }
    35%{
    left: 30%;
    bottom:10%;
    }
    45%{
    left:40%;
    bottom: -10%
    }
    55%{
    left: 50%;
    bottom:10%;
    }
    65%{
    left:60%;
    bottom: -10%;
    }
    75%{
    left:70%;
    bottom: 10%;
    }
    85%{
    left: 80%;
    bottom: -10%;
    }
    95%{
    left: 90%;
    bottom: 10%;
    }
    100%{
    left: 100%;
    bottom: -10%;
    }
    }
    </style>

    <!– Custom Styles –>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <div class="back_box">
    <div class="boll">

    </div>
    </div>
    <script src="main.js"></script>
    </body>
    </html>

    Reply

Leave a Comment