我為我設計的后退按鈕設定了一個 3 字形影片序列。影片完全按照我想要的方式在懸停時觸發，但是當我將滑鼠懸停在按鈕上時，它不尊重ease-out影片屬性的一部分。我知道，通常使用 CSS 影片，您可以通過將影片放在實際元素而不是:hover狀態上來解決此問題，但問題是關鍵幀影片在頁面加載時觸發并且在:hover. 是否有我可以使用的滑鼠懸停或懸停狀態，以便當用戶離開按鈕時影片緩和甚至反轉？我嘗試添加animation-direction: reverse;屬性到基本元素，但沒有做任何事情，可能是因為它不知道我指的是什么影片，因為由于上述原因它不存在于基本元素中。我是否可能需要一些 CSS 或 javascript 來防止影片在:hover狀態實際發生之前觸發，然后我可以將影片放置在基本元素而不是:hover狀態中？
https://jsfiddle.net/astombaugh/L7k1r63f/54/
<body style="background-color: #214365">
<div class="backBtn">
<div class="chevronContainer">
<div class="backBtnChevronTop"></div>
<div class="backBtnChevronMid"></div>
<div class="backBtnChevronFar"></div>
</div>
Back
</div>
</body>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
.backBtn {
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
position: absolute;
left: 4rem;
font-weight: 700;
width: auto;
height: auto;
color: white;
background-color: transparent;
padding: 0.2rem 0em 0.1rem 0em;
margin: 0rem 0rem 0rem 0rem;
text-align: center;
text-decoration: none;
font-size: 1.6em;
word-spacing: normal;
cursor: pointer;
}
.chevronContainer {
display: inline-block;
position: relative;
transform: translateY(-1.3rem) translateX(-1rem);
}
.backBtnChevronTop {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 1;
height: 1.33rem;
width: 1.33rem;
}
.backBtnChevronMid {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtnChevronFar {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtn:hover .backBtnChevronMid {
animation: animateChevronMid 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn:hover .backBtnChevronFar {
animation: animateChevronFar 0.6s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes animateChevronTop {
0% {
transform: translateX(0rem);
opacity: 0;
}
70%,
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes animateChevronMid {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-0.7rem);
opacity: 1;
}
}
@keyframes animateChevronFar {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-1.4rem);
opacity: 1;
}
}
uj5u.com熱心網友回復：
您可以通過在當前沒有懸停時在元素上添加過渡并稍微調整關鍵幀來解決此問題。像這樣：
.backBtn .backBtnChevronMid {
animation: animateChevronMid2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn .backBtnChevronFar {
animation: animateChevronFar2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes animateChevronMid2 {
0% {
transform: translateX(-0.7rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
@keyframes animateChevronFar2 {
0% {
transform: translateX(-1.4rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
這個額外的關鍵幀與您所做的關鍵幀完全相反。當您將游標從元素上移動時，它們確實適用（可以說是懸停）。
uj5u.com熱心網友回復：
杰克是對的，并擊敗了我。
您可以使用它，并為后退按鈕本身添加一個淡入淡出過渡。這很hacky，但把它放在后退按鈕上：
animation: fadeIn 0.6s ease-in-out;
并相應地調整影片。它會運行一次。如果您不想要淡入淡出，只需將“停止”移動到接近末尾，這將控制保存其他影片的容器，因此您的整個效果在加載之前不會顯示：
@keyframes fadeIn {
0% {opacity:0;}
95% {opacity: 0}
100% {opacity:1;}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/449631.html
標籤：javascript html css 动画