CSS动画条纹问题 [英] CSS animated Stripes issue
本文介绍了CSS动画条纹问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我下面有2个代码段。
首先，我有漂亮的条纹，它们根据窗口大小调整大小并始终居中（我尝试了一些动画，但我不像摘要2中的动画那样得到它）
但是我需要一个动画，该动画显示在第二个片段中，条纹应从下方向上延伸，我希望将其保留在最终结果中。
所以我需要将第一段和第二段融合。
第一段：
< pre class = snippet-code-css lang-css prettyprint-override>
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屋！
查看全文
