我应该如何在不一致的应用程序中进行这种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转换？

回答

相关问题