SVG模式动画和背景淡入淡出问题

Question

我正在尝试为SVG模式设置动画，一旦完成，就会使背景图像渐渐消失。

两种效果中的每一种都可以单独使用。但是当我把它们结合起来时，看起来时机错了。

我认为实际问题是SVG位于div opacity:0内。这用于使背景颜色淡入，但这意味着SVG不会立即可见。

只有CSS解决方案可行吗？或者我需要Javascript吗？如果是这样，人们可以提出建议吗？

我通过使用背景颜色而不是图像简化了场景。

DEMO

HTML

<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/>

CSS

/* ========================================
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;
    }
}

Answer 1

你可以在background-image div上使用一个伪元素来＆＃34; underly＆＃34; SVG。

＆＃13;

＆＃13;

/* ========================================
Background animation
========================================= */
 .container {
    background: #242424;
}
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.background-image {
    position: relative;
}
.background-image::before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    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: 2s;
    -webkit-animation-timing-function:ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    z-index:0;
}
.background-image.visible {
    opacity: 1;
}

svg {
    position: relative;
    z-index:2;
}
/* ========================================
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;
    }
}

＆＃13;

<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/>

＆＃13;

＆＃13;

＆＃13;