如何设置Font Awesome翻转动画从75%进度位置启动？

首先，你的核心需求是让绿色解锁图标的动画仅跟随红色锁图标动画的最后四分之一段运行，本质上是要精准控制解锁图标的动画启动时机和时长。下面给你两种可行的方案，从快速适配到自定义程度更高的实现都有：

方案一：复用Font Awesome动画，通过延迟控制启动时机 #

Font Awesome的fa-flip本质是CSS动画，我们可以通过调整animation-delay和animation-duration的配合，让解锁图标刚好在锁图标动画进行到75%时开始运行：

修改后的完整代码 #

<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>
/* 自定义解锁图标的动画参数 */
.unlock-delayed-flip {
  animation: flip 1.25s 3.75s 1 forwards;
}
</style>

<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="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>

<script>
$('.lock').click(function () { 
    // 给锁图标添加完整的翻转动画
    $('.fa-lock', this).addClass('fa-flip'); 
    // 给解锁图标添加延迟启动的翻转动画
    $('.fa-unlock', this).addClass('unlock-delayed-flip'); 

    // 同步调整颜色显示时机，和动画延迟保持一致
    setTimeout(function () { 
        $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)'); 
        $('.fa-unlock').css('color', 'green'); 
    }, 3750); // 5000ms * 75% = 3750ms，刚好对应锁动画的75%进度
});
</script>

原理拆解 #

• 红色锁图标的动画时长是5s，我们把解锁图标的动画时长设为1.25s（5s的1/4），延迟设为3.75s（5s减去1.25s），这样解锁图标刚好在锁动画走到75%时开始翻转，完美匹配最后四分之一的动画节奏。
• 颜色切换的定时器也同步调整为3750ms，保证视觉上颜色变化和动画启动完全同步。

方案二：完全自定义CSS动画（脱离Font Awesome自带动画） #

如果你想更灵活控制动画的每一个细节，比如旋转角度、颜色过渡的平滑度，完全可以自定义关键帧动画，不需要依赖Font Awesome的预设动画：

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>

<style>
/* 锁图标的完整动画：前75%翻转，最后25%隐藏 */
@keyframes complete-lock-flip {
  0% { transform: rotateY(0); color: red; }
  75% { transform: rotateY(180deg); color: red; }
  100% { transform: rotateY(180deg); color: rgba(0,0,0,0); }
}

/* 解锁图标的后半段动画：从隐藏状态翻转显示 */
@keyframes delayed-unlock-flip {
  0% { transform: rotateY(180deg); color: rgba(0,0,0,0); }
  100% { transform: rotateY(0); color: green; }
}

.lock-active {
  animation: complete-lock-flip 5s 1 forwards;
}

.unlock-active {
  animation: delayed-unlock-flip 1.25s 3.75s 1 forwards;
}
</style>

<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x"></i>
  <i class="fas fa-lock fa-stack-1x"></i>
</div>

<script>
$('.lock').click(function () { 
    // 触发两个图标的自定义动画
    $('.fa-lock', this).addClass('lock-active'); 
    $('.fa-unlock', this).addClass('unlock-active'); 
});
</script>

优势说明 #

• 把颜色变化和翻转动画整合到同一个关键帧里，不需要额外的定时器，代码更简洁，视觉同步性也更好。
• 可以自由修改关键帧的百分比和属性值，比如调整翻转的角度、颜色过渡的快慢，完全满足个性化需求。

总结 #

方案一适合快速修改，复用Font Awesome的现成动画，代码改动小；方案二更适合需要精细控制动画细节的场景，扩展性更强。两种方案都能完美实现你要的“解锁图标动画从75%进度启动”的效果，你可以根据实际需求选择。

内容的提问来源于stack exchange，提问作者Three Year Old