过渡 animation 与 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

您可以在 animation 的末尾完全隐藏这些层，方法是将每个层包装在一个容器中并为这些容器提供属性overflow: hidden ，这样该层就不会从另一侧出现。

确保还对容器应用大小和定位规则，然后让层完全填充它们的容器，有颜色，并有 animation。

 @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 被切断，只要它们在容器外进行 go 即可。 但是，如果您希望旋转位在视觉上从容器中伸出，则要复杂一些。

出于某种原因，规范说当一个溢出方向是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>