我应该如何在不一致的应用程序中进行这种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>
答
我这是怎么实现的呢,幸好有一个工作版本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>
答
因为两个方格应该遵循同样的路径,我们可以做的是使用相同的关键帧,但力广场二期给予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>
谢谢您的回答,我添加了一个动画延迟堂妹两者都有顺时针方向。这就是我对两者都使用相同的动画的方式。 – bhansa
@bhansa我编辑了我的答案,因此两个动画都可以使用相同的关键帧。 – Dale