Retomo esta pregunta . Lo que tengo hasta ahora:
$('.lock').click(function () { $('.fa-lock', this).addClass('fa-flip'); $('.fa-unlock', this).addClass('fa-flip'); setTimeout(function () { $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)'); $('.fa-unlock').css('color', 'green'); }, 1250); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/> <div class="fa-5x fa-stack lock"> <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 5s; --fa-animation-iteration-count: 1; color: rgba(0, 0, 0, 0)"></i> <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 5s; --fa-animation-iteration-count: 1; color: red"></i> </div>Pero solo el último cuarto de la animación del icono de desbloqueo verde debe seguir a la animación del icono de candado rojo visible. ¿Cómo puedo iniciar la animación al 75%?
¿O lo harías todo diferente? ¿Quizás sin las funciones de animación de Font Awesome?
Debe anular la animación .fa-flip:
$('.lock').click(function() { $('.fa-lock', this).addClass('fa-flip'); $('.fa-unlock', this).addClass('fa-flip'); setTimeout(function() { $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)'); $('.fa-unlock').css('color', 'green'); }, 600); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" /> <style> @keyframes halfflip { to { transform: rotateY(360deg); } } .fa-flip { animation-name: halfflip; animation-timing-function: ease-in-out; } </style> <div class="fa-5x fa-stack lock"> <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i> <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i> </div>
Espero que esto sea lo que querías.