Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2014
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts

    how to avoid repitition of the images in the following code

    <!doctype html>
    <html>
    <head>
    <style>
    #slider
    {
    width:100%;
    height:500px;
    background-color: #1c6db2;
    }
    #slider1{
    padding-left:30px;
    padding-right:30px;
    padding-bottom:30px;
    padding-top: :30px;
    margin-bottom: 30px;
    margin-left:30px;
    margin-top:30px;
    margin-right:30px;
    width:50%;
    height:350px;
    background-color:000px;
    -webkit-animation: myfirst 20s infinite; /* Chrome, Safari, Opera */
    animation: myfirst 10s infinite;
    }
    @-webkit-keyframes myfirst {
    0% {background-image:url('image1.png')}
    25%{background-image: url('image2.png');}
    50%{background-image: url('image3.png');}
    100% {background-image: url('image4.png');}
    }

    /* Standard syntax */
    @keyframes myfirst {
    0%{background-image: url('image1.png'); }
    25%{background-image: url('image2.png');}
    50% {background-image: url('image3.png');}
    100% {background-image: url('image4.png');}
    }

    </style>
    </head>
    <body>
    <div id="slider">
    <div id="slider1">
    </div>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,330
    Thanks
    23
    Thanked 616 Times in 615 Posts
    hareem after posting here 9 times you should use the code tags. At the bottom of the quick reply box is the Go Advanced button, click it.
    Then in the tool bar above you you'll find a hash mark [the #]. click it to get the code tags. Put your code inside of them.
    Why is this hidden? Ask the people that code this really great forum the guys at vBulletin.

    Oh yeah your question:
    Ran your code, all I get is a big blue box. Added my images, no change.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Aug 2014
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    images are running in this code but they are repeating
    Code:
    <!doctype html>
    <html>
    <head>
    <style>
    #slider
    {
    width:100%;
    height:500px;
    background-color: #1c6db2;
    }
    #slider1{
    padding-left:30px;
    padding-right:30px;
    padding-bottom:30px;
    padding-top: :30px;
    margin-bottom: 30px;
    margin-left:30px;
    margin-top:30px;
    margin-right:30px;
    width:50%;
    height:350px; 
    background-color:000px;
    -webkit-animation: myfirst 10s infinite; /* Chrome, Safari, Opera */ 
    animation: myfirst 10s infinite; 
    }
    @-webkit-keyframes myfirst {
    0% {background-image:url('image1.png')}
    25%{background-image: url('image2.png');}
    50%{background-image: url('image3.png');}
    100% {background-image: url('image4.png');}
    }
    
    /* Standard syntax */
    @keyframes myfirst {
    0%{background-image: url('image1.png'); }
    25%{background-image: url('image2.png');}
    50% {background-image: url('image3.png');}
    100% {background-image: url('image4.png');}
    }
    
    </style>
    </head> 
    <body>
    <div id="slider">
    <div id="slider1">
    </div> 
    </div> 
    </body>
    </html>

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    361
    Thanks
    9
    Thanked 53 Times in 52 Posts
    I wonder what browser you currently use.... Opera?
    Mine, a Firefox v.31 can't see any images but just blue background too.

    AFAIK, CSS3 animation can't animate background images, maybe not just yet.
    But if this is the case, I think you still can animate opacity.
    Just create several <img> inside your slider wrapper, and proceed with creating CSS3 animation for each.
    Last edited by hdewantara; 09-07-2014 at 03:09 AM. Reason: not complete


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •