Grow your CSS skills. Land your dream job.

CSS Auto Transition?

  • # October 20, 2012 at 2:25 pm

    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

    HTML Code:

    < !DOCTYPE html>







    Test One

    Travel Corporation

    Test TWO

    Travel Corporation

    Test Three

    Travel Corporation

    Test Four

    Travel Corporation

    Test Five

    Travel Corporation











    [/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[CODE]
    < !DOCTYPE html>







    Test One

    Travel Corporation

    Test TWO

    Travel Corporation

    Test Three

    Travel Corporation

    Test Four

    Travel Corporation

    Test Five

    Travel Corporation











    [/CODE]

    CSS Code (slideshow.css):

    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[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

    # October 20, 2012 at 2:28 pm

    Put that into a jsfiddle

    # October 20, 2012 at 10:18 pm

    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.

    # October 20, 2012 at 10:42 pm

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

    # October 21, 2012 at 1:33 am

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".