Javascript SVG模式动画和背景淡入问题
我正在尝试设置SVG模式的动画,一旦完成,就会使背景图像淡入 这两种效果各自都很好。但当我把它们结合起来时,看起来时机不对 我认为实际的问题是SVG位于不透明度为0的div中。这用于使背景颜色淡入,但这意味着SVG不能立即可见 唯一的CSS解决方案是可能的吗?还是我需要Javascript?如果是这样,人们能提出建议吗 我通过使用背景色而不是图像简化了场景 HTMLJavascript SVG模式动画和背景淡入问题,javascript,css,svg,Javascript,Css,Svg,我正在尝试设置SVG模式的动画,一旦完成,就会使背景图像淡入 这两种效果各自都很好。但当我把它们结合起来时,看起来时机不对 我认为实际的问题是SVG位于不透明度为0的div中。这用于使背景颜色淡入,但这意味着SVG不能立即可见 唯一的CSS解决方案是可能的吗?还是我需要Javascript?如果是这样,人们能提出建议吗 我通过使用背景色而不是图像简化了场景 HTML 可以在背景图像div上使用伪元素作为SVG的基础 /* ====================================
可以在背景图像div上使用伪元素作为SVG的基础 /* ======================================== 背景动画 ========================================= */ .集装箱{ 背景:2424; } @-webkit关键帧淡入{ 0% { 不透明度:0; } 100% { 不透明度:1; } } .背景图像{ 位置:相对位置; } .背景图像::之前{ 内容:; 位置:绝对位置; 排名:0; 左:0; 身高:100%; 宽度:100%; 背景:ff7701; -webkit背景尺寸:封面; -moz背景尺寸:封面; -o-背景尺寸:封面; 背景尺寸:封面; 不透明度:0; -webkit动画名称:淡入; -webkit动画持续时间:2秒; -webkit动画计时功能:轻松; -webkit动画迭代计数:1; -webkit动画延迟:1s; -webkit动画填充模式:正向; z指数:0; } .background-image.visible{ 不透明度:1; } svg{ 位置:相对位置; z指数:2; } /* ======================================== SVG线条动画 ========================================= */ .path1{ 行程阵列:1100; 行程偏移量:1000; -webkit动画:dash 2.6s缓进缓出1向前; -moz动画:dash 2.6s缓进缓出1向前; -o型动画:短跑2.6s缓进缓出1向前; -ms动画:短跑2.6s缓进缓出1向前; 动画:短跑2.6秒,快进快出,向前1步; } @-webkit关键帧{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @-moz关键帧{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @-o-关键帧破折号{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @-关键帧破折号{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @关键帧破折号{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } .路径{ 笔划阵列:1000; 行程偏移量:1000; -网络工具包动画:破折号7s线性1向前; -moz动画:dash 7s线性1向前; -o型动画:短跑7s线性1向前; -ms动画:破折号7s线性1向前; 动画:破折号7s线性1向前; } @-webkit关键帧{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @-moz关键帧{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @-o-关键帧破折号{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @-关键帧破折号{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } } @关键帧破折号{ 从{ 行程偏移量:1000; } 到{ 笔划偏移:0; } }
为了简化我的问题,我可能误导了别人:我淡入的背景实际上是一幅图像,而不是一种颜色。rgba不会在那里工作的,是吗?球,很抱歉。我将用实际情况改写我的问题。希望你仍能提供帮助。谢谢,没问题…我有一个选择…将更新。完成了。谢谢,我很接近!不过,你的建议似乎有一个缺点:如果我延迟动画,背景图片会闪烁,然后消失并再次淡入。检查你知道怎么解决这个问题吗?不幸的是,我最早要到星期一才能仔细看看,但我相信这没什么不知道的。不管怎样,积木就在那里。
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
}
.background-image.visible {
opacity: 1;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}