@keyframes  bounce 
{
    from {
      top: 100px;
      animation-timing-function: ease-out;
    }

    25% {
      top: 50px;
      animation-timing-function: ease-in;
    }

    50% {
      top: 100px;
      animation-timing-function: ease-out;
    }

    75% {
      top: 75px;
      animation-timing-function: ease-in;
    }

    to {
      top: 100px;
    }

}


div {
    animation-name:             'diagonal-slide';
    animation-duration:         5s;
    animation-iteration-count:  10;
}

@keyframes 'diagonal-slide' 
{
    from 
    {
        left: 0;
        top: 0;
    }

    to 
    {
        left: 100px;
        top: 100px;
    }
}