Create movement with kinetic code

Litmus Personalize can be used within CSS to add movement to email, for example in a carousel.

Litmus Personalize images behave the same way as typical images in the code so you can use them in place of any other image, even as part of CSS based kinetic code.

You can create a kinetic tag where animation or interactivity is delegated to the email client using CSS3 techniques. Content Automation templates built with the repeated property are perfect for kinetic tags. Keep in mind that inbox support for kinetic email is inconsistent. 

Kinetic tags are created by using HTML and CSS style. The first step includes a static image with repeated blocks twice the size and twice as many text callouts or statements as needed. Next, craft the CSS to create the desired movement.

Example: Litmus Personalize weather tag scrolling

.viewport {
  height: 220px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.viewport > div {
  height: 220px;
  width: 1200px;
  background: url(https://s3.amazonaws.com/elasticbeanstalk-us-east-1-955968379092/Images/kinoWeatherForecastBanner.png);
  background-size: 1200px 220px;
  position: absolute;
  top: 0;
  left: 0;
  /*height: 220px;*/
  transform: translate3d(0, 0, 0);
}
.viewport .scrolling-image {
  animation: moveSlideshow 20s linear infinite;
}

@keyframes moveSlideshow {
  /*100% { 
    transform: translateX(-200px);  
  }*/
  0% { transform: translateX(0); }
  5% { transform: translateX(0); }
  10%{ transform: translateX(-120px); }
  15% { transform: translateX(-120px); }
  20%{ transform: translateX(-240px); }
  25% { transform: translateX(-240px); }
  30%{ transform: translateX(-360px); }
  35% { transform: translateX(-360px); }
  40%{ transform: translateX(-480px); }
  45% { transform: translateX(-480px); }
  50% { transform: translateX(-600px); }
  55% { transform: translateX(-600px); }
  60%{ transform: translateX(-480px); }
  65% { transform: translateX(-480px); }
  70%{ transform: translateX(-360px); }
  75% { transform: translateX(-360px); }
  80%{ transform: translateX(-240px); }
  85% { transform: translateX(-240px); }
  90%{ transform: translateX(-120px); }
  95% { transform: translateX(-120px); }
  100% { transform: translateX(0); }
}