保持旋轉的CSS動畫水平

我有這樣的：保持旋轉的CSS動畫水平

div { 
 
\t position: relative; 
 
\t width: 20px; 
 
\t height: 100px; 
 
\t border-radius: 10px; 
 
\t background: green; 
 
\t margin: 0 auto; 
 
\t transform-origin: 10px 10px; 
 
\t animation: rotate 1s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes rotate { 
 
\t from {transform: rotate(-30deg);} 
 
\t to {transform: rotate(30deg);} 
 
} 
 

 
hr { 
 
\t position: relative; 
 
\t top: -10px; 
 
}

<div></div> 
 
<hr>

但我想是這樣的：

div { 
 
\t position: relative; 
 
\t width: 20px; 
 
\t height: 100px; 
 
\t border-radius: 10px; 
 
\t background: green; 
 
\t margin: 0 auto; 
 
\t transform-origin: 10px 10px; 
 
\t animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes rotate { 
 
\t from {transform: rotate(-30deg);} 
 
\t to {transform: rotate(30deg);} 
 
} 
 

 
@keyframes translate { 
 
\t from {top: 10px;} 
 
\t to {top: 0px;} 
 
} 
 

 
hr { 
 
\t position: relative; 
 
\t top: -10px; 
 
}

<div></div> 
 
<hr>

編輯：我可能沒不解釋這個w夠了。我的意思是，有沒有辦法讓div的底部觸摸這條線，無需使用任何動畫來上下移動呢？我希望它是動態的，所以如果我改變旋轉的值，我將不必計算和改變翻譯的值。

編輯2：簡單地說：我只想讓div做第二個例子，而不需要垂直移動的特定值。

來源

2017-01-02 coonycoon

做什麼沒有呢？我不確定你是什麼意思。 –

你可以同時動畫它的長度嗎？ – ceejayoz

https://jsfiddle.net/uooczh9p/ –

你應該發揮價值得到它完美的，但是這是想法：

div { 
 
\t position: relative; 
 
\t width: 20px; 
 
\t height: 100px; 
 
\t border-radius: 10px; 
 
\t background: green; 
 
\t margin: 0 auto; 
 
\t transform-origin: 10px 10px; 
 
\t animation: rotate 1s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes rotate { 
 
\t 0% {transform: rotate(-30deg); top: 10px;} 
 
\t 50% {top: 0px;} 
 
\t 100% {transform: rotate(30deg); top: 10px;} 
 
} 
 

 
hr { 
 
\t position: relative; 
 
\t top: -10px; 
 
}

<div></div> 
 
<hr>

來源

2017-01-02 23:33:54 MaanooAk

50％你不需要設置旋轉值 –

實際上你需要它，因爲插值如果你刪除它會改變... – MaanooAk

...你實際上需要改變在50％的旋轉'動畫定時功能' – MaanooAk

我不知道，這是你能指望什麼，但我會給它一試。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    width: 20px; 
 
    height: 100px; 
 
    border-radius: 10px; 
 
    background: green; 
 
    margin: 0 auto; 
 
    transform-origin: 10px 10px; 
 
    animation: rotate 1s ease-in-out infinite alternate, stretch 1s ease-in-out infinite; 
 
} 
 

 
hr { 
 
    position: absolute; 
 
    top: 99px; 
 
    width: 99%; 
 
} 
 

 
@keyframes rotate { 
 
    from { 
 
    transform: rotate(-30deg); 
 
    } 
 
    to { 
 
    transform: rotate(30deg); 
 
    } 
 
} 
 

 
@keyframes stretch { 
 
    0% { 
 
    height: 112px; 
 
    } 
 
    50% { 
 
    height: 100px; 
 
    } 
 
    100% { 
 
    height: 112px; 
 
    } 
 
}

<div></div> 
 
<hr>

來源

2017-01-03 00:12:33

保持旋轉的CSS動畫水平

回答

相關問題