treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

CSS Auto Transition?

  • bigtail
    Permalink to comment #

    Hi, I am looking for a way to start the slide show (transition) automatically when the page is loaded.

    You can see the slide show here: http://acecars24.com/normal

    [U][I][B]HTML Code:[/B][/I][/U] [CODE] <!DOCTYPE html> 

    <meta charset="utf-8" />
<meta content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width">

<title>CSS3 Slideshow</title>


<link href="css/slideshow.css" media="screen, projection" rel="stylesheet" type="text/css" />


      <article id=slider>

  <!-- Slider Setup -->

  <input type=radio name=slider id="slide1" checked />
  <input type=radio name=slider id="slide2" />
  <input type=radio name=slider id="slide3" />
  <input type=radio name=slider id="slide4" />
  <input type=radio name=slider id="slide5" />


  <!-- The Slider -->

  <div id=slides>

          <div id="overflow">

      <div class=inner>

        <article>
          <div class=info>
                     Test One
                      <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                      </div>

          <img src="images/01.jpg" alt="Travel Corporation" />
        </article>

        <article>
          <div class=info>
                     Test TWO
                      <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                      </div>

          <img src="images/02.jpg" alt="Travel Corporation" />
        </article>

        <article>
          <div class=info>
                    Test Three
                      <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                      </div>

          <img src="images/03.jpg" alt="Travel Corporation" />
        </article>

        <article>
          <div class=info>
                     Test Four
                      <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                      </div>

          <img src="images/04.jpg" alt="Travel Corporation" />
        </article>

        <article>
          <div class=info>
                     Test Five
                      <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                      </div>

          <img src="images/05.jpg" alt="Travel Corporation" />
        </article>

      </div> <!-- .inner -->

    </div> <!-- #overflow -->

  </div> <!-- #slides -->


  <!-- Controls and Active Slide Display -->

  <div id=controls>

    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>

  </div> <!-- #controls -->

  <div id=active>

    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>

  </div> <!-- #active -->

</article>

    [/CODE]

    [B][I][U]CSS Code (slideshow.css): [/U][/I][/B] [CODE] body { font: 14px/22px Arial, Helvetica, sans-serif; color: #333; background: url(../images/background.png); margin: 10px auto; overflow-x: hidden; width: 960px; }

    label, a { color: teal; cursor: pointer; text-decoration: none; } label:hover, a:hover { color: #000 !important; }

    /* Slider Setup */

    input { display: none; }

    slide1:checked ~ #slides .inner {

    margin-left: 0;

    }

    slide2:checked ~ #slides .inner {

    margin-left: -100%;

    }

    slide3:checked ~ #slides .inner {

    margin-left: -200%;

    }

    slide4:checked ~ #slides .inner {

    margin-left: -300%;

    }

    slide5:checked ~ #slides .inner {

    margin-left: -400%;

    }

    overflow {

    width: 100%;  !important;
overflow: hidden;

    }

    /* Info Box */

    .info { line-height: 20px; margin: 0 -10% 0 680px; position: absolute; !important; padding: 30px 0px; opacity: 0; color: #fff; text-align: left; width: 220px; } .info h3 { color: #fff; margin: 15px 0 15px; font-weight: normal; font-size: 22px; font-style: normal; }

    .readmore { padding: 20px 0px; }

    slides .inner {

    width: 500%;
line-height: 0;

    }

    slides article {

    width: 20%;
float: left;  !important;

    }

    /* Slider Styling */

    /* Control Setup */

    controls {

    margin: -25% 0 0 0;
width: 100%;
height: 50px;

    }

    controls label {

    display: none;
width: 50px;
height: 50px;
opacity: 0.3;

    }

    active {

    margin: 23% 0 0;
text-align: center;

    }

    active label {

    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #bbb;

    }

    active label:hover {

    background: #ccc;
border-color: #777 !important;

    }

    controls label:hover {

    opacity: 0.8;

    }

    slide1:checked ~ #active label:nth-child(1), #slide2:checked ~ #active label:nth-child(2), #slide3:checked ~ #active label:nth-child(3), #slide4:checked ~ #active label:nth-child(4), #slide5:checked ~ #active label:nth-child(5) {

    background: #333;
border-color: #333 !important;

    }

    /* Next Button */

    slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1) {

    background: url('../images/next.png') no-repeat;
float: right;
margin: 5% -45px 0 0;
display: block;

    }

    /* Previous Button */

    slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4) {

    background: url('../images/prev.png') no-repeat;
float: left;
margin: 5% 0 0 -45px;
display: block;

    }

    /* Image Background */

    slides {

    box-shadow: 1px 1px 4px #666;
background: url(../images/slideshow-background.jpg);
  min-height: 297px;

    }

    /* Animation */

    /* Moving from right to left */

    slides .inner {

    -webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

    }

    /* Text Transition */

    slide1:checked ~ #slides article:nth-child(1) .info, #slide2:checked ~ #slides article:nth-child(2) .info, #slide3:checked ~ #slides article:nth-child(3) .info, #slide4:checked ~ #slides article:nth-child(4) .info, #slide5:checked ~ #slides article:nth-child(5) .info {

    opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;

    }

    [/CODE]

    Thanks

  • chrisburton
    Permalink to comment #

    Put that into a jsfiddle

  • kgscott284
    Permalink to comment #

    or post a link to the live project...that is a mess up there...

    Side note to @ChrisCoyier: I can't remember where the Git is for this redesign to make it an issue, but the code functionality has really busted my balls since the last (perfect) version....something is quite amiss...see this OP for reference.

  • chriscoyier
    Permalink to comment #

    Paste the code in, select it, press the code button.

  • knittingfrenzy18
    Permalink to comment #

    I can't read your code or spend my time doing that, but I can tell you that CSS3 alone is not going to get the desired effect. Even if you manage to use animations and all, this slideshow will not be supported in most browsers. It will be quite unstable, etc.

    Your best bet is to try learning jQuery.

Add a Comment