为li列表项添加display: inline-block时出现重复动画异常故障

这个动画重复触发的问题本质是inline-block元素触发了二次重排，导致绑定的动画被重新执行了，具体诱因有两个：

• 浏览器渲染inline-block元素时，会把多个li标签之间的换行、空格识别为空白文本节点，占用额外宽度。页面首次加载时会先按无空白的情况计算一次布局，识别到空白节点后再触发一次重排，两次布局变化导致动画被触发两次
• 你的.title类同时定义了两个冲突的width属性，先写width:100%后写width:75%，还设置了固定的margin-right:20em，会拉长整体布局的计算耗时，进一步加重重排异常的问题

你可以任选下面一种方案适配：

1. 解决inline-block空白间隙问题：给li的父容器（ul）添加font-size: 0;属性，然后单独给li设置需要的字号，就能消除空白节点的影响，避免二次重排
2. 清理CSS冗余属性：删掉.title类里没用的width:100%声明，减少布局计算冲突
3. 显式限制动画执行次数：给li.services的动画配置加animation-iteration-count: 1;，强制动画只执行一次
4. 替换布局方案：如果不需要兼容特别旧的浏览器，可以直接把li的display: inline-block删掉，给父ul加display: flex; flex-wrap: wrap;，完全避开inline-block的布局缺陷，排列效果和之前一致

故障效果参考：

/* 给li父容器添加的样式 */
ul.你的ul类名 {
  font-size: 0; /* 用flex布局方案可以不加这条 */
  display: flex;
  flex-wrap: wrap;
}
li.services {
    list-style: none;
    cursor: pointer;
    margin: 1em 2em;
    /* display: inline-block; 用flex布局就注释掉这条 */
    font-size: 1rem; /* 父容器设了font-size:0的话要单独指定字号 */
    vertical-align: middle;
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s both;
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s both;
    animation-iteration-count: 1; /* 强制动画仅执行一次 */
}
.title {
    font-size: 2rem;
    text-align: left;
    margin: 0 auto;
    color: #fff;
    width: 75%; /* 已删除重复无效的width:100%声明 */
    margin-right: 20em;
    display: inline-block;
    span {
        display: block;
    }
    @media(max-width: 1440px) {
        font-size: 1.5rem;
    }
}

内容的提问来源于stack exchange，提问作者JustAsking