<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Animated Carousel with Fade Transitions
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
body{
padding:0;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Hide Fallback content first */
.fallback{
display:none;
}
.carousel{
display:block !important;
max-height:none !important;
position:relative;
}
/*
Selective blocking for clients.
- Samsung (#MessageViewBody) - no absolute positioning
- Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
*/
#MessageViewBody .fallback,
body.MsgBody .fallback{
display:block;
}
#MessageViewBody .carousel,
body.MsgBody .carousel{
display:none !important;
}
.carousel a{
width:100%;
display:block;
}
.carousel img{
display:block!important;
width:100% !important;
height:auto !important;
}
.carousel.responsive{
width:100% !important;
}
.carousel.responsive .car-cont{
width:100% !important;
height:auto !important;
}
/* Fade */
.carousel.fade a{
position:absolute;
top:0px;
left:0px;
-webkit-animation: car-anim 9s linear infinite;
}
.carousel.fade a:nth-child(1){
position:relative;
-webkit-animation-delay: -10s;
}
.carousel.fade a:nth-child(2){
-webkit-animation-delay: -7s;
}
.carousel.fade a:nth-child(3){
-webkit-animation-delay: -4s;
}
@-webkit-keyframes car-anim
{
/* start fade in */
0%{
z-index:2;
opacity:0;
}
/* end fade in */
5%{
opacity:1;
}
33%{
z-index:2;
}
/* lower z-index - allow next image to fade in */
33.1%{
z-index:1;
}
/* already obscured */
38%{
opacity:1;
}
/* hide */
38.1%{
opacity:0;
}
100%{
z-index:1;
opacity:0;
}
}
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0"><tr>
<td> </td>
<td width="600" style="background-color:#ffffff">
<BR>
<div style="font-family:'Helvetica Neue',Helvetica,Arial;color:#333333;padding:10px;">
<span style="font-size:24px;font-weight:200;">Animated Carousel in Email: Fade Transitions</span><BR>
<span style="font-size:16px;font-weight:normal">Works in Webkit based clients: iOS Mail, Apple Mail, Outlook for Mac.</span><BR><BR>
<a href="https://www.emailonacid.com/blog/article/email-development/tutorial-animated-image-carousel-for-email?utm_referrer=freshinbox" style="color: #348eda;" target="_new">Learn how to customize this carousel</a><BR>
<BR>
</div>
<!-- content -->
<!-- animated carousel -->
<!--[if !mso]><!-- -->
<div class="carousel fade responsive" style="overflow:hidden;display:none;max-height:0px;">
<div class="car-cont" style="position:relative;width:500px;height:320px;">
<a href="https://www.google.com/search?q=castles"><img src="http://freshinbox.com/examples/animated-carousel/images/car-castle.jpg" border="0"></a>
<a href="https://www.google.com/search?q=meadows"><img src="http://freshinbox.com/examples/animated-carousel/images/car-meadow.jpg" border="0"></a>
<a href="https://www.google.com/search?q=coast"><img src="http://freshinbox.com/examples/animated-carousel/images/car-coast.jpg" border="0"></a>
</div>
</div>
<!--<![endif]-->
<!-- static fallback content -->
<div class="fallback">
<a href="https://www.google.com/search?q=fallback" ><img src="http://freshinbox.com/examples/animated-carousel/images/carousel-fallback.jpg" height="320" width="500" style="display:block;" border="0"></a>
</div>
<!-- /content -->
</td><td> </td>
</tr></table>
<BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>