CSS Auto Transition?

[bigtail]

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:

Test One

Test TWO

Test Three

Test Four

Test Five

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

Test One

Test TWO

Test Three

Test Four

Test Five

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

[chrisburton]

Put that into a jsfiddle

[kgscott284]

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.

[Chris Coyier]

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

[Author]

Posts