Need help with Fullscreen slideshow using CSS3

TammyGPhotoTammyGPhoto Registered Users Posts: 153 Major grins
edited September 28, 2013 in SmugMug Customization
I have been working on my fullscreen slideshow using CSS3 as discussed in this thread and this website..
my problem is this..i have it working using the code to zoom in the photos ...but for the life of me am not able to get it to work using the non-zoom code here ...it doesn't play at all when i do this...

here is the code i have tried with no success... any idea why this isn't working? and sorry but my site is not unveiled at this time..
:scratch
thx for any help you can provide!! 
/*-----  Code to display fullscreen background for all browsers ie 9 and less  -----*/
.sm-ie-5, .sm-ie-6, .sm-ie-7, .sm-ie-8, .sm-ie-9 {
  background: url(http://www.tammygphotography.com/Portfolio/Nature-Landscapes/i-25QGvPZ/1/XL/PA130412-XL.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*-----  Code to display slideshow for all other browsers  -----*/

.cb-slideshow, .cb-slideshow:after { 
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -99999; 
}

.cb-slideshow:after { 
content: '';
background: transparent url(../images/pattern.png) repeat top left; 
}

.cb-slideshow li span { 
width: 100%;    
height: 100%;   
position: absolute;
top: 0;
left: 0;    
color: transparent;   
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s; 
}

.cb-slideshow li div { 
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s; 
}

.cb-slideshow li div h3 { 
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px; 
}

.cb-slideshow li:nth-child(1) span { 
background-image: url(http://www.tammygphotography.com/Portfolio/Nature-Landscapes/i-25QGvPZ/1/XL/PA130412-XL.jpg) 
}

.cb-slideshow li:nth-child(2) span { 
background-image: url(http://www.tammygphotography.com/Portfolio/Planes/i-HWh2BCr/1/XL/P6307799-XL.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s; 
}

.cb-slideshow li:nth-child(3) span { 
background-image: url(http://www.tammygphotography.com/Portfolio/Flowers-Macro/i-mSRvvnT/1/XL/PA210711-XL.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) span { 
background-image: url(http://www.tammygphotography.com/Portfolio/Liquid-Art/i-LMkrbZn/3/XL/P2081340-XL.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s; 
}

.cb-slideshow li:nth-child(5) span { 
background-image: url(http://www.tammygphotography.com/Portfolio/Nautical/i-PcNfKJb/1/XL/P6247032-XL.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s; 
}

.cb-slideshow li:nth-child(6) span { 
background-image: url(http://www.tammygphotography.com/Portfolio/Nature-Landscapes/i-M86WKrG/1/XL/PA050061-XL.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s; 
}

.cb-slideshow li:nth-child(2) div { 
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s; 
}

.cb-slideshow li:nth-child(3) div { 
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) div { 
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s; 
}

.cb-slideshow li:nth-child(5) div { 
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s; 
}

.cb-slideshow li:nth-child(6) div { 
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s; 
}

/* Animation for the slideshow images */

@-webkit-keyframes imageAnimation { 
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; 
}

8% { opacity: 1;
-webkit-animation-timing-function: ease-out; 
}
17% { opacity: 1 
}
25% { opacity: 0 
}
100% { opacity: 0 
}

}

@-moz-keyframes imageAnimation { 
0% { opacity: 0;
-moz-animation-timing-function: ease-in; 
}
8% { opacity: 1;
-moz-animation-timing-function: ease-out; 
}
17% { opacity: 1 
}
25% { opacity: 0 
}
100% { opacity: 0 
}

}

@-o-keyframes imageAnimation { 
0% { opacity: 0;
-o-animation-timing-function: ease-in; 
}
8% { opacity: 1;
-o-animation-timing-function: ease-out; 
}
17% { opacity: 1 
}
25% { opacity: 0 
}
100% { opacity: 0 
}

}

@-ms-keyframes imageAnimation { 
0% { opacity: 0;
-ms-animation-timing-function: ease-in; 
}
8% { opacity: 1;
-ms-animation-timing-function: ease-out; 
}
17% { opacity: 1 
}
25% { opacity: 0 
}
100% { opacity: 0 
}

}

@keyframes imageAnimation { 
0% { opacity: 0;
-ms-animation-timing-function: ease-in; 
}
8% { opacity: 1;
-ms-animation-timing-function: ease-out; 
}
17% { opacity: 1 
}
25% { opacity: 0 
}
100% { opacity: 0 
}

}

/* Animation for the title */

@-webkit-keyframes titleAnimation { 
0% { opacity: 0 
}
8% { opacity: 1 
}
17% { opacity: 1 
}
19% { opacity: 0 
}
100% { opacity: 0 
}

}

@-moz-keyframes titleAnimation { 
0% { opacity: 0 
}
8% { opacity: 1 
}
17% { opacity: 1 
}
19% { opacity: 0 
}
100% { opacity: 0 
}

}

@-o-keyframes titleAnimation { 
0% { opacity: 0 
}
8% { opacity: 1 
}
17% { opacity: 1 
}
19% { opacity: 0 
}
100% { opacity: 0 
}

}

@-ms-keyframes titleAnimation { 
0% { opacity: 0 
}
8% { opacity: 1 
}
17% { opacity: 1 
}
19% { opacity: 0 
}
100% { opacity: 0 
}

}

@keyframes titleAnimation { 
0% { opacity: 0 
}
8% { opacity: 1 
}
17% { opacity: 1 
}
19% { opacity: 0 
}
100% { opacity: 0 
}

}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}

@media screen and (max-width: 1140px) { 
.cb-slideshow li div h3 { font-size: 140px 
}

@media screen and (max-width: 600px) { 
.cb-slideshow li div h3 { font-size: 80px 
}
My Site

Comments

  • TammyGPhotoTammyGPhoto Registered Users Posts: 153 Major grins
    edited September 23, 2013
    **TAP TAP**

    is this thing on? anyone have any ideas? need some help here if possible...thx!
    My Site
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 23, 2013
    TammyGPhoto wrote: »
    **TAP TAP**

    is this thing on? anyone have any ideas? need some help here if possible...thx!

    I have the non-zoom version working as follows:

    HTML: 
    <ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
    </li>
    <li>
        <span>Image 02</span>
    </li>
    <li>
        <span>Image 03</span>
    </li>
    <li>
        <span>Image 04</span>
    </li>
    <li>
        <span>Image 05</span>
    </li>
    <li>
        <span>Image 06</span>
    </li>
    <li>
        <span>Image 07</span>
    </li>
    <li>
        <span>Image 08</span>
    </li>
</ul>

    CSS: 
    /*-----  Code to display fullscreen background for all browsers ie 9 and less  -----*/

.sm-ie-5, .sm-ie-6, .sm-ie-7, .sm-ie-8, .sm-ie-9 {
  background: url(http://www.aaronmphotography.com/photos/i-QV2J56w/0/O/i-QV2J56w-O.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*-----  Code to display slideshow for all other browsers  -----*/

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -99999; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 48s linear infinite 0s;
    -moz-animation: imageAnimation 48s linear infinite 0s;
    -o-animation: imageAnimation 48s linear infinite 0s;
    -ms-animation: imageAnimation 48s linear infinite 0s;
    animation: imageAnimation 48s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 48s linear infinite 0s;
    -moz-animation: titleAnimation 48s linear infinite 0s;
    -o-animation: titleAnimation 48s linear infinite 0s;
    -ms-animation: titleAnimation 48s linear infinite 0s;
    animation: titleAnimation 48s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-QV2J56w/0/X3/i-QV2J56w-X3.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-TwP57Ks/0/X3/i-TwP57Ks-X3.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-qkVtxBG/0/X3/i-qkVtxBG-X3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-djSwVsG/0/X3/i-djSwVsG-X3.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-2B88tK9/0/X3/i-2B88tK9-X3.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-GkqdfHR/0/X3/i-GkqdfHR-X3.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

.cb-slideshow li:nth-child(7) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-xt55TV4/0/X3/i-xt55TV4-X3.jpg);
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s; 
}

.cb-slideshow li:nth-child(8) span { 
    background-image: url(http://www.aaronmphotography.com/photos/i-rzMB6bt/0/X3/i-rzMB6bt-X3.jpg);
    -webkit-animation-delay: 42s;
    -moz-animation-delay: 42s;
    -o-animation-delay: 42s;
    -ms-animation-delay: 42s;
    animation-delay: 42s; 
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 23, 2013
    Also, you realize you need to go in and fix the timing of each of the images? They're set at 6 second intervals. Each image should be 6 seconds after the previous one. Your code goes 6, 12, 18, 24, 30, 6, 12, 18, 24, 30. It should be 6,12,18,24,30,36,42,48,54,60, etc. You also need to adjust the timing in the beginning, where it says 36 seconds needs to be increased to the maximum time you're using (60 seconds?). Basically 6*number of images you want to use.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • TammyGPhotoTammyGPhoto Registered Users Posts: 153 Major grins
    edited September 24, 2013
    leftquark wrote: »
    Also, you realize you need to go in and fix the timing of each of the images? They're set at 6 second intervals. Each image should be 6 seconds after the previous one. Your code goes 6, 12, 18, 24, 30, 6, 12, 18, 24, 30. It should be 6,12,18,24,30,36,42,48,54,60, etc. You also need to adjust the timing in the beginning, where it says 36 seconds needs to be increased to the maximum time you're using (60 seconds?). Basically 6*number of images you want to use.

    thx so much for the help wings.gif...i have no clue about what the timing is as all i did was copy someone elses code...i was instructed how to add more images (with math) but as i couldn't get the 6 to work i wanted to start there..if that works how do i add more photos to my SS? i was thinking of 10-12 images..and i suck at math so please go easy on me!! thx!
    My Site
  • TammyGPhotoTammyGPhoto Registered Users Posts: 153 Major grins
    edited September 24, 2013
    well so much for that!!!!! i am not sure why but it is still not working for me..even using your code directly or my own links...it is just blank when i enter the code...GGRRR..not sure why it is not liking the code!headscratch.gifne_nau.gif
    My Site
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 24, 2013
    TammyGPhoto wrote: »
    well so much for that!!!!! i am not sure why but it is still not working for me..even using your code directly or my own links...it is just blank when i enter the code...GGRRR..not sure why it is not liking the code!headscratch.gifne_nau.gif

    I would delete the HTML/CSS blocks and start over. Try pasting in the code again. It should work.

    Also, the math is very simple. If each image is 6 seconds long, just add 6 to the previous one....

    6, 12, 18, 24, 36, 48, 54, 60, 66, 72, 78, 84 ...

    If you're really having trouble adding 6 to the previous number just open the calculator app on your computer and keep doing 6+6+6+6....
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • TammyGPhotoTammyGPhoto Registered Users Posts: 153 Major grins
    edited September 25, 2013
    leftquark wrote: »
    Also, you realize you need to go in and fix the timing of each of the images? They're set at 6 second intervals. Each image should be 6 seconds after the previous one. Your code goes 6, 12, 18, 24, 30, 6, 12, 18, 24, 30. It should be 6,12,18,24,30,36,42,48,54,60, etc. You also need to adjust the timing in the beginning, where it says 36 seconds needs to be increased to the maximum time you're using (60 seconds?). Basically 6*number of images you want to use.

    ok..i got it to work with the 8 no problem...i added 8 more for a total of 16 but now there is a transition issue. i read in the other thread that the transition keyframe %'s needed to be fixed if you added more pics...that is where i was having the math issues...ok..i will see if i can figure it out tomorrow..my head hurts!!!! there has to be a simpler way!!

    EDIT - IT WORKS!!!!!! wings.gif :ivar WOOT!! i have a few tweaks to make it totally rock but i had to fix the transition keyframes to make it work right...PHEW!! lots of work!! but now i know what needs to be done!! thx all for the help!
    My Site
  • southeasternphotographysoutheasternphotography Registered Users Posts: 647 Major grins
    edited September 26, 2013
    Congrats Tammy!
    Troup Nightingale - Southeastern Photography - Photographer in Brunswick, Georgia
  • TammyGPhotoTammyGPhoto Registered Users Posts: 153 Major grins
    edited September 28, 2013
    southeasternphotography wrote: »
    Congrats Tammy!
    thx!!

    and in case anyone is interested..here is the code i used to finally get it to work..


    HTML
    <ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
    </li>
    <li>
        <span>Image 02</span>
    </li>
    <li>
        <span>Image 03</span>
    </li>
    <li>
        <span>Image 04</span>
    </li>
    <li>
        <span>Image 05</span>
    </li>
    <li>
        <span>Image 06</span>
    </li>
    <li>
        <span>Image 07</span>
    </li>
    <li>
        <span>Image 08</span>
    </li>
    <li>
        <span>Image 09</span>
    </li>
    <li>
        <span>Image 10</span>
    </li>
    <li>
        <span>Image 11</span>
    </li>
    <li>
        <span>Image 12</span>
    </li>
</ul>
    CSS 
    /*-----  Code to display fullscreen background for all browsers ie 9 and 

less  -----*/
.sm-ie-5, .sm-ie-6, .sm-ie-7, .sm-ie-8, .sm-ie-9 {
  background: url(http://www.tammygphotography.com/photos/i-q7n3wfn/0/X3/i-

q7n3wfn-X3.jpg) no-repeat center center 
        fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*-----  Code to display slideshow for all other browsers  -----*/
.cb-slideshow, .cb-slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -99999;
}

.cb-slideshow:after {
  content: '';
  background: transparent url(../images/pattern.png) repeat top left;
}

.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 96s linear infinite 0s;
  -moz-animation: imageAnimation 96s linear infinite 0s;
  -o-animation: imageAnimation 96s linear infinite 0s;
  -ms-animation: imageAnimation 96s linear infinite 0s;
  animation: imageAnimation 96s linear infinite 0s;
}

.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: 30px;
  left: 0px;
  width: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  -webkit-animation: titleAnimation 96s linear infinite 0s;
  -moz-animation: titleAnimation 96s linear infinite 0s;
  -o-animation: titleAnimation 96s linear infinite 0s;
  -ms-animation: titleAnimation 96s linear infinite 0s;
  animation: titleAnimation 96s linear infinite 0s;
}

.cb-slideshow li div h3 {
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  font-size: 240px;
  padding: 0;
  line-height: 200px;
}

.cb-slideshow li:nth-child(1) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

q7n3wfn/0/X3/i-q7n3wfn-X3.jpg) 
}

.cb-slideshow li:nth-child(2) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

GNvspTg/0/X3/i-GNvspTg-X3.jpg);
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  -ms-animation-delay: 8s;
  animation-delay: 8s;
}

.cb-slideshow li:nth-child(3) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

jVT39Pm/0/X3/i-jVT39Pm-X3.jpg);
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  -ms-animation-delay: 16s;
  animation-delay: 16s;
}

.cb-slideshow li:nth-child(4) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

gHKS74C/0/X3/i-gHKS74C-X3.jpg);
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}

