是什么阻止了我的CSS3 SVG动画?

时间:2015-09-15 23:26:51

标签: css3 svg

my website我希望我的SVG徽标在用户到达页面后淡出其填充,然后重复淡入淡出:悬停。我把它编码成codepen并且它完美无瑕。我正在使用最新的Chrome,因此我省略了测试的浏览器标签。

然而,在我的网页上,我似乎无法让它发挥作用。这段代码是CSS中的最后一个,并且chrome检查器中没有任何内容与我发生冲突。 javascript中有什么可能阻止这个吗? Bootstrap 3中有什么东西吗?我搜索过我的CSS并找不到任何东西。任何帮助将不胜感激。

    @keyframes fill {
    	0% {fill: #000;}
        50% {fill: #1756a9;}
        100% {fill: #000;}
    }
    
    .website_logo {
    	animation-name: fill;
    	animation-duration: 4s;
    }
    
    .website_logo:hover {
        animation-name: fill;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }
    
    .icon-logo {
        max-width:10em;
        margin: 0 auto 3em auto;
    }
<div class="icon-logo">
            <svg version="1.1" width="100%" height="100%" viewBox="0 0 525 525">
                <title>Andy Stevens</title>
                <a xlink:href="/">
                    <path class="website_logo" stroke="black" stroke-width="0"
                    d="M 279.00,1.00
                    C 294.04,1.07 320.30,6.38 335.00,10.58
                     418.57,34.42 483.91,97.67 511.33,180.00
                     517.06,197.18 523.79,227.08 524.04,245.00
                     524.04,245.00 524.04,254.00 524.04,254.00
                     524.35,257.87 525.15,259.71 524.91,264.00
                     523.45,289.79 520.69,315.17 512.98,340.00
                     485.95,426.94 417.08,492.99 329.00,516.12
                     316.60,519.37 291.51,523.94 279.00,524.00
                     279.00,524.00 261.00,524.91 261.00,524.91
                     261.00,524.91 245.00,524.00 245.00,524.00
                     222.82,523.74 189.83,515.29 169.00,507.42
                     131.70,493.34 97.25,470.16 70.09,441.00
                     29.71,397.66 1.69,333.60 1.00,274.00
                     1.00,274.00 0.09,261.00 0.09,261.00
                     0.09,261.00 1.00,245.00 1.00,245.00
                     1.31,218.85 12.39,178.78 23.31,155.00
                     55.23,85.48 111.84,34.77 185.00,12.02
                     201.39,6.93 230.03,1.03 247.00,1.00
                     251.57,0.99 253.36,1.08 258.00,0.42
                     258.00,0.42 279.00,1.00 279.00,1.00 Z
                   M 226.39,130.00
                   C 231.04,154.81 237.13,178.90 244.66,203.00
                     244.66,203.00 250.93,223.98 250.93,223.98
                     251.81,226.58 253.49,229.53 256.79,228.34
                     259.12,227.51 259.65,225.19 259.67,223.00
                     259.67,223.00 259.67,218.00 259.67,218.00
                     259.94,212.66 260.99,213.32 261.00,204.00
                     261.00,204.00 261.00,122.00 261.00,122.00
                     261.00,122.00 262.04,112.00 262.04,112.00
                     262.04,112.00 262.04,103.00 262.04,103.00
                     262.37,100.57 263.24,96.73 261.17,94.83
                     260.32,94.05 259.20,93.83 258.10,94.12
                     254.43,95.06 255.01,100.10 255.00,103.00
                     255.00,103.00 255.00,175.00 255.00,175.00
                     255.00,183.97 255.83,205.48 254.00,213.00
                     254.00,213.00 245.12,179.00 245.12,179.00
                     245.12,179.00 233.13,133.00 233.13,133.00
                     232.26,126.92 231.85,121.93 229.97,116.00
                     229.97,116.00 226.78,107.00 226.78,107.00
                     225.99,104.16 226.17,99.91 223.57,98.18
                     222.59,97.53 221.25,97.23 220.09,97.42
                     214.81,98.27 216.00,108.97 215.96,113.00
                     215.96,113.00 215.96,127.00 215.96,127.00
                     215.96,127.00 215.00,138.00 215.00,138.00
                     215.00,138.00 215.00,159.00 215.00,159.00
                     215.00,159.00 216.00,176.00 216.00,176.00
                     216.00,176.00 216.00,191.00 216.00,191.00
                     216.00,191.00 217.00,207.00 217.00,207.00
                     217.00,207.00 217.00,227.00 217.00,227.00
                     217.00,227.00 223.00,227.00 223.00,227.00
                     223.00,227.00 223.00,214.00 223.00,214.00
                     223.00,214.00 221.00,183.00 221.00,183.00
                     221.00,183.00 221.00,150.00 221.00,150.00
                     221.00,139.35 220.18,122.84 223.00,113.00
                     223.00,113.00 226.39,130.00 226.39,130.00 Z
                   M 163.58,217.00
                   C 164.33,212.89 165.65,201.17 168.51,198.60
                     170.29,196.99 172.75,196.99 175.00,197.17
                     178.75,197.48 187.92,199.00 189.98,202.28
                     191.57,204.80 190.99,214.60 191.00,218.00
                     191.01,221.14 190.35,226.69 194.95,226.72
                     196.11,226.73 197.09,226.35 198.08,225.43
                     199.60,223.19 198.77,218.61 198.08,216.00
                     198.08,216.00 198.08,200.00 198.08,200.00
                     198.08,200.00 196.82,178.00 196.82,178.00
                     196.82,178.00 195.28,170.00 195.28,170.00
                     195.28,170.00 195.28,161.00 195.28,161.00
                     195.28,161.00 194.17,154.00 194.17,154.00
                     194.17,154.00 192.03,129.00 192.03,129.00
                     192.03,129.00 189.84,106.00 189.84,106.00
                     189.46,103.28 188.64,98.86 185.05,98.86
                     182.02,98.86 180.71,102.67 179.87,105.00
                     179.87,105.00 174.20,128.00 174.20,128.00
                     174.20,128.00 162.61,190.00 162.61,190.00
                     162.61,190.00 159.11,210.00 159.11,210.00
                     159.11,210.00 155.00,224.00 155.00,224.00
                     162.17,227.11 162.44,223.24 163.58,217.00 Z
                   M 277.89,104.02
                   C 277.89,104.02 279.95,114.00 279.95,114.00
                     279.95,114.00 279.95,138.00 279.95,138.00
                     279.95,138.00 280.91,150.00 280.91,150.00
                     280.91,150.00 283.09,182.00 283.09,182.00
                     283.09,182.00 284.00,196.00 284.00,196.00
                     284.00,196.00 283.01,208.00 283.01,208.00
                     283.01,208.00 283.01,216.00 283.01,216.00
                     282.18,220.81 278.99,224.32 283.01,226.67
                     284.63,227.50 286.39,227.61 288.00,227.21
                     290.26,226.64 293.12,224.50 295.00,223.10
                     303.48,216.80 306.57,213.49 311.24,204.00
                     316.72,192.90 320.99,171.44 320.99,159.00
                     320.99,159.00 320.04,148.00 320.04,148.00
                     319.67,139.86 319.11,129.84 317.10,122.00
                     314.83,113.10 305.90,101.69 297.00,98.56
                     293.59,97.55 285.68,97.87 282.04,98.56
                     279.15,99.71 277.78,100.45 277.89,104.02 Z
                   M 343.08,107.00
                   C 342.69,104.66 342.28,98.63 339.00,98.63
                     337.85,98.63 337.07,99.33 336.60,100.32
                     335.37,102.89 336.87,107.40 337.58,110.00
                     337.58,110.00 342.80,132.00 342.80,132.00
                     349.06,163.30 352.38,176.26 352.00,209.00
                     352.00,209.00 351.04,223.00 351.04,223.00
                     351.18,225.38 352.08,229.88 355.61,228.38
                     358.50,227.15 358.00,221.58 358.00,219.00
                     358.00,219.00 358.00,188.00 358.00,188.00
                     358.00,188.00 357.29,174.00 357.29,174.00
                     357.29,174.00 357.29,162.00 357.29,162.00
                     357.29,162.00 357.29,154.00 357.29,154.00
                     357.29,154.00 365.00,98.00 365.00,98.00
                     358.02,99.20 358.05,104.90 357.29,111.00
                     356.17,119.95 356.49,140.55 351.00,147.00
                     351.00,147.00 343.08,107.00 343.08,107.00 Z
                   M 289.00,190.00
                   C 289.00,190.00 288.00,172.00 288.00,172.00
                     288.00,172.00 287.00,156.00 287.00,156.00
                     287.00,156.00 285.79,125.00 285.79,125.00
                     285.99,121.10 284.29,108.91 285.79,106.44
                     286.92,103.85 290.66,104.68 293.00,105.10
                     300.57,106.47 305.08,110.31 308.68,117.00
                     312.52,124.16 314.90,136.86 315.00,145.00
                     315.21,163.24 314.97,175.36 309.00,193.00
                     305.60,203.02 299.27,213.98 289.00,218.00
                     289.00,218.00 289.00,190.00 289.00,190.00 Z
                   M 187.15,138.00
                   C 187.15,138.00 190.00,173.00 190.00,173.00
                     190.00,173.00 191.00,193.00 191.00,193.00
                     186.55,193.00 172.64,194.01 170.02,190.44
                     167.52,187.03 172.09,173.31 173.12,169.00
                     173.12,169.00 178.42,136.00 178.42,136.00
                     178.42,136.00 183.00,113.00 183.00,113.00
                     183.00,113.00 187.15,138.00 187.15,138.00 Z
                   M 340.39,293.00
                   C 345.04,317.81 351.13,341.90 358.66,366.00
                     358.66,366.00 364.93,386.98 364.93,386.98
                     365.81,389.58 367.49,392.53 370.79,391.34
                     373.12,390.51 373.65,388.19 373.67,386.00
                     373.67,386.00 373.67,381.00 373.67,381.00
                     373.94,375.66 374.99,376.32 375.00,367.00
                     375.00,367.00 375.00,285.00 375.00,285.00
                     375.00,285.00 376.04,275.00 376.04,275.00
                     376.04,275.00 376.04,266.00 376.04,266.00
                     376.37,263.57 377.24,259.73 375.17,257.83
                     374.32,257.05 373.20,256.83 372.10,257.12
                     368.43,258.06 369.01,263.10 369.00,266.00
                     369.00,266.00 369.00,338.00 369.00,338.00
                     369.00,346.97 369.83,368.48 368.00,376.00
                     368.00,376.00 359.12,342.00 359.12,342.00
                     359.12,342.00 347.13,296.00 347.13,296.00
                     346.26,289.92 345.85,284.93 343.97,279.00
                     343.97,279.00 340.78,270.00 340.78,270.00
                     339.99,267.16 340.17,262.91 337.57,261.18
                     336.59,260.53 335.25,260.23 334.09,260.42
                     328.81,261.27 330.00,271.97 329.96,276.00
                     329.96,276.00 329.96,290.00 329.96,290.00
                     329.96,290.00 329.00,301.00 329.00,301.00
                     329.00,301.00 329.00,322.00 329.00,322.00
                     329.00,322.00 330.00,339.00 330.00,339.00
                     330.00,339.00 330.00,354.00 330.00,354.00
                     330.00,354.00 331.00,370.00 331.00,370.00
                     331.00,370.00 331.00,390.00 331.00,390.00
                     331.00,390.00 337.00,390.00 337.00,390.00
                     337.00,390.00 337.00,377.00 337.00,377.00
                     337.00,377.00 335.00,346.00 335.00,346.00
                     335.00,346.00 335.00,313.00 335.00,313.00
                     335.00,302.35 334.18,285.84 337.00,276.00
                     337.00,276.00 340.39,293.00 340.39,293.00 Z
                   M 104.04,262.22
                   C 98.21,267.36 95.66,276.40 96.09,284.00
                     96.96,299.33 103.52,312.54 110.25,326.00
                     115.22,335.96 121.64,350.61 120.82,362.00
                     120.25,369.82 117.34,383.85 109.96,387.95
                     104.29,391.02 101.80,386.17 94.00,387.95
                     98.48,396.92 111.27,395.22 117.82,389.47
                     124.15,383.91 126.44,374.00 127.57,366.00
                     128.79,357.44 123.48,336.87 119.83,329.00
                     114.73,318.01 108.07,307.89 105.13,296.00
                     102.85,286.77 100.51,271.95 110.09,265.75
                     113.97,263.25 115.67,265.66 122.00,264.00
                     118.00,256.49 109.89,257.07 104.04,262.22 Z
                   M 401.04,262.22
                   C 395.21,267.36 392.66,276.40 393.09,284.00
                     393.96,299.33 400.52,312.54 407.25,326.00
                     412.22,335.96 418.64,350.61 417.82,362.00
                     417.25,369.82 414.34,383.85 406.96,387.95
                     401.29,391.02 398.80,386.17 391.00,387.95
                     395.48,396.92 408.27,395.22 414.82,389.47
                     421.15,383.91 423.44,374.00 424.57,366.00
                     425.79,357.44 420.48,336.87 416.83,329.00
                     411.73,318.01 405.07,307.89 402.13,296.00
                     399.85,286.77 397.51,271.95 407.09,265.75
                     410.97,263.25 412.67,265.66 419.00,264.00
                     415.00,256.49 406.89,257.07 401.04,262.22 Z
                   M 202.00,268.00
                   C 204.45,267.96 209.15,268.16 209.56,264.83
                     209.70,263.72 209.24,262.70 208.40,261.98
                     205.18,259.28 192.66,260.72 190.31,264.28
                     188.39,267.20 189.11,271.74 189.58,275.00
                     190.68,282.64 191.09,284.10 191.00,292.00
                     191.00,292.00 190.00,306.00 190.00,306.00
                     190.00,306.00 190.00,331.00 190.00,331.00
                     190.00,331.00 190.96,341.00 190.96,341.00
                     190.96,341.00 190.96,358.00 190.96,358.00
                     190.96,358.00 190.04,370.00 190.04,370.00
                     190.04,370.00 190.60,380.00 190.60,380.00
                     190.34,383.26 188.63,387.04 190.60,389.40
                     192.53,391.34 196.58,391.00 199.00,391.00
                     199.00,391.00 206.00,391.00 206.00,391.00
                     211.55,390.92 214.21,390.73 216.00,385.00
                     216.00,385.00 198.00,384.00 198.00,384.00
                     198.00,384.00 197.13,371.00 197.13,371.00
                     197.13,371.00 197.13,343.00 197.13,343.00
                     197.13,343.00 197.13,330.30 197.13,330.30
                     197.98,323.51 211.08,328.16 208.34,321.30
                     206.89,317.64 199.08,319.75 196.00,320.00
                     196.00,320.00 196.96,311.00 196.96,311.00
                     196.96,311.00 196.96,293.00 196.96,293.00
                     196.96,293.00 196.04,281.00 196.04,281.00
                     196.04,281.00 196.04,268.00 196.04,268.00
                     196.04,268.00 202.00,268.00 202.00,268.00 Z
                   M 246.41,330.00
                   C 246.41,330.00 239.59,284.00 239.59,284.00
                     238.88,279.59 237.24,264.32 234.30,261.78
                     232.55,260.27 231.02,260.74 229.00,261.00
                     229.00,261.00 231.79,274.00 231.79,274.00
                     231.79,274.00 234.92,292.00 234.92,292.00
                     234.92,292.00 245.75,362.00 245.75,362.00
                     245.75,362.00 249.89,385.00 249.89,385.00
                     250.44,387.30 251.38,392.26 254.83,391.26
                     258.09,390.31 257.87,385.63 258.08,383.00
                     258.08,383.00 260.17,360.00 260.17,360.00
                     260.17,360.00 267.28,296.00 267.28,296.00
                     267.28,296.00 269.70,283.00 269.70,283.00
                     269.70,283.00 271.77,265.02 271.77,265.02
                     271.54,262.53 270.00,259.93 267.13,261.17
                     263.51,262.72 264.11,267.84 263.96,271.00
                     263.96,271.00 261.28,297.00 261.28,297.00
                     261.28,297.00 258.16,324.00 258.16,324.00
                     258.16,324.00 254.00,365.00 254.00,365.00
                     254.00,365.00 252.00,365.00 252.00,365.00
                     252.00,365.00 246.41,330.00 246.41,330.00 Z
                   M 300.00,268.00
                   C 302.45,267.96 307.15,268.16 307.56,264.83
                     307.70,263.72 307.24,262.70 306.40,261.98
                     303.18,259.28 290.66,260.72 288.31,264.28
                     286.39,267.20 287.11,271.74 287.58,275.00
                     288.68,282.64 289.09,284.10 289.00,292.00
                     289.00,292.00 288.00,306.00 288.00,306.00
                     288.00,306.00 288.00,331.00 288.00,331.00
                     288.00,331.00 288.96,341.00 288.96,341.00
                     288.96,341.00 288.96,358.00 288.96,358.00
                     288.96,358.00 288.04,370.00 288.04,370.00
                     288.04,370.00 288.60,380.00 288.60,380.00
                     288.34,383.26 286.63,387.04 288.60,389.40
                     290.53,391.34 294.58,391.00 297.00,391.00
                     297.00,391.00 304.00,391.00 304.00,391.00
                     309.55,390.92 312.21,390.73 314.00,385.00
                     314.00,385.00 296.00,384.00 296.00,384.00
                     296.00,384.00 295.13,371.00 295.13,371.00
                     295.13,371.00 295.13,343.00 295.13,343.00
                     295.13,343.00 295.13,330.30 295.13,330.30
                     295.98,323.51 309.08,328.16 306.34,321.30
                     304.89,317.64 297.08,319.75 294.00,320.00
                     294.00,320.00 294.96,311.00 294.96,311.00
                     294.96,311.00 294.96,293.00 294.96,293.00
                     294.96,293.00 294.04,281.00 294.04,281.00
                     294.04,281.00 294.04,268.00 294.04,268.00
                     294.04,268.00 300.00,268.00 300.00,268.00 Z
                   M 146.06,263.39
                   C 144.49,263.93 141.92,265.39 143.17,267.44
                     145.50,271.29 153.81,265.91 156.26,271.16
                     156.96,272.66 156.98,275.32 157.16,277.00
                     157.78,282.65 158.31,287.24 157.91,293.00
                     157.91,293.00 157.10,302.00 157.10,302.00
                     157.10,302.00 157.96,309.00 157.96,309.00
                     157.96,309.00 157.96,320.00 157.96,320.00
                     157.96,320.00 159.00,336.00 159.00,336.00
                     159.00,336.00 160.00,355.00 160.00,355.00
                     160.00,355.00 159.00,376.00 159.00,376.00
                     158.96,379.62 157.84,385.62 159.65,388.69
                     161.04,391.07 163.38,390.87 164.83,388.69
                     166.22,386.58 166.00,382.48 166.00,380.00
                     166.00,380.00 166.00,375.00 166.00,375.00
                     166.00,375.00 165.00,362.00 165.00,362.00
                     165.00,362.00 165.00,343.00 165.00,343.00
                     165.00,343.00 163.03,317.00 163.03,317.00
                     163.03,317.00 163.03,292.00 163.03,292.00
                     163.03,292.00 163.03,278.00 163.03,278.00
                     162.97,275.77 162.13,270.04 163.03,268.44
                     164.25,266.60 166.12,266.69 168.00,266.67
                     177.16,266.57 176.49,261.16 168.00,261.10
                     168.00,261.10 164.00,261.10 164.00,261.10
                     164.00,261.10 159.00,261.10 159.00,261.10
                     159.00,261.10 146.06,263.39 146.06,263.39 Z" />
                </a>
            </svg>
        </div>

2 个答案:

答案 0 :(得分:0)

您发布的代码似乎正常工作:

@keyframes fill {
    0% {fill: #333;}
    50% {fill: #1756a9;}
    100% {fill: #333;}
}

.logo {
    animation-name: fill;
    animation-duration: 4s;
}

.logo:hover {
    animation-name: fill;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
<svg viewBox="0 0 100 100" width="100" height="100">
  <rect class="logo" x="0" y="0" width="100" height="100" fill="#333"/>
</svg>

看起来问题出在其他地方。不要在其他网站上粘贴大量代码,而是尝试创建minimal, complete & verifiable example问题。

(注意:这实际上不是你问题的答案,所以我很快就要将其删除。)

答案 1 :(得分:0)

问题as it turns out与链接SVG的访问状态有关。这与我在初始帖子中提供的codepend和代码片段一样可以重现。如果单击SVG链接,它将把iFrame带到stackoverflow索引或codepen索引。如果您再点击浏览器后退按钮,则动画将停止。这是Safari和谷歌浏览器中的一个错误。 Firefox似乎正在解决这个问题。