保持旋转的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动画水平

回答

相关问题