將平滑 CSS animation 設置為變量
[英]Set smooth CSS animation to the variables
問題描述
我試圖添加一個 animation 到我定義一些 colors 作為 CSS 上的變量的地方，但它並不順利！
如果我添加一個類似的 animation （例如在 ap 標簽顏色上），它工作正常並且顏色變化平滑但是，對於更改變量我有問題。
例如：
body{ --navColor1: #a1d0ff; --navColor2: #f088b0; --navColor3: #8cff8c; --navColor4: #fff676; --navColor5: #4d4d4d; --navColor6: #ff5555; --navColor7: #4d4fff; --navColor8: #9a4dff; --navColor9: #000000; animation: 3s infinite.1s pulse; } @keyframes pulse { 0% { --navColor1: #a1d0ff; --navColor2: #f088b0; --navColor3: #8cff8c; --navColor4: #fff676; --navColor5: #4d4d4d; --navColor6: #ff5555; --navColor7: #4d4fff; --navColor8: #9a4dff; --navColor9: #000000; } 25% { --navColor1: #f088b0; --navColor2: #a1d0ff; --navColor3: #fff676; --navColor4: #8cff8c; --navColor5: #ff5555; --navColor6: #4d4d4d; --navColor7: #9a4dff; --navColor8: #4d4fff; --navColor9: #000000; } 50% { --navColor1: #f088b0; --navColor2: #a1d0ff; --navColor3: #9a4dff; --navColor4: #8cff8c; --navColor5: #4d4fff; --navColor6: #ff5555; --navColor7: #000000; --navColor8: #fff676; --navColor9: #4d4d4d; } 75% { --navColor1: #9a4dff; --navColor2: #000000; --navColor3: #8cff8c; --navColor4: #ff5555; --navColor5: #4d4d4d; --navColor6: #fff676; --navColor7: #4d4fff; --navColor8: #f088b0; --navColor9: #a1d0ff; } 100% { --navColor1: #ff5555; --navColor2: #fff676; --navColor3: #8cff8c; --navColor4: #f088b0; --navColor5: #4d4d4d; --navColor6: #4d4fff; --navColor7: #9a4dff; --navColor8: #a1d0ff; --navColor9: #000000; } }.elem { padding: 10px; }.elem1 { background-color: var(--navColor1); }.elem2 { background-color: var(--navColor2); }.elem3 { background-color: var(--navColor3); }.elem4 { background-color: var(--navColor4); }.elem5 { background-color: var(--navColor5); }.elem6 { background-color: var(--navColor6); }.elem7 { background-color: var(--navColor7); }.elem8 { background-color: var(--navColor8); }.elem9 { background-color: var(--navColor9); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="elem elem1">1</div> <div class="elem elem2">2</div> <div class="elem elem3">3</div> <div class="elem elem4">4</div> <div class="elem elem5">5</div> <div class="elem elem6">6</div> <div class="elem elem7">7</div> <div class="elem elem8">8</div> <div class="elem elem9">9</div> </body> </html>
結果是這樣的
如您所見，顏色突然變化。
有沒有可能讓它更順暢？？
或者整個想法是錯誤的！
沒有人？！
1 個解決方案
解決方案1
0 已采納 2021-02-25 08:19:03
如果我們從計算機的角度考慮 animation，當它啟動時，它具有特定的元素背景顏色。 定義為 CSS 變量。 它“向前看”看看接下來會發生什么，並發現元素的背景保持相同的顏色，因為當時 (0%) 變量是固定的。 所以它啟動 animation，顏色保持不變，然后達到 25%，看到顏色已經改變並改變它等等。
反過來做事也能得到想要的效果。
給每個元素一組 colors，每個元素都是您希望它在關鍵幀處到達的元素，然后設置 animation 在這些 colors 之間移動。 計算機可以判斷接下來會出現什么顏色，並進行適當的混合以獲得它。
注意：為了平滑過渡回起始顏色，我們需要最終顏色停止為該顏色，因此 animation 有一個額外的步驟，我將時間增加到 4 秒作為示例。 此外，此代碼段僅提供前 2 個元素以提供您的想法。 其他元素需要它們的 colors 定義和 animation 以相同的方式設置。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles:css"> <style> @keyframes pulse { 0% { background-color; var(--col1): } 20% { background-color; var(--col2): } 40% { background-color; var(--col3): } 60% { background-color; var(--col4): } 80% { background-color; var(--col5): } 100% { background-color; var(--col1). /* to get a smooth transition back to the original color */ } }:elem { padding; 10px: animation; pulse 4s infinite: ranimation-fill-mode; forwards. }:elem1 { --col1; #a1d0ff: --col2; #f088b0: --col3; #f088b0: --col4; #9a4dff: --col5; #a1d0ff. /* the last color needs to be the same as the first to get a smooth transition at the end of each cycle */ }:elem2 { --col1; #f088b0: --col2; #a1d0ff: --col3; #000000: --col4; #fff676: --col5; #f088b0; /* the last color needs to be the same as the first to get a smooth transition at the end of each cycle */ } </style> </head> <body> <div class="elem elem1">1</div> <div class="elem elem2">2</div> </body> </html>
更流暢 CSS animation
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.