使用 CSS 的过渡动画

Question

我正在尝试在幻灯片放映中实现图像过渡。我有 4 个矩形框适合 div 容器。每个盒子在移动时与另一个盒子相交后需要消失进入另一个盒子区域的部分。在 100% 时，每个框都需要完全消失。

@keyframes testAnimateOne {
    0% {
        transform: rotate(0);
        transform-origin:  bottom right;
        opacity: 1;
    }

    100% {
        transform-origin: bottom right;
        transform: rotate(90deg);
    }       
    
}

@keyframes testAnimateTwo {
    0% {
        transform: rotate(0);
        transform-origin: top right;
        opacity: 1;
    }

    100% {
        transform-origin: top right;
        transform: rotate(-90deg);
    }
    
}

@keyframes testAnimateThree {
    0% {
        transform: rotate(0);
        transform-origin: bottom left;
        opacity: 1;
    }

    100% {
        transform-origin:   bottom left;
        transform: rotate(-90deg);
    }
}

@keyframes testAnimateFour {
    0% {
        transform-origin: top left;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: top left;
        transform: rotate(90deg);
    }
}


.layer1 {
    width:50%;
    height: 43px;
    position: absolute;
    background-color: black;
    animation-name: testAnimateOne;
    animation-duration: 5s;
}

.layer2 {
    margin-top: 30%;
    width: 50%;
    height: 43px;      
    position: absolute;
    background-color:black;
    animation-name: testAnimateTwo;
    animation-duration: 5s;
}

.layer3 {            
    width: 50%;
    height: 50%;
    margin-left: 50%;
    position: absolute;
    background-color: black;
    animation-name: testAnimateThree;
    animation-duration: 5s;
}

.layer4 {
    margin-top: 30%;
    margin-left: 50%;
    width: 50%;
    height: 50%;      
    position: absolute;
    background-color: black;
    animation-name: testAnimateFour;
    animation-duration: 5s;
}

.container {
    width: 140px;
    height: 86px;
    position: relative;
    display: block;
}

<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
  <div class="layer4"></div>
</div>

这怎么可能？请帮忙

Answer 1

您可以在动画结束时完全隐藏图层，方法是将每个图层包装在一个容器中，并为这些容器提供属性overflow: hidden，这样图层就不会从另一侧出现。

确保也将大小和定位规则应用于容器，然后让图层完全填充其容器、颜色和动画。

@keyframes testAnimateOne {
    0% {
        transform: rotate(0);
        transform-origin:  bottom right;
        opacity: 1;
    }

    100% {
        transform-origin: bottom right;
        transform: rotate(90deg);
    }       
    
}

@keyframes testAnimateTwo {
    0% {
        transform: rotate(0);
        transform-origin: top right;
        opacity: 1;
    }

    100% {
        transform-origin: top right;
        transform: rotate(-90deg);
    }
    
}

@keyframes testAnimateThree {
    0% {
        transform: rotate(0);
        transform-origin: bottom left;
        opacity: 1;
    }

    100% {
        transform-origin:   bottom left;
        transform: rotate(-90deg);
    }
}

@keyframes testAnimateFour {
    0% {
        transform-origin: top left;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: top left;
        transform: rotate(90deg);
    }
}

.container {
    width: 140px;
    height: 86px;
    position: relative;
    display: block;
}

.layer {
    width: 100%;
    height: 100%;
    background-color: black;
    animation-duration: 5s;
    animation-fill-mode: both;
}

.layer1-container {
    width: 50%;
    height: 43px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.layer1-container .layer {
    animation-name: testAnimateOne;
}

.layer2-container {
    width: 50%;
    height: 43px;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.layer2-container .layer {
    animation-name: testAnimateTwo;
}

.layer3-container {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}

.layer3-container .layer {
    animation-name: testAnimateThree;
}

.layer4-container {
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

.layer4-container .layer {
    animation-name: testAnimateFour;
}

<div class="container">
  <div class="layer1-container">
    <div class="layer"></div>
  </div>
  <div class="layer2-container">
    <div class="layer"></div>
  </div>
  <div class="layer3-container">
    <div class="layer"></div>
  </div>
  <div class="layer4-container">
    <div class="layer"></div>
  </div>
</div>

Answer 2

将 div 包装在容器中，然后将其设置为 overflow: hidden 将导致旋转的 div 在它们离开容器时被切断。但是，如果您希望旋转位在视觉上从容器中伸出，那就有点复杂了。

由于某种原因，the specs say that 当一个溢出方向是hidden 时，另一个必须是hidden 或auto。这导致我们需要使用 hacky 方法来获得所需的结果。在这种情况下，它使用填充和负边距来扩展包含的 div。

@keyframes rotateClockwise {
    0% {transform: rotate(0);}
    100% {transform: rotate(90deg);}
}

@keyframes rotateAnticlockwise {
    0% {transform: rotate(0);}
    100% {transform: rotate(-90deg);}
}

.container {
    width: 140px;
    height: 86px;
    position: relative;
}

.layer {
    width: 50%;
    height: 100%;
    position: absolute;
    overflow-x: hidden;
    top: 0;
    padding: 50% 0 50% 0;
    margin: -50% 0 -50% 0;
}

.rotate {
    width: 100%;
    height: 50%;
    background-color: black;
    animation-duration: 5s;
}

.layer1 {
    left: 0;
}

.layer2 {
    left: 50%;
}

.rotate1 {
    animation-name: rotateClockwise;
    transform-origin: bottom right;
}

.rotate2 {
    animation-name: rotateAnticlockwise;
    transform-origin: top right;
}

.rotate3 {
    animation-name: rotateAnticlockwise;
    transform-origin: bottom left;
}

.rotate4 {
    animation-name: rotateClockwise;
    transform-origin: top left;
}

<div class="container">
    <div class="layer layer1">
        <div class="rotate rotate1"></div>
        <div class="rotate rotate2"></div>
    </div>
    <div class="layer layer2">
        <div class="rotate rotate3"></div>
        <div class="rotate rotate4"></div>
    </div>
</div>