如何使雙向CSS3動畫

Question

目標： 實現動畫

• 上增加了一些類小青轉發應用的初始風格
• 並保持產生於消除觸發類樣式
• 它向後播放並返回初始狀態

我得到了什麼：

@keyframes translate { 
    0% { 
    transform: translate3d(-100%,0,0); 
    } 
    100% { 
    transform: translate3d(0,0,0); 
    } 
} 
.element { 
    animation-direction: reverse; 
    animation-duration: 0.35s; 
    animation-fill-mode: both; 
    animation-name: translate; 
    animation-play-state: running; 
    animation-timing-function: ease-in-out; 
} 
.element.is-animated { 
    animation-direction: normal; 
} 

結果：

它的工作原理如前所述，（保留風格根據需要）除了缺乏平滑動畫的。只需立即切換樣式。我想有一些規則重疊。

有沒有人做過同樣的事情？我還沒有找到任何適當的教程這個特定的問題

Answer 1

如果你打算僅在這兩個轉換屬性之間切換。使用過渡而不是動畫。

.element { 
    transition:transform .2s ease; 
    width:30px; 
    height:30px; 
    border:1px solid red; 
    transform: translate3d(0,0,0); 
} 
    .element.is-animated { 
    transform: translate3d(-100%,0,0); 
    } 

正是你應該添加刪除類的動畫，只要你想過渡