/* dissolve */
.dissolve {width: 1024px;
height: 262px;
position: relative;
overflow: hidden}
.dissolve .item {position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve 20s linear infinite;
-moz-animation: dissolve 20s linear infinite;
-ms-animation: dissolve 20s linear infinite;
animation: dissolve 20s linear infinite}
.dissolve .item:nth-child(2) {-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s}
.dissolve .item:nth-child(3) {-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s}
.dissolve .item:nth-child(4) {-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/* dissolve */
@width: 300px; // width of the carousel
@height: 200px; // height of the carousel
@numberofitems: 4; // the number of items in the carousel
@visibleitemduration: 4s; // time during which a carousel item is fully visible
@transitionduration: 1s; // duration of the transition between two carousel items
@oneitemduration: @visibleitemduration + @transitionduration;
@carouselperiod: @oneitemduration * @numberofitems;

.dissolve {width:@width;
height: @height;
position:relative;
overflow: hidden} .item {position:absolute;
left: 0;
right: 0;
opacity: 0;

-webkit-animation: dissolve @carouselperiod linear infinite;
-moz-animation: dissolve @carouselperiod linear infinite;
-ms-animation: dissolve @carouselperiod linear infinite;
animation: dissolve @carouselperiod linear infinite;

&:nth-child(2) {-webkit-animation-delay: @oneitemduration;
-moz-animation-delay: @oneitemduration;
-ms-animation-delay: @oneitemduration;
animation-delay: @oneitemduration}
&:nth-child(3) {-webkit-animation-delay: 2 * @oneitemduration;
-moz-animation-delay: 2 * @oneitemduration;
-ms-animation-delay: 2 * @oneitemduration;
animation-delay: 2 * @oneitemduration}
&:nth-child(4) {-webkit-animation-delay: 3 * @oneitemduration;
-moz-animation-delay: 3 * @oneitemduration;
-ms-animation-delay: 3 * @oneitemduration;
animation-delay: 3 * @oneitemduration}}}

/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}