Create movement with kinetic code

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

It is possible to use Litmus Personalize live images within CSS to create movement in the HTML.

Litmus Personalize images behave the same way as normal images in the code, so they will do whatever you command them to do! Therefore it is possible to use them in kinetic code, for example in a carousel.

It is also possible to create a kinetic tag where animation or interactivity is delegated to the email client using CSS3 techniques. Theoretically you can create an animation by making the Litmus Personalize tag a little more complex by adding the CSS required. 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); }
}