CSSアニメーションの意図しない動きを取得する

私はいくつかのアニメーションを作成し、javascriptを使用してdivに適用しました。基本的に、私がやっていることは、カードを回転させ、ホバー上でXを翻訳して戻すことです。私が取り戻そうとしているとき、divの2つは、最初に意図せずにアニメーション化する前に動きます。CSSアニメーションの意図しない動きを取得する

はい、コードを圧縮することができますが、私はちょうどその瞬間にドラフトアニメーションを作成していました。 Codepen：https://codepen.io/iamshivam/pen/mwLZRq

あなたはカードからカーソルを削除すると

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);} 
}

ここ問題を参照してください。

出典

2017-07-08 Shivam Dhawan

実際に問題のキーフレームでtransform sのオーダー、あなたはすべてのキーフレームのためにこれを行う場合はCSS3 transform order matters: rightmost operation first

を参照してください、

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

に

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

を変更して動作します。

出典

2017-07-08 18:55:52 Cynigo

ありがとうございました..魅力的なように働いていました。 –

CSSアニメーションの意図しない動きを取得する

答えて

関連する問題