animation + @keyframes. Como interagir e mudar a execução?

Tenho o seguinte trecho de código:

	#anima {

	        width:600px;

	        height:300px;

	        margin:auto;

	        

	        animation: banner 10s infinite;

	    }

	 

	@keyframes banner {

	        0%, 33% {

	                background:#009;

	            }

	        34%, 66% {

	                background:#C00;

	            }

	        67%, 100% {

	                background:#390;

	            }

	    }

	 

	No HTML tenho uma div com id=anima.

	Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.

	 

	O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.

	 

	Botão1 - pula para-> 0%, 33% { background:#009; }

	Botão2 - pula para-> 34%, 66% { background:#C00; }

	Botão3 - pula para-> 67%, 100% { background:#390; }

	 

	Como?