我應該如何在不一致的應用程序中進行這種CSS轉換？

我想做一個css過渡，我看到在不和諧的應用程序，有兩個正方形縮放，旋轉和翻譯在順時針方向方向。我應該如何在不一致的應用程序中進行這種CSS轉換？

最初，它們位於對角位置。

下面是我的嘗試，但我沒有把它說得很對。

.box { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10%; 
 
} 
 

 
.box1, 
 
.box2 { 
 
    height: 20px; 
 
    width: 20px; 
 
    background: red; 
 
} 
 

 
.box1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    animation: move 4s infinite ease-in-out; 
 
} 
 

 
.box2 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    animation: move 4s infinite ease-in-out; 
 
    animation-delay: 1s; 
 
} 
 

 
@keyframes move { 
 
    25% { 
 
    transform: translateX(100px) rotate(90deg) scale(0.5) 
 
    } 
 
    50% { 
 
    transform: translateX(100px) translateY(100px) rotate(180deg) scale(1) 
 
    } 
 
    75% { 
 
    transform: translateX(0px) translateY(100px) rotate(270deg) scale(0.5) 
 
    } 
 
    100% { 
 
    transform: rotate(360deg) scale(1) 
 
    } 
 
}

<div class="box"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
</div>

來源

2017-10-21 bhansa

我這是怎麼實現的呢，幸好有一個工作版本here

.box { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10%; 
 
} 
 

 
.box1, 
 
.box2 { 
 
    height: 20px; 
 
    width: 20px; 
 
    background: red; 
 
} 
 

 
.box1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    animation: move 2s infinite ease-in-out; 
 
} 
 

 
.box2 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    animation: move 2s infinite ease-in-out; 
 
    animation-delay: 1s; 
 
} 
 

 
@keyframes move { 
 
    25% {transform: translateX(42px) rotate(-90deg) scale(0.5) } 
 
    50% {transform: translateX(42px) translateY(42px) rotate(-180deg) } 
 
    75% {transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 
 
    100% {transform: rotate(-360deg) } 
 
}

<div class="box"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
</div>

來源

2017-11-06 07:30:39 bhansa

因爲兩個方格應該遵循同樣的路徑，我們可以做的是使用相同的關鍵幀，但力廣場二期給予animation-delay:一個過場動畫開始中途可以做到這一點負值值總動畫時間的一半，在這種情況下爲-2。

.box { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10%; 
 
} 
 

 
.box1, 
 
.box2 { 
 
    height: 20px; 
 
    width: 20px; 
 
    background: red; 
 
} 
 

 
.box1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    animation: move 4s infinite ease-in-out; 
 
} 
 

 
.box2 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    animation: move 4s infinite ease-in-out; 
 
    animation-delay: -2s; 
 
} 
 

 
@keyframes move { 
 
    25% { 
 
    transform: translateX(100px) rotate(90deg) scale(0.5) 
 
    } 
 
    50% { 
 
    transform: translateX(100px) translateY(100px) rotate(90deg) scale(1) 
 
    } 
 
    75% { 
 
    transform: translateX(0px) translateY(100px) rotate(90deg) scale(0.5) 
 
    } 
 
    100% { 
 
    transform: rotate(90deg) scale(1) 
 
    } 
 
}

<div class="box"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
</div>

來源

2017-10-21 17:29:54 Dale

謝謝您的回答，我添加了一個動畫延遲堂妹兩者都有順時針方向。這就是我對兩者都使用相同的動畫的方式。 – bhansa

@bhansa我編輯了我的答案，因此兩個動畫都可以使用相同的關鍵幀。 – Dale

我應該如何在不一致的應用程序中進行這種CSS轉換？

回答

相關問題