Scribd Logo
Upload

Welcome to Scribd!

  • Scoala. Animatie

    Uploaded by

    SandaMarin
    9 views1 page
    This CSS code creates an image slider with 5 images that automatically slide from left to right over 20 seconds in an infinite loop. It defines a slider container with overflow hidden, positions the figure element inside relatively and sets its width to 500% of its parent. It also defines the animation keyframes to slide the images from left to right by changing the left position at different percentages over the 20 second duration.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This CSS code creates an image slider with 5 images that automatically slide from left to right over 20 seconds in an infinite loop. It defines a slider container with overflow hidden, positions the figure element inside relatively and sets its width to 500% of its parent. It also defines the animation keyframes to slide the images from left to right by changing the left position at different percentages over the 20 second duration.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views1 page

    Scoala. Animatie

    Uploaded by

    SandaMarin
    This CSS code creates an image slider with 5 images that automatically slide from left to right over 20 seconds in an infinite loop. It defines a slider container with overflow hidden, positions the figure element inside relatively and sets its width to 500% of its parent. It also defines the animation keyframes to slide the images from left to right by changing the left position at different percentages over the 20 second duration.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    #slider {

    overflow: hidden;
    }
    #slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation: 20s slider infinite;
    }
    #slider figure img {
    width: 20%;
    float: left;
    }

    @keyframes slider {
    0% {
    left: 0;
    }
    20% {
    left: 0;
    }
    25% {
    left: -100%;
    }
    45% {
    left: -100%;
    }
    50% {
    left: -200%;
    }
    70% {
    left: -200%;
    <div id="slider">
    <figure>
    <img src="img/desk.png">
    <img src="img/desk2.png">
    <img src="img/desk.png">
    <img src="img/desk3.png">
    <img src="img/desk.png">
    </figure>
    </div>

    You might also like