#box{
animation:moving-box 20s linear infinite, box-rotation 20s linear infinite;
transform-origin: center;
}
@keyframes box-rotation{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
@keyframes moving-box {
0%{
transform: translateX(-40%);
}
50%{
transform: translateX(40%);
}
100%{
transform: translateX(-40%);
}
}
uj5u.com熱心網友回復：
您必須組合變換，否則一組關鍵幀中的變換集將覆寫另一組關鍵幀中的變換集。
在您的示例中，可以組合這兩個變換并在一組關鍵幀中使用它們：
#box {
animation: moving-box 20s linear infinite;
transform-origin: center;
width: 20vmin;
height: 10vmin;
background-color: red;
}
@keyframes moving-box {
0% {
transform: rotateZ(0deg) translateX(-40%);
}
50% {
transform: rotateZ(180deg) translateX(40%);
}
100% {
transform: rotateZ(360deg) translateX(-40%);
}
}<div id="box"></div>對于更復雜的情況 - 例如不同的時間或不同的緩動函式，必須仔細研究這樣的解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484347.html