Violín: https://jsfiddle.net/7p9uv16b/

Tengo algunos bloques girados con diferentes ángulos al principio. Quiero traducirlos a lo largo del eje rotado, al hacer clic. Pero la animación de traducción restableció el ángulo de rotación. Sé que puedo encadenar la transformación para rotar + traducir, pero necesito varias animaciones para eso (una por bloque). ¿CSS proporciona una forma de mantener el estado actual como referencia para una nueva transformación?

HTML:

 <button type="button" onclick="move()"> Animate blocks </button> <button type="button" onclick="reset()"> Reset </button> <div id="s1" class="square"> </div> <div id="s2" class="square"> </div>

CSS:

 .square{ height: 50px; width: 50px; background-color: #58ACFA; margin: 100px; } .move{ -webkit-animation: move 2s both; animation: move 2s both; } @-webkit-keyframes move { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100px); transform: translateX(100px); } } @keyframes move { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100px); transform: translateX(100px); } }

JavaScript:

 $('#s1').css('transform','rotate(45deg)'); $('#s2').css('transform','rotate(30deg)'); function move(){ $('.square').addClass('move'); } function reset(){ $('.square').removeClass('move'); }