title: CSS Animation Switch between two images
body: <p>I'm trying to animate a lower third. I got the images ready but I'm not sure how I can switch between two images using CSS Animation.
  The animation is going to be infinite looped and I'm going to change the opacity of image01 to 100% at X percent in to the animation and image02 to 100% at Y percent in to the animation. I'm going to animate it so it comes from the left side of the screen and in later that's why I have '<em>left: -1229px;</em>' below in the css code.</p>
  
  <p>Div setup:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="cf"&gt;
          &lt;div class="l_com"&gt;&lt;/div&gt;
          &lt;div class="l_cha"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm using this css code to set the images: (I'm going to animate 'left' later)</p>
  
  <pre><code>.l_com{
      background-image: url(/img/image01.png);
      width: 1229px;
      height: 108px;
      position: absolute;
      /*left: -1229px;*/
      opacity: 100;
  
  }
  .l_cha{
      background-image: url(/img/image02.png);
      width: 1229px;
      height: 108px;
      position: absolute;
      /*left: -1229px;*/
      opacity: 100;
  
  }
  </code></pre>
  
  <p>Now, for testing I'm using this CSS code for the animation to be able to see it quickly and make changes if something is wrong:</p>
  
  <pre><code>#cf{
      -webkit-transition: all 60s ease-in;
      -webkit-animation-direction: normal;
      -webkit-animation-duration: 60s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-name: animation;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-delay: 9s;    
  }
  </code></pre>
  
  <p>so the name of the animation is 'animation'.
  Is there a way I can animate a specific div inside the main div with the id 'cf'
  the code I tested is this (and no I don't think it's correct at all but I'll just put it here so you might get a better idea of what I'm trying to do)</p>
  
  <pre><code>@keyframes animation {
    0% {
     .l_com.opacity: 0; 
    }
    20% {
      .l_com.opacity: 0; 
    }
    21% {
      .l_com.opacity: 100;
    }
    25% {
      .l_com.opacity: 100;
    }
    26% {
      .l_com.opacity: 0;
    }  
  
    40% {
      .l_cha.opacity: 0; 
    }
    41% {
      .l_cha.opacity: 100;
    }
    45% {
      .l_cha.opacity: 100;
    }
    46% {
      .l_cha.opacity: 0;
    }     
    100% {    
    }
  }
  </code></pre>