Auto Scroll Animation using CSS

Hey, developers welcome to Day 56 of our 90Days 90Projects challenge. And in Day 56 we are going to create Auto Scroll Animation using CSS.


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

auto-scroll-animation-using-css


Download Images: Click Here

HTML 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.0">
    <title> Infinite Auto Scroll </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="scroll">
        <ul>
            <li> <img src="../1.png" alt=""> </li>
            <li> <img src="../2.png" alt=""> </li>
            <li> <img src="../3.png" alt=""> </li>
            <li> <img src="../4.png" alt=""> </li>
            <li> <img src="../5.png" alt=""> </li>
            <li> <img src="../6.png" alt=""> </li>
            <li> <img src="../7.png" alt=""> </li>
            <li> <img src="../8.png" alt=""> </li>
            <li> <img src="../9.png" alt=""> </li>
            <li> <img src="../10.png" alt=""> </li>
            <li> <img src="../11.png" alt=""> </li>
            <li> <img src="../12.png" alt=""> <li>
            </li>
        </ul>
    </div>
</body>
</html>


CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.scroll {
    margin: auto;
    width: 1900px;
    overflow: visible;
}

.scroll ul {
    padding: 0;
    display: flex;
    border-radius: 10px;
    animation: scroll 50s infinite linear;
}

.scroll ul:hover {
    animation-play-state: paused;
}

.scroll li {
    margin: 0 10px;
    list-style: none;
    position: relative;
    border-radius: 10px;
}

.scroll img {
    height: auto;
    width: 300px;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    border-radius: 10px;
    max-width: fit-content;
}

.scroll img:hover {
    transform: scale(1.04);
}

@keyframes scroll {
    from {
        margin-left: 0%
    }

    to {
        margin-left: -100%
    }
}


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad