如何防止文本樣式默認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背面-visibility屬性來解決這個問題。請參閱此Link