CSS动画条纹问题 [英] CSS animated Stripes issue
问题描述
我下面有2个代码段。
首先,我有漂亮的条纹,它们根据窗口大小调整大小并始终居中(我尝试了一些动画,但我不像摘要2中的动画那样得到它)
但是我需要一个动画,该动画显示在第二个片段中,条纹应从下方向上延伸,我希望将其保留在最终结果中。
所以我需要将第一段和第二段融合。
第一段:
html,body {宽度:100%;高度:100%;边距:0;填充:0; #position:fixed;}。mask {height:100%;溢出:隐藏;位置:相对;}。容器{高度:100%;裕度:0 -100vh; #position:absolute;}。stripe {float:left;高度:100%;宽度:2%;保证金:0 1%;底部:0%;最大高度:0%; #position:绝对的;背景颜色:黑色;变换:偏斜(-20deg); #transform-origin:底部底部; #transform-origin:左下;动画:ani 1s线性1个向前;}。stripe:nth-child(1){动画延迟:0.0s;}。stripe:nth-child(2){动画延迟:0.2s;}。stripe:nth- child(3){animation-delay:0.4s;}。stripe:nth-child(4){animation-delay:0.6s;}。stripe:nth-child(5){animation-delay:0.8s;}。 stripe:nth-child(6){动画延迟:1s;}。stripe:nth-child(7){动画延迟:1.2s;}。stripe:nth-child(8){动画延迟:1.4s ;}。stripe:nth-child(9){动画延迟:1.6s;}。stripe:nth-child(10){动画延迟:1.8s;}。stripe:nth-child(11){animation-延迟:2秒;}。stripe:nth-child(12){动画延迟:2.2s;}。stripe:nth-child(13){动画延迟:2.4s;}。stripe:nth-child(14) {animation-delay:2.6s;}。stripe:nth-child(15){animation-delay:2.8s;}。stripe:nth-child(16){animation-delay:3s;}。stripe:nth-child (17){animation-delay:3.2s;}。stripe:nth-child(18){animation-delay:3.4s;}。stripe:nth-child(19){animation-delay:3.6s;}。stripe :nth-child(20){动画延迟:3.8s;}。条带:nth-child( 21){animation-delay:4s;}。stripe:nth-child(22){animation-delay:4.2s;}。stripe:nth-child(23){animation-delay:4.4s;}。stripe:nth -child(24){animation-delay:4.6s;}。stripe:nth-child(25){animation-delay:4.8s;} @ keyframes ani {0%{max-height:0%; } 100%{最大高度:100%; }}
<!DOCTYPE html>< html> < head< / head< body> < div class = mask> < div class = container> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < / div> < / div>< / body>< / html>
< h2>第二个:
html,body {width:100%;高度:100%;边距:0;填充:0;位置:固定;}。stripe {高度:100%;宽度:2%;底部:0%;最大高度:0%;背景颜色:黑色;位置:固定;动画:ani 1s线性1个前进;变换:偏斜(-10deg); transform-origin:左下;;。stripe:nth-child(1){margin-left:0%; animation-delay:0.0s;}。stripe:nth-child(2){margin-left:4%; animation-delay:0.2s;}。stripe:nth-child(3){margin-left:8%; animation-delay:0.4s;}。stripe:nth-child(4){margin-left:12%; animation-delay:0.6s;}。stripe:nth-child(5){margin-left:16%; animation-delay:0.8s;}。stripe:nth-child(6){margin-left:20%; animation-delay:1s;}。stripe:nth-child(7){margin-left:24%; animation-delay:1.2s;}。stripe:nth-child(8){margin-left:28%; animation-delay:1.4s;}。stripe:nth-child(9){margin-left:32%; animation-delay:1.6s;}。stripe:nth-child(10){margin-left:36%; animation-delay:1.8s;}。stripe:nth-child(11){margin-left:40%; animation-delay:2s;}。stripe:nth-child(12){margin-left:44%; animation-delay:2.2s;}。stripe:nth-child(13){margin-left:48%; animation-delay:2.4s;}。stripe:nth-child(14){margin-left:52%; animation-delay:2.6s;}。stripe:nth-child(15){margin-left:56%; animation-delay:2.8s;}。stripe:nth-child(16){margin-left:60%; animation-delay:3s;}。stripe:nth-child(17){margin-left:64%; animation-delay:3.2s;}。stripe:nth-child(18){margin-left:68%; animation-delay:3.4s;}。stripe:nth-child(19){margin-left:72%; animation-delay:3.6s;}。stripe:nth-child(20){margin-left:76%; animation-delay:3.8s;}。stripe:nth-child(21){margin-left:80%; animation-delay:4s;}。stripe:nth-child(22){margin-left:84%; animation-delay:4.2s;}。stripe:nth-child(23){margin-left:88%; animation-delay:4.4s;}。stripe:nth-child(24){margin-left:92%; animation-delay:4.6s;}。stripe:nth-child(25){margin-left:96%;动画延迟:4.8秒;} @ keyframes ani {0%{max-height:0%; } 100%{最大高度:100%; }}
<!DOCTYPE html>< html> < head< / head< body> < div class = mask> < div class = container> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < / div> < / div>< / body>< / html>
感谢您的帮助!
我对您的布局做了一些更改。
但是主要区别是从渐变制成的背景中获得动画效果,然后移动它。这样处理条纹位置要容易得多:
html,body {宽度:100%;高度:100%;边距:0; padding:0;}。mask {height:100%;溢出:隐藏;位置:相对;}。容器{高度:100%;右边距:-100vh;}。stripe {display:inline-block;高度:100%;宽度:2%;保证金:0 1%;底部:0%;变换:偏斜(-20deg); transform-origin:顶部;背景图片:线性渐变(顶部,黑色50%,透明50%);背景大小:100%200%; animation:ani 1s forwards;}。stripe:nth-child(1){animation-delay:0.0s;}。stripe:nth-child(2){animation-delay:0.2s;}。stripe:nth-child( 3){动画延迟:0.4s;}。stripe:nth-child(4){动画延迟:0.6s;}。stripe:nth-child(5){动画延迟:0.8s;}。stripe: nth-child(6){动画延迟:1秒;}。stripe:nth-child(7){动画延迟:1.2秒;}。stripe:nth-child(8){动画延迟:1.4秒;} .stripe:nth-child(9){动画延迟:1.6s;}。stripe:nth-child(10){动画延迟:1.8s;}。stripe:nth-child(11){动画延迟: 2s;}。stripe:nth-child(12){animation-delay:2.2s;}。stripe:nth-child(13){animation-delay:2.4s;}。stripe:nth-child(14){animation -delay:2.6s;}。stripe:nth-child(15){animation-delay:2.8s;}。stripe:nth-child(16){animation-delay:3s;}。stripe:nth-child(17 ){animation-delay:3.2s;}。stripe:nth-child(18){animation-delay:3.4s;}。stripe:nth-child(19){animation-delay:3.6s;}。stripe:nth -child(20){动画延迟:3.8秒;}。stripe:nth-child(21){ imation-delay:4s;}。stripe:nth-child(22){animation-delay:4.2s;}。stripe:nth-child(23){animation-delay:4.4s;}。stripe:nth-child( 24){animation-delay:4.6s;}。stripe:nth-child(25){animation-delay:4.8s;} @ keyframes ani {0%{背景位置:100%0%; } 100%{背景位置:100%100%; }}
<!DOCTYPE html>< html> < head< / head< body> < div class = mask> < div class = container> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < div class = stripe>< / div> < / div> < / div>< / body>< / html>
I have 2 code snippets down below. In the first, I have beautiful stripes, they resizing themselves with the window size and are always centered (I try some animation but I don't get it like the animation from snippet 2)
But I need an animation, this animation are showed in the second snippet, the stripes should come from below and go up and I would like to keep that in the final result.
So I need a fusion with the first and second snippet.
First:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
#position: fixed;
}
.mask {
height: 100%;
overflow: hidden;
position: relative;
}
.container {
height: 100%;
margin: 0 -100vh;
#position: absolute;
}
.stripe {
float: left;
height: 100%;
width: 2%;
margin: 0 1%;
bottom: 0%;
max-height: 0%;
#position: absolute;
background-color: black;
transform: skew(-20deg);
#transform-origin: bottom bottom;
#transform-origin: left bottom;
animation: ani 1s linear 1 forwards;
}
.stripe:nth-child(1) {
animation-delay: 0.0s;
}
.stripe:nth-child(2) {
animation-delay: 0.2s;
}
.stripe:nth-child(3) {
animation-delay: 0.4s;
}
.stripe:nth-child(4) {
animation-delay: 0.6s;
}
.stripe:nth-child(5) {
animation-delay: 0.8s;
}
.stripe:nth-child(6) {
animation-delay: 1s;
}
.stripe:nth-child(7) {
animation-delay: 1.2s;
}
.stripe:nth-child(8) {
animation-delay: 1.4s;
}
.stripe:nth-child(9) {
animation-delay: 1.6s;
}
.stripe:nth-child(10) {
animation-delay: 1.8s;
}
.stripe:nth-child(11) {
animation-delay: 2s;
}
.stripe:nth-child(12) {
animation-delay: 2.2s;
}
.stripe:nth-child(13) {
animation-delay: 2.4s;
}
.stripe:nth-child(14) {
animation-delay: 2.6s;
}
.stripe:nth-child(15) {
animation-delay: 2.8s;
}
.stripe:nth-child(16) {
animation-delay: 3s;
}
.stripe:nth-child(17) {
animation-delay: 3.2s;
}
.stripe:nth-child(18) {
animation-delay: 3.4s;
}
.stripe:nth-child(19) {
animation-delay: 3.6s;
}
.stripe:nth-child(20) {
animation-delay: 3.8s;
}
.stripe:nth-child(21) {
animation-delay: 4s;
}
.stripe:nth-child(22) {
animation-delay: 4.2s;
}
.stripe:nth-child(23) {
animation-delay: 4.4s;
}
.stripe:nth-child(24) {
animation-delay: 4.6s;
}
.stripe:nth-child(25) {
animation-delay: 4.8s;
}
@keyframes ani {
0% {
max-height: 0%;
}
100% {
max-height: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mask">
<div class="container">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
</div>
</body>
</html>
Second:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;
}
.stripe {
height: 100%;
width: 2%;
bottom: 0%;
max-height: 0%;
background-color: black;
position: fixed;
animation: ani 1s linear 1 forwards;
transform: skew(-10deg);
transform-origin: left bottom;
}
.stripe:nth-child(1) {
margin-left: 0%;
animation-delay: 0.0s;
}
.stripe:nth-child(2) {
margin-left: 4%;
animation-delay: 0.2s;
}
.stripe:nth-child(3) {
margin-left: 8%;
animation-delay: 0.4s;
}
.stripe:nth-child(4) {
margin-left: 12%;
animation-delay: 0.6s;
}
.stripe:nth-child(5) {
margin-left: 16%;
animation-delay: 0.8s;
}
.stripe:nth-child(6) {
margin-left: 20%;
animation-delay: 1s;
}
.stripe:nth-child(7) {
margin-left: 24%;
animation-delay: 1.2s;
}
.stripe:nth-child(8) {
margin-left: 28%;
animation-delay: 1.4s;
}
.stripe:nth-child(9) {
margin-left: 32%;
animation-delay: 1.6s;
}
.stripe:nth-child(10) {
margin-left: 36%;
animation-delay: 1.8s;
}
.stripe:nth-child(11) {
margin-left: 40%;
animation-delay: 2s;
}
.stripe:nth-child(12) {
margin-left: 44%;
animation-delay: 2.2s;
}
.stripe:nth-child(13) {
margin-left: 48%;
animation-delay: 2.4s;
}
.stripe:nth-child(14) {
margin-left: 52%;
animation-delay: 2.6s;
}
.stripe:nth-child(15) {
margin-left: 56%;
animation-delay: 2.8s;
}
.stripe:nth-child(16) {
margin-left: 60%;
animation-delay: 3s;
}
.stripe:nth-child(17) {
margin-left: 64%;
animation-delay: 3.2s;
}
.stripe:nth-child(18) {
margin-left: 68%;
animation-delay: 3.4s;
}
.stripe:nth-child(19) {
margin-left: 72%;
animation-delay: 3.6s;
}
.stripe:nth-child(20) {
margin-left: 76%;
animation-delay: 3.8s;
}
.stripe:nth-child(21) {
margin-left: 80%;
animation-delay: 4s;
}
.stripe:nth-child(22) {
margin-left: 84%;
animation-delay: 4.2s;
}
.stripe:nth-child(23) {
margin-left: 88%;
animation-delay: 4.4s;
}
.stripe:nth-child(24) {
margin-left: 92%;
animation-delay: 4.6s;
}
.stripe:nth-child(25) {
margin-left: 96%;
animation-delay: 4.8s;
}
@keyframes ani {
0% {
max-height: 0%;
}
100% {
max-height: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mask">
<div class="container">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
</div>
</body>
</html>
Thanks for your help!
I have changed a little bit your layout.
But the main difference is to get the animation effect from a background made of a gradient, and moving this one. It's much easier to handle the stripes position this way:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.mask {
height: 100%;
overflow: hidden;
position: relative;
}
.container {
height: 100%;
margin-right: -100vh;
}
.stripe {
display: inline-block;
height: 100%;
width: 2%;
margin: 0 1%;
bottom: 0%;
transform: skew(-20deg);
transform-origin: top;
background-image: linear-gradient(to top, black 50%, transparent 50%);
background-size: 100% 200%;
animation: ani 1s forwards;
}
.stripe:nth-child(1) {
animation-delay: 0.0s;
}
.stripe:nth-child(2) {
animation-delay: 0.2s;
}
.stripe:nth-child(3) {
animation-delay: 0.4s;
}
.stripe:nth-child(4) {
animation-delay: 0.6s;
}
.stripe:nth-child(5) {
animation-delay: 0.8s;
}
.stripe:nth-child(6) {
animation-delay: 1s;
}
.stripe:nth-child(7) {
animation-delay: 1.2s;
}
.stripe:nth-child(8) {
animation-delay: 1.4s;
}
.stripe:nth-child(9) {
animation-delay: 1.6s;
}
.stripe:nth-child(10) {
animation-delay: 1.8s;
}
.stripe:nth-child(11) {
animation-delay: 2s;
}
.stripe:nth-child(12) {
animation-delay: 2.2s;
}
.stripe:nth-child(13) {
animation-delay: 2.4s;
}
.stripe:nth-child(14) {
animation-delay: 2.6s;
}
.stripe:nth-child(15) {
animation-delay: 2.8s;
}
.stripe:nth-child(16) {
animation-delay: 3s;
}
.stripe:nth-child(17) {
animation-delay: 3.2s;
}
.stripe:nth-child(18) {
animation-delay: 3.4s;
}
.stripe:nth-child(19) {
animation-delay: 3.6s;
}
.stripe:nth-child(20) {
animation-delay: 3.8s;
}
.stripe:nth-child(21) {
animation-delay: 4s;
}
.stripe:nth-child(22) {
animation-delay: 4.2s;
}
.stripe:nth-child(23) {
animation-delay: 4.4s;
}
.stripe:nth-child(24) {
animation-delay: 4.6s;
}
.stripe:nth-child(25) {
animation-delay: 4.8s;
}
@keyframes ani {
0% {
background-position: 100% 0%;
}
100% {
background-position: 100% 100%;
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mask">
<div class="container">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
</div>
</body>
</html>
这篇关于CSS动画条纹问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!