.cb-slideshow li:nth-child(5) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

49TrHTD/0/X3/i-49TrHTD-X3.jpg);
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  -o-animation-delay: 32s;
  -ms-animation-delay: 32s;
  animation-delay: 32s;
}

.cb-slideshow li:nth-child(6) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

M75w6TB/0/X3/i-M75w6TB-X3.jpg);
  -webkit-animation-delay: 40s;
  -moz-animation-delay: 40s;
  -o-animation-delay: 40s;
  -ms-animation-delay: 40s;
  animation-delay: 40s;
}

.cb-slideshow li:nth-child(7) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

2Kw7Ghv/0/X3/i-2Kw7Ghv-X3.jpg);
  -webkit-animation-delay: 48s;
  -moz-animation-delay: 48s;
  -o-animation-delay: 48s;
  -ms-animation-delay: 48s;
  animation-delay: 48s;
}

.cb-slideshow li:nth-child(8) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

tHt6R3r/0/X3/i-tHt6R3r-X3.jpg);
  -webkit-animation-delay: 56s;
  -moz-animation-delay: 56s;
  -o-animation-delay: 56s;
  -ms-animation-delay: 56s;
  animation-delay: 56s;
}

.cb-slideshow li:nth-child(9) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

rFMDtdP/0/X3/i-rFMDtdP-X3.jpg);
  -webkit-animation-delay: 64s;
  -moz-animation-delay: 64s;
  -o-animation-delay: 64s;
  -ms-animation-delay: 64s;
  animation-delay: 64s;
}

