Ciao.
una ottima soluzione col comando css trasform
Giusto per chiarire: il comando trasform non esiste.
Forse volevi scrivere transform. Ma anche in quel caso la proprietà transform non ha niente a che fare con animation.

Forse intendevi transition?
In questo caso le due cose potrebbero avere delle analogie ma è comunque meglio parlare più propriamente di animation.

Venendo alla tua richiesta, in linea di massima puoi risolvere impostando inizialmente opacity:0 alle immagini e rivedendo la sequenza di keyframes in modo che anche qui opacity sia inizialmente 0.

Inoltre il tutto può essere meglio ottimizzato eliminando un po' di codice ridondante.
Ti posto un esempio concreto. Non mi dilungo su ulteriori spiegazioni ma, se dovessero servire, chiedi pure.
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style>
      @-webkit-keyframes cf4FadeInOut {
         0% {opacity:0}
         8% {opacity:1}
        25% {opacity:1}
        33% {opacity:0}
      }
      @-moz-keyframes cf4FadeInOut {
         0% {opacity:0}
         8% {opacity:1}
        25% {opacity:1}
        33% {opacity:0}
      }
      @-o-keyframes cf4FadeInOut {
         0% {opacity:0}
         8% {opacity:1}
        25% {opacity:1}
        33% {opacity:0}
      }
      @keyframes cf4FadeInOut {
         0% {opacity:0}
         8% {opacity:1}
        25% {opacity:1}
        33% {opacity:0}
      }
      .logo {
        position:relative;
        height:281px;
        width:450px;
        margin:0 auto;
      }
      .logo img {
        position:absolute;
        left:0;
        opacity:0;
        -webkit-animation: cf4FadeInOut  16s ease-in-out infinite;
           -moz-animation: cf4FadeInOut  16s ease-in-out infinite;
             -o-animation: cf4FadeInOut  16s ease-in-out infinite;
                animation: cf4FadeInOut  16s ease-in-out infinite;
      }
      .logo img:nth-of-type(1) {
        -webkit-animation-delay: -1.3s;
           -moz-animation-delay: -1.3s;
             -o-animation-delay: -1.3s;
                animation-delay: -1.3s;
      }
      .logo img:nth-of-type(2) {
        -webkit-animation-delay: 2.7s;
           -moz-animation-delay: 2.7s;
             -o-animation-delay: 2.7s;
                animation-delay: 2.7s;
      }
      .logo img:nth-of-type(3) {
        -webkit-animation-delay: 6.7s;
           -moz-animation-delay: 6.7s;
             -o-animation-delay: 6.7s;
                animation-delay: 6.7s;
      }
      .logo img:nth-of-type(4) {
        -webkit-animation-delay: 10.7s;
           -moz-animation-delay: 10.7s;
             -o-animation-delay: 10.7s;
                animation-delay: 10.7s;
      }
    </style>
  </head>
  <body>
    <div class="logo" >
      <img src="immagine1.png" alt="" >
      <img src="immagine2.png" alt="" >
      <img src="immagine3.png" alt="" >
      <img src="immagine4.png" alt="" >
    </div>
  </body>
</html>