Chain CSS animations with infinite loop

Is it possible to chain two animations and then loop this chain indefinitely? {|--ani1--|--ani1--|--ani1--|--ani2--|--ani2--|} x loop

div {
    width: 50px; height: 50px; border: 3px solid black;
    animation: ani1 3s 0s 3, ani2 3s 9s 2;
    /*animation-iteration-count: infinite;*/
}
@keyframes ani1 {
    from { background: green; }
    50% { background: red; }
    to { background: green; }    
}
@keyframes ani2 {
    from { width: 100px; }
    50% { width: 150px; }
    to { width: 100px; }    
}

tested here: http://jsfiddle.net/kQA6D/