MediaWiki:Carousel.css

/* =======================  Carousel.css is what powers rotating imagery for a few infobox images of Time Lords, most notably, the Doctor, the Master and Romana. ======================== */

/* ====================  Definitions for classes used in templates that invoke the following dissolving image carousel ==================== */ .info-pic { text-align:center; margin: 0; padding:0; }

.info-pic2 { text-align:center; margin: 0; padding:3px 0 0 0; } .info-pic img, .info-pic2 img { width:250px; height:auto!important; }

/* ===================    Dissolving image carousel ===================   From mishunov.me/lab =================== */

.dissolve { position: relative; overflow: hidden; width:250px; /*necessary for Firefox*/ height:141.24px!important } .dissolve .item { position: absolute; left: 0; right: 0; opacity: 0; width:250px; /*necessary for Firefox*/ height:141.24px!important; -webkit-animation: dissolve 130s linear infinite; -moz-animation: dissolve 130s linear infinite; -ms-animation: dissolve 130s linear infinite; -o-animation: dissovle 130s linear infinite; animation: dissolve 130s linear infinite; } .dissolve .item:nth-child(2) { -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -ms-animation-delay: 10s; -o-animation-delay: 10s; animation-delay: 10s; } .dissolve .item:nth-child(3) { -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -ms-animation-delay: 20s; -o-animation-delay: 20s; animation-delay: 20s; } .dissolve .item:nth-child(4) { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -ms-animation-delay: 30s; -o-animation-delay: 30s; animation-delay: 30s; } .dissolve .item:nth-child(5) { -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -ms-animation-delay: 40s; -o-animation-delay: 40s; animation-delay: 40s; } .dissolve .item:nth-child(6) { -webkit-animation-delay: 50s; -moz-animation-delay: 50s; -ms-animation-delay: 50s; -o-animation-delay: 50s; animation-delay: 50s; } .dissolve .item:nth-child(7) { -webkit-animation-delay: 60s; -moz-animation-delay: 60s; -ms-animation-delay: 60s; -o-animation-delay: 60s; animation-delay: 60s; } .dissolve .item:nth-child(8) { -webkit-animation-delay: 70s; -moz-animation-delay: 70s; -ms-animation-delay: 70s; -o-animation-delay: 70s; animation-delay: 70s; } .dissolve .item:nth-child(9) { -webkit-animation-delay: 80s; -moz-animation-delay: 80s; -ms-animation-delay: 80s; -o-animation-delay: 80s; animation-delay: 80s; } .dissolve .item:nth-child(10) { -webkit-animation-delay: 90s; -moz-animation-delay: 90s; -ms-animation-delay: 90s; -o-animation-delay: 90s; animation-delay: 90s; } .dissolve .item:nth-child(11) { -webkit-animation-delay: 100s; -moz-animation-delay: 100s; -ms-animation-delay: 100s; -o-animation-delay: 100s; animation-delay: 100s; } .dissolve .item:nth-child(12) { -webkit-animation-delay: 110s; -moz-animation-delay: 110s; -ms-animation-delay: 110s; -o-animation-delay: 110s; animation-delay: 110s; } .dissolve .item:nth-child(13) { -webkit-animation-delay: 120s; -moz-animation-delay: 120s; -ms-animation-delay: 120s; -o-animation-delay: 120s; animation-delay: 120s; }

/* The keyframes calculations are based on assumption of 4 items in the carousel. You should notice the pattern for your own calculations.

To support Safari 4, you *must* have 0% and 100% frames */

@-webkit-keyframes dissolve { 7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; } 11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;} } @-moz-keyframes dissolve {

7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; } 11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;} /*   0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { opacity: 0; } 5%, 25% { opacity: 1;} */ } @-ms-keyframes dissolve { 7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; } 11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;} /*0%, 30%, 100% { opacity: 0; } 5%, 25% { opacity: 1;}*/ } @keyframes dissolve { 7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; } 11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;}

/*   0%, 30%, 100% { opacity: 0; } 5%, 25% { opacity: 1;}*/ }