@keyframesアニメーション（回転）と：ホバー（スケール）

@keyframesに基づいてcombinig CSSアニメーションに問題があります：回転効果：ホバー効果（スケール） - 誰かの助けが必要です。 'm新人 - それは明らかです）。@keyframesアニメーション（回転）と：ホバー（スケール）

アニメーション背景を作成したいと思います。
1.小さな記号/文字/アイコン（何でも）が動いています（そのうちのいくつかは回転しています。 Y軸）
2：ホバーするとき：彼らはまた成長している（しかし、まだ動いている）。
最後に：
3. @keyframeアニメーションを一時停止することはありません。

すぐに私はこのコードを思いついたhttps://jsfiddle.net/56q4b9fg/2/問題は、ホバリングで私の基本的なアニメーションがトラックを続けるのではなく、最初から始まることです。これをどうすれば解決できますか？そして、すべてのシーケンスの後に私の第3の問題を一時停止で解決する方法は？

.pattern { 
    height: 100vh; 
    width: 100vw; 
    margin: 0 auto; 
    background-color: rgb(170, 57, 57); 
    color: rgb(255,255,255); 
} 

.grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(8, 1fr); 
    justify-items: center; 
    align-items: center; 
    overflow: hidden; 
} 

.symbol-1 { 
    grid-area: 2/2/2/2; 
    justify-self: center; 
} 

.symbol-2 { 
    grid-area: 4/3/3/5; 
    justify-self: center; 
    align-self: start; 
} 

.downRight { 
    animation: downRight 7s infinite; 
} 

.downRight:hover { 
    animation: downRightAndScale 7s infinite; 
} 

.spin { 
    animation: spin 7s infinite; 
} 

.spin:hover { 
    animation: spinAndScale 7s infinite; 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

@keyframes downRight { 
    0%, 100% { transform: translateX(0) translateY(0); } 
    50% { transform: translateX(20px) translateY(20px); } 
} 

@keyframes spinAndScale { 
    0% { transform: rotate(0deg) scale(1.0); } 
    10% { transform: rotate(10deg) scale(1.1); } 
    50% { transform: rotate(180deg) scale(1.5); } 
    100% { transform: rotate(360deg) scale(1.0); } 
} 

@keyframes downRightAndScale { 
    0%, 100% { transform: translateX(0) translateY(0) scale(1.0);} 
    50% { transform: translateX(20px) translateY(20px) scale(1.5);} 
}

出典

2017-11-11 mery_b

最も簡単な解決策は、他の要素でsymbol-1とsymbol-2をラップし、ホバリング時に、この要素を変換することです。また、トランジションを使用してアニメートします。下に挿入されたスニペットを見てください。

.pattern { 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
\t margin: 0 auto; 
 
    background-color: rgb(170, 57, 57); 
 
    color: rgb(255,255,255); 
 
} 
 

 
.grid { 
 
\t display: grid; 
 
\t grid-template-columns: repeat(12, 1fr); 
 
\t grid-template-rows: repeat(8, 1fr); 
 
\t justify-items: center; 
 
\t align-items: center; 
 
\t overflow: hidden; 
 
} 
 

 
.symbol { 
 
\t -webkit-transition: all 1000ms ease; 
 
\t -moz-transition: all 1000ms ease; 
 
\t -o-transition: all 1000ms ease; 
 
\t transition: all 1000ms ease; 
 
    transform: scale(0.5); 
 
    font-size: 2em 
 
} 
 

 
.symbol:hover { 
 
    transform: scale(1); 
 
} 
 

 
.symbol-1 { 
 
\t grid-area: 2/2/2/2; 
 
\t justify-self: center; 
 
} 
 

 
.symbol-2 { 
 
\t grid-area: 4/3/3/5; 
 
\t justify-self: center; 
 
\t align-self: start; 
 
} 
 

 
.downRight { 
 
\t animation: downRight 7s infinite; 
 
} 
 

 
.spin { 
 
\t animation: spin 7s infinite; 
 
} 
 

 
@keyframes spin { 
 
\t 0% { transform: rotate(0deg); } 
 
\t 100% { transform: rotate(360deg); } 
 
} 
 

 
@keyframes downRight { 
 
\t 0%, 100% { transform: translateX(0) translateY(0); } 
 
\t 50% { transform: translateX(20px) translateY(20px); } 
 
}

<body> 
 
    <div class="pattern grid"> 
 
    <!-- Wrap the symbols in a div with class "symbol" that scales on hover --> 
 
    \t <div class="symbol symbol-1"><div class="downRight"> \t 1 \t </div></div> 
 
    <div class="symbol symbol-2"><div class="spin"> \t 2 \t </div></div> 
 
    </div> 
 
</body>

私は、これはあなたの問題を解決し、信頼:)

出典

2017-11-12 14:38:25 Evochrome

こんにちは（私は偶然私の最後のコメントを削除したと思う - 偉大な...）。あなたのソリューションは、スケール（問題ありがとう！）で私の問題を解決しましたが、CSSグリッドの位置決めはどうですか？私はまた、.symbolにグリッドを追加しようとしましたが、正方形に戻ってきました：ホバーが動作していません...これをどのように組み合わせることができますか：cssで配置されたアニメーション要素グリッド：ホバー？ –

残念ですが、クラス 'symbol-1'と' symbol-2'を親要素に入れ替えてください。更新されたスニペットを確認してください。また、私の答えがあなたの問題を解決した場合は、それを正しい答えとしてマークしてください、ありがとう！ :) – Evochrome

ありがとう！すべてが完璧に動作します:) –

@keyframesアニメーション（回転）と：ホバー（スケール）

答えて

関連する問題