悬停后反转 CSS 转换

Question

我做了这个简单的 animation。但是当我“取消悬停”时，转换后的跨度就会“消失”。 有什么简单的方法可以将跨度向后滑动，又名。 取消悬停后反转过渡。 或者如果需要任何复杂的方式？ 如果可能的话，如果解决方案只有 CSS 就好了。 提前致谢！

 #container { display: flex; justify-content: center; align-items: center; flex-direction: column; } #wrapper { position: relative; font-family: 'Courier New', Courier, monospace; } #wrapper h2 { font-size: 8rem; margin: 0px; } #wrapper:hover span:first-of-type { visibility: visible; transform: translate(0%, 0%); } #wrapper:hover span:last-of-type { transform: translate(0%, 0%); visibility: visible; } #wrapper span { font-size: 8rem; font-weight: bold; transition: transform 1s; } #wrapper span:first-of-type { position: absolute; top: 0%; left: 0%; z-index: 1; transform: translate(-10%, -100%); visibility: hidden; background: linear-gradient(45deg, #00ff00, #00ff80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #wrapper span:last-of-type { position: absolute; top: 0%; left: 50%; z-index: 1; transform: translate(10%, 100%); visibility: hidden; background: linear-gradient(45deg, #00ff80, aqua); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

 <div id="container"> <div id="wrapper"> <h2>Hi</h2> <span>H</span> <span>i</span> </div> </div>

Answer 1

因为visibilty不能平滑动画，所以建议使用 visibility 的可缩放值 animation 例如opacity 。

 #container { display: flex; justify-content: center; align-items: center; flex-direction: column; } #wrapper { position: relative; font-family: 'Courier New', Courier, monospace; } #wrapper h2 { font-size: 8rem; margin: 0px; } #wrapper:hover span:first-of-type { opacity: 1; transform: translate(0%, 0%); } #wrapper:hover span:last-of-type { transform: translate(0%, 0%); opacity: 1; } #wrapper span { font-size: 8rem; font-weight: bold; transition: transform 1s, opacity 1s; } #wrapper span:first-of-type { position: absolute; top: 0%; left: 0%; z-index: 1; transform: translate(-10%, -100%); opacity: 0; background: linear-gradient(45deg, #00ff00, #00ff80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #wrapper span:last-of-type { position: absolute; top: 0%; left: 50%; z-index: 1; transform: translate(10%, 100%); opacity: 0; background: linear-gradient(45deg, #00ff80, aqua); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

 <div id="container"> <div id="wrapper"> <h2>Hi</h2> <span>H</span> <span>i</span> </div> </div>

但是，如果由于某种原因必须对visibility进行动画处理，则可以将visibility性的animation-timing-function指定到step-end ，使其在最后一刻消失：

#wrapper:not(:hover) span {
  transition: transform 1s, visibility 1s step-end;
}

 #container { display: flex; justify-content: center; align-items: center; flex-direction: column; } #wrapper { position: relative; font-family: 'Courier New', Courier, monospace; } #wrapper h2 { font-size: 8rem; margin: 0px; } #wrapper:hover span:first-of-type { visibility: visible; transform: translate(0%, 0%); } #wrapper:hover span:last-of-type { transform: translate(0%, 0%); visibility: visible; } #wrapper span { font-size: 8rem; font-weight: bold; transition: transform 1s; } #wrapper span:first-of-type { position: absolute; top: 0%; left: 0%; z-index: 1; transform: translate(-10%, -100%); visibility: hidden; background: linear-gradient(45deg, #00ff00, #00ff80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #wrapper span:last-of-type { position: absolute; top: 0%; left: 50%; z-index: 1; transform: translate(10%, 100%); visibility: hidden; background: linear-gradient(45deg, #00ff80, aqua); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* added */ #wrapper:not(:hover) span { transition: transform 1s, visibility 1s step-end; }

 <div id="container"> <div id="wrapper"> <h2>Hi</h2> <span>H</span> <span>i</span> </div> </div>