使用僞選擇器的關鍵幀動畫

我該如何正確使用僞選擇器動畫div，而不跳出動畫跳過div的主動畫，然後播放分配給僞選擇器的動畫。使用僞選擇器的關鍵幀動畫

有問題的元素是紅圈，只需向上移動（X）量，而不是移回然後向上移動。

我附上了一個小提琴和編碼這個問題。

.blobs { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: white; 
 
    width: 900px; 
 
    height: 200px; 
 
    margin: auto; 
 
} 
 
.blob { 
 
    background: grey; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -50px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    line-height: 70px; 
 
} 
 
@keyframes blob-anim-red { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    100% { 
 
    transform: translateX(100px); 
 
    animation: forwards; 
 
    } 
 
} 
 
@keyframes blob-anim-blue { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    100% { 
 
    transform: translateX(200px); 
 
    } 
 
} 
 
@keyframes blob-anim-green { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    100% { 
 
    transform: translateX(300px); 
 
    } 
 
} 
 
.blob:nth-child(2) { 
 
    animation: blob-anim-red cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate; 
 
    background: rgba(255, 0, 0, .3); 
 
} 
 
@keyframes move-up { 
 
    0% { 
 
    transform: translateY(0px); 
 
    } 
 
    100% { 
 
    transform: translateY(-10px); 
 
    } 
 
} 
 
.blob:nth-child(2):hover { 
 
    /*transform:translateY:(20px);*/ 
 
    animation: move-up cubic-bezier(1, .01, 0, 1) 0.5s alternate; 
 
    transition: transform 0.3s, color 0.3s, background 0.3s; 
 
    color: #fff; 
 
    background: rgba(255, 0, 0, 0.8); 
 
} 
 
.blob:nth-child(3) { 
 
    animation: blob-anim-blue cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate; 
 
    background: rgba(0, 255, 0, .3); 
 
} 
 
.blob:nth-child(4) { 
 
    animation: blob-anim-green cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate; 
 
    background: rgba(0, 0, 255, .3); 
 
} 
 
.blob:first-child { 
 
    background: #ccc; 
 
}

<body> 
 
    <div class="help"></div> 
 
    <div class="blobs"> 
 
    <div class="blob"> 
 
     <p>1st Child</p> 
 
    </div> 
 
    <!-- 1st child--> 
 
    <div class="blob"> 
 
     <p>2nd Child</p> 
 
    </div> 
 
    <!-- 2nd child--> 
 
    <div class="blob"> 
 
     <p>3rd Child</p> 
 
    </div> 
 
    <!-- 3rd child--> 
 
    <div class="blob"> 
 
     <p>4th Child</p> 
 
    </div> 
 
    <!-- 4th child--> 
 
    </div> 
 
</body>

JsFiddle

來源

2015-06-08 RavP

你的動畫，你觸發:hover覆蓋紅圈transform屬性，因此它看起來像整個動畫被重置。一個想法是要克服這個問題，以便使用margin而不是transform: translate，或者只是第二次複製最終轉換屬性。

這是一種方法，使用上正在觸發的動畫的margin屬性。此解決方案使用簡單的transitions而不是動畫。

.blobs { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: white; 
 
    width: 900px; 
 
    height: 200px; 
 
    margin: auto; 
 
} 
 
.blob { 
 
    background: grey; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -50px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    line-height: 70px; 
 
} 
 
@keyframes blob-anim-red { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    100% { 
 
    transform: translateX(100px); 
 
    animation: forwards; 
 
    } 
 
} 
 
@keyframes blob-anim-blue { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    100% { 
 
    transform: translateX(200px); 
 
    } 
 
} 
 
@keyframes blob-anim-green { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    100% { 
 
    transform: translateX(300px); 
 
    } 
 
} 
 
.blob:nth-child(2) { 
 
    animation: blob-anim-red cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate; 
 
    background: rgba(255, 0, 0, .3); 
 
    /*relevant change 1*/ 
 
    transition-property: margin, color; 
 
    transition-duration: 0.3s; 
 
} 
 

 
.blob:nth-child(2):hover { 
 
    /*relevant change 2*/ 
 
    margin-top: -90px; 
 
    color: #fff; 
 
    background: rgba(255, 0, 0, 0.8); 
 
} 
 
.blob:nth-child(3) { 
 
    animation: blob-anim-blue cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate; 
 
    background: rgba(0, 255, 0, .3); 
 
} 
 
.blob:nth-child(4) { 
 
    animation: blob-anim-green cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate; 
 
    background: rgba(0, 0, 255, .3); 
 
} 
 
.blob:first-child { 
 
    background: #ccc; 
 
}

<body> 
 
    <div class="help"></div> 
 
    <div class="blobs"> 
 
    <div class="blob"> 
 
     <p>1st Child</p> 
 
    </div> 
 
    <!-- 1st child--> 
 
    <div class="blob"> 
 
     <p>2nd Child</p> 
 
    </div> 
 
    <!-- 2nd child--> 
 
    <div class="blob"> 
 
     <p>3rd Child</p> 
 
    </div> 
 
    <!-- 3rd child--> 
 
    <div class="blob"> 
 
     <p>4th Child</p> 
 
    </div> 
 
    <!-- 4th child--> 
 
    </div> 
 
</body>

來源

2015-06-08 11:41:39

當然它是如此簡單！ Thankyou爲我解決這個問題：D – RavP

非常歡迎你:)如果這能解決你的問題，你可以激活答案邊上的綠色勾號。祝你有美好的一天。 –

使用僞選擇器的關鍵幀動畫

回答

相關問題