2015-09-15 4 views
0

my website Я хочу, чтобы мой логотип SVG погас после заполнения пользователем страницы, а затем повторите затухание: наведите указатель мыши. Я закодировал его в codepen, и он работает безупречно. Я использую новейший Chrome, поэтому я оставил теги браузера для теста.Что мешает моей SVG-анимации CSS3?

Однако на моей странице я не могу заставить его работать. Этот бит кода является последним в CSS, и нет ничего в инспекторе хрома, который конфликтует с ним, что я могу сказать. Есть ли что-нибудь в javascript, что может помешать этому? Что-нибудь в Bootstrap 3? Я искал свой css и ничего не могу найти. Любая помощь приветствуется.

@keyframes fill { 
 
    \t 0% {fill: #000;} 
 
     50% {fill: #1756a9;} 
 
     100% {fill: #000;} 
 
    } 
 
    
 
    .website_logo { 
 
    \t animation-name: fill; 
 
    \t 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>

ответ

0

Проблема, as it turns out, что-то делать с посещаемой состояния, связанного SVG , Это воспроизводимо как с кодозависимым, так и с фрагментом кода, который я предоставил в своем первом сообщении. Если вы нажмете ссылку SVG, это займет iFrame для индекса stackoverflow или индекса codepen. Если вы нажмете кнопку назад, анимация остановится. Это ошибка как в Safari, так и в Google Chrome. Firefox, похоже, работает через эту ошибку.

0

код вы вывесили, кажется, работает OK:

@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.

(Примечание: это не на самом деле ответ на вопрос, так что я должен удалить его в ближайшее время.)

+0

Благодарим вас за ответ. У меня был пример, похожий на ваш, работающий в моем кодефене, а затем я рассердился и продолжал добавлять части, пытаясь сломать его. Я закончил тем, что добавил весь сайт! Я могу заставить анимацию работать с codepen и встроенной ссылкой SVG, но это, похоже, искажает анимацию на моей странице. Я нашел [пару] (http://stackoverflow.com/questions/22593883/why-doesnt-this-css-transition-work-on-svg-inside-an-anchor) [темы] (http://stackoverflow.com/questions/16846628/svg-css3-animation-not-working-with-link-markup), которые, похоже, сталкиваются с одной и той же проблемой. Может быть, это ошибка? – theovenbird

Смежные вопросы