Css animation random delay

I'm trying to build a webpage for a comic studio and I want one of the characters to come in from the side every so often. So far I have this in the css

        .charc {
            animation:peek 20s infinite;
            left:-500px
        }

        @-webkit-keyframes peek{
            1% {transform:translateX(-500px)}
            10%{transform:translateX(100px)}
            20% {transform:translateX(-200px)}
            100% {transform:translateX(-500px)}
        }

and the html

<img src="character.jpg" class="charc"/>

This means the character comes on over and over again. I don't know whether it is possible to get random figures in CSS but I thought if it is, You guys would know

p.s. I know this will only work in chrome but I will be changing that soon.