如何在某个点（75%）开始动画？

Question

我接受了这个问题。 到目前为止我所拥有的：

 $('.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>

但是只有绿色解锁图标动画的最后四分之一应该遵循可见的红色锁定图标动画。 如何以 75% 开始动画？

或者你会以不同的方式做这一切吗？ 也许没有 Font Awesome 的动画功能？

Answer 1

您需要覆盖 .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>

我希望这就是你想要的。