css - 如何在 CSS 转换期间防止文本样式默认值

Question

DEMO HERE

如何防止文本粗细在转换过程中变为粗体？两种方式的最终结果都很好，但在过渡期间，文本变得更粗。元素悬停后，元素会发生这种情况。例如。如果将第二个事件悬停在时间轴上，则第一个事件不会受到影响，但第二个事件本身和第三个事件会受到影响。

HTML

<div class="timeline">
    <ol>
        <li>
            <span class="date">Week 1</span>Event 1
        </li>
        <li>
            <span class="date">Week 2</span>Event 2
        </li>
        <li>
            <span class="date">Week 3</span>Event 3
        </li>
    </ol>
</div>

CSS

ol {
    position: relative;
    display: block;
    margin: 100px;
    margin-top: 150px;
    height: 4px;
    background: #24ad9e;
}
ol::after {
    content: "";
    position: absolute;
    top: -8px;
    display: block;
    width: 0;
    height: 0;
    border-radius: 5px;
    border: 10px solid #24ad9e;
    right: -10px;
    border: 10px solid transparent;
    border-right: 0;
    border-left: 20px solid #24ad9e;
    border-radius: 3px;
}
.timeline ol li {
    position: relative;
    top: -76px;
    left:-50px;
    display: inline-block;
    float: left;
    width: 150px;   
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    font: 14px "Lato" Helvetica Arial;
}
.timeline ol li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -29px;
    display: block;
    width: 6px;
    height: 6px;
    border: 4px solid #24ad9e;
    background: #fff;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.date {
    color: #000;
    display: block; 
    margin-top: -17px;
}

/* Hover effects */

.timeline ol li:hover {
    cursor: pointer;
    color: #28e;
}
.timeline ol li:hover::before {
    /*top: 1px;
    left: -29px;
    width: 6px;
    height: 6px;*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* transitions */
.timeline ol li::before, .timeline ol li:hover::before {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

Answer 1

使用 CSS backface-visibility 属性来解决这个问题。引用这个Link