/* cards */

li {
    background-image: url('writing.png'), url('char1.png');
    background-repeat: no-repeat;
    background-position: 18px 55px, 23px 10px;
    background-size: auto, 50%;
 
    height: 90px;
    width: 90px;
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
    border-radius: 3px;
}

/* char1 */

@keyframes crossfade1 {
  0%   { 
    background-image: url('writing.png'), url('char1.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  50%  { 
    background-image: url('writing.png'), url('char1b.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  100% { 
    background-image: url('writing.png'), url('char1.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
}

@keyframes crossfade1b {
  0%   { 
    background-image: url('writing.png'), url('char1b.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  50%  { 
    background-image: url('writing.png'), url('char1.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  100% { 
    background-image: url('writing.png'), url('char1b.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
}

/* char2 */


@keyframes crossfade2 {
  0%   { 
    background-image: url('writing.png'), url('char2.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  50%  { 
    background-image: url('writing.png'), url('char2b.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  100% { 
    background-image: url('writing.png'), url('char2.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
}

@keyframes crossfade2b {
  0%   { 
    background-image: url('writing.png'), url('char2b.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  50%  { 
    background-image: url('writing.png'), url('char2.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
  100% { 
    background-image: url('writing.png'), url('char2b.png'), url('explosion.png'); 
    background-size: auto, 50%, 0%;
    }
}

/* char3 */

@keyframes nofade3 {
     0%   { 
        background-image: url('writing.png'), url('char3.png'), url('explosion.png'); 
        background-size: auto, 50%, 0%;
     }
     100%   { 
        background-image: url('writing.png'), url('char3.png'), url('explosion.png'); 
        background-size: auto, 50%, 0%;
     }
}

/* char4 */

@keyframes nofade4 {
     0%   { 
        background-image: url('writing.png'), url('char4.png'), url('explosion.png'); 
        background-size: auto, 50%, 0%;
     }
     100%   { 
        background-image: url('writing.png'), url('char4.png'), url('explosion.png'); 
        background-size: auto, 50%, 0%;
     }
}


/* char5 */

@keyframes nofade5 {
     0%   { 
        background-image: url('writing.png'), url('char5.png'); 
        background-size: auto, 50%;
     }
     100%   { 
        background-image: url('writing.png'), url('char5.png'); 
        background-size: auto, 50%;
     }
}


li:nth-of-type(odd) {
    transform: skew(2deg, -1deg);
}   

li:nth-of-type(even) {
    transform: skew(-2deg, 1deg);  
}   

li:nth-of-type(odd):hover {
    transform: skew(-2deg, 1deg);
    cursor: pointer;
}   

li:nth-of-type(even):hover {
    transform: skew(2deg, -1deg);  
    cursor: pointer;
}   


li.type1:nth-of-type(odd) {
    animation: crossfade1 1s steps(1, end) infinite;
}   

li.type1:nth-of-type(even) {
    animation: crossfade1b 1s steps(1, end) infinite;
}   

li.type2:nth-of-type(odd) {
    animation: crossfade2 1s steps(1, end) infinite;
}   

li.type2:nth-of-type(even) {
    animation: crossfade2b 1s steps(1, end) infinite;
}   

li.type3:nth-of-type(odd) {
    animation: nofade3 1s steps(1, end) infinite;
}   

li.type3:nth-of-type(even) {
    animation: nofade3 1s steps(1, end) infinite;
}   

li.type4:nth-of-type(odd) {
    animation: nofade4 1s steps(1, end) infinite;
}   

li.type4:nth-of-type(even) {
    animation: nofade4 1s steps(1, end) infinite;
}   

li.type5:nth-of-type(odd) {
    animation: nofade5 1s steps(1, end) infinite;
}   

li.type5:nth-of-type(even) {
    animation: nofade5 1s steps(1, end) infinite;
}   

li.type1 {
    background-color: red;
}
li.type2 {
    background-color: rgb(0, 68, 255);
    background-position: 18px 55px, 23px 7px;
}
li.type3 {
    background-color: green;
    background-position: 18px 55px, 23px 7px;
}
li.type4 {
    background-color: orange;
    background-position: 18px 55px, 23px 7px;
}
li.type5 {
    background-color: purple;
    background-position: 18px 55px, 23px 7px;
}