@keyframes動畫（旋轉）和：懸停（縮放）

我有一個基於@keyframes（旋轉）與：懸停效果（比例）的combinig css動畫的問題 - 並需要一些更有經驗的人幫助我（我菜鳥 - 這很明顯）。@keyframes動畫（旋轉）和：懸停（縮放）

我想創建某種動畫背景，在哪裏：
1.不與用戶進行任何交互：小符號/字母/圖標（任何）正在（其中一些轉圈，在X的一些移動或Y軸）; 2：懸停時：它們也在增長（但仍在移動）;
最後：
3.沒有暫停beetwen @keyframe動畫。

現在我已經想出了這個代碼https://jsfiddle.net/56q4b9fg/2/問題是，在：懸停我的基本動畫從頭開始，而不是繼續他們的軌道。我怎樣才能解決這個問題？以及如何解決我的第三個問題，每個序列後暫停？

.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動畫（旋轉）和：懸停（縮放）

回答

相關問題