在CSS動畫中獲取意外動作

我創建了一些動畫，並將它們應用於使用javascript的div。基本上，我正在做的是使卡片旋轉和translateX懸停和回來。當我試圖恢復時，其中2個div在動畫之前首先無意中移動。在CSS動畫中獲取意外動作

是的，我知道我的代碼可以壓縮，但我剛剛創建了一個草稿動畫。

HTML

<head> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
    <script src="index.js"></script> 
</head> 

<body> 
    <div class="container" style="position:absolute; left:40%; top:20%;"> 
    <div class="card" id="c1"><p>Anti-Social</p> 
     <h5 id="stud">STUDIOS</h5> 
    </div> 
    <div class="card" id="c2"></div> 
    <div class="card" id="c3"></div> 
    </div> 
</body>

CSS

*{ 
    margin: 0; 
    padding: 0; 
} 
#stud{ 
    color: #3F3F3F; 
    opacity:0; 
} 

@keyframes fadein { 
    from { opacity: 0;} 
    to { opacity: 1;} 
} 

@keyframes fadeout { 
    from { opacity: 1;} 
    to { opacity: 0;} 
} 

body{ 
    background-color: #1E2226; 
} 

.card{ 
    width: 250px; 
    height: 300px; 
    display:flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
    align-items: center; 
    color: #0F0F0F; 
    font-size: 200%; 
} 

#c1{ 
    background-color: rgba(242, 242, 242, 1); 
    z-index: 3; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#c2{ 
    background-color: rgba(242,242,242, 0.6); 
    z-index: 2; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#c3{ 
    background-color: rgba(242,242,242, 0.3); 
    z-index: 1; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

@keyframes inright { 
    0%{transform: rotate(0deg) translateX(0%);} 
    100%{transform: rotate(15deg) translateX(10%);} 
} 

@keyframes inleft { 
    0%{transform: rotate(0deg) translateX(0%);} 
    100%{transform: rotate(-15deg) translateX(-10%);} 
} 

@keyframes outright { 
    0%{transform: translateX(10%) rotate(15deg);} 
    100%{transform: translateX(0%) rotate(0deg);} 
} 

@keyframes outleft { 
    0%{transform: translateX(-10%) rotate(-15deg);} 
    100%{transform: translateX(0%) rotate(0deg);} 
}

見這裏的問題當你從卡刪除光標： Codepen：https://codepen.io/iamshivam/pen/mwLZRq

來源

2017-07-08 Shivam Dhawan

的transform S IN的關鍵幀其實事情的順序，是指CSS3 transform order matters: rightmost operation first

如果你這樣做的所有關鍵幀，改變

@keyframes outleft { 
    0%{transform: translateX(-10%) rotate(-15deg);} 
    100%{transform: translateX(0%) rotate(0deg);} 
}

到

@keyframes outleft { 
    0%{transform: rotate(-15deg) translateX(-10%);} 
    100%{transform: rotate(0deg) translateX(0%);} 
}

會工作。

來源

2017-07-08 18:55:52 Cynigo

感謝隊友..工作就像一個魅力。 –

在CSS動畫中獲取意外動作

回答

相關問題