.cb-slideshow li:nth-child(10) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

cLhpdm9/0/X3/i-cLhpdm9-X3.jpg);
  -webkit-animation-delay: 72s;
  -moz-animation-delay: 72s;
  -o-animation-delay: 72s;
  -ms-animation-delay: 72s;
  animation-delay: 72s;
}

.cb-slideshow li:nth-child(11) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

8wcfKGB/0/X3/i-8wcfKGB-X3.jpg);
  -webkit-animation-delay: 80s;
  -moz-animation-delay: 80s;
  -o-animation-delay: 80s;
  -ms-animation-delay: 80s;
  animation-delay: 80s;
}

.cb-slideshow li:nth-child(12) span {
  background-image: url(http://www.tammygphotography.com/photos/i-

Q8Ndrxc/0/X3/i-Q8Ndrxc-X3.jpg);
  -webkit-animation-delay: 88s;
  -moz-animation-delay: 88s;
  -o-animation-delay: 88s;
  -ms-animation-delay: 88s;
  animation-delay: 88s;
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }

  4% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }

  4% {
    opacity: 1;
    -moz-animation-timing-function: ease-out;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }

  4% {
    opacity: 1;
    -o-animation-timing-function: ease-out;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@-ms-keyframes imageAnimation {
  0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
  }

  4% {
    opacity: 1;
    -ms-animation-timing-function: ease-out;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }

  4% {
    opacity: 1;
    animation-timing-function: ease-out;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

/* Animation for the title */
@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@-moz-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@-o-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@-ms-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

@keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span {
  opacity: 1;
}

@media screen and (max-width: 1140px) {
  .cb-slideshow li div h3 {
    font-size: 140px;
  }

}

@media screen and (max-width: 600px) {
  .cb-slideshow li div h3 {
    font-size: 80px;
  }

}
    My Site
Sign In or Register to comment.