2

I know there are some questions with similar problems on SO, but they don't match my current problem, I'm trying to do an animation with some path svg, on CodePen my animation works, but the class "pulse" (the color changing) doesn ' t work, it's look like it is switch off (?), while in Atom Editor, not even the animation works for me, even if it is opened in front of the browser

I have already tried to put the "pulse" class on other divs but the situation does not change, only if placed on the svg container, it works, but colors the entire area covered by the svg file, not the individual elements of the SVG, for this reason I put the "pulse" class on the individual paths, but there seems to be no way for this to work (?) And why there is this difference between previe on codepen and preview from Atom?

PLEASE OPEN THE CODEPEN EXAMPLE FILE

<div class="spin ">
<svg viewBox="0 0 800 800"  >
  <g class="pulse">
     <path class="pulse" 
     d="M587.3,263.2c20.7,1.1,40.8,5.5,60.7,11.4c17,5,34.1,5.2,49.6-5c6.6- 
     4.4,12.6-9.8,18.8-14.8c6.8-5.5,12.7-12.2,21.6-14.9
     c3.8-1.2,4.6-6.2,1.9-9.7c-2.7-3.5-6.6-5.3-10.6-3.2c-6.1,3.2-12.1,6.9- 
     17.6,11.1c-5,3.8-9.2,8.7-13.9,12.9
     c-8.2,7.3-17.8,13.2-28.9,11.4c-17.8-2.9-35.3-7.6-52.9-11.6c0-0.8,0- 
     1.5,0.1-2.3c3.4-0.8,6.8-2,10.3-2.4
     c11.7-1.5,23.5-2.6,35.2-4.1c9.5-1.2,18.2-4.4,24.8-11.7c3.3-3.7,3.5- 
     8.7,0.9-12.4c-2.8-3.9-7.1-5-12-2.9
     c-3.8,1.6-7.9,2.9-11.3,5.2c-8.4,5.8-17.9,7.6-27.7,9c-18.3,2.5-37,2.8- 
     54.2,10.5c-0.7,0.3-1.6,0.3-2.5,0.3c-7-0.2-14-0.2-20.9-0.6
     c-22.3-1.2-44.6-2.5-66.9-3.7c-2.6-0.1-5.4,0.3-7.8,1.2c-5.4,2-8.1,6.8- 
     6.7,11.2c1.4,4.4,5.6,6.6,11.5,5c15.2-4,30.6-4.7,46.1-2.9
     c7.6,0.8,15.2,2.4,22.7,3.7c0,0.5,0,1,0,1.5c-3.1,2.2-6.4,4.1-9.2,6.5c- 
     2.9,2.6-5.8,3-9.5,2c-16.5-4.5-32.6-3.5-48.3,3.6
     c-6.2,2.8-9.3,6.9-8.3,11.5c1.1,5.1,5.5,8,12.4,7.8c4.3-0.1,8.6-1.2,12.9- 
     1.2c6.3,0,12.6,0.6,18.9,0.9c0.1,0.6,0.2,1.2,0.3,1.8
     c-3.3,3.9-6.5,7.9-9.8,11.8c-10.7,12.5-19.9,25.9-26.5,40.9c-5.9,13.4- 
     1.5,24.2,12.3,29.2c17.2,6.2,33.8,5,48.6-6.8
     c8.2-6.6,16.8-12.1,27.5-13.2c8.6-0.9,17.2-2,25.9-2.4c15-0.7,30-1,45- 
     1.1c10.4,0,17.8-4.3,24.1-12.5c9.8-12.9,22.4-19.9,39.5-16.9
     c5.5,1,11.6,0.1,17.3-0.9c7-1.3,10.1-7.9,7.6-14.5c-2.2-5.8-6.7-9.3-12.6- 
     8.7c-7.2,0.7-14.8,1.7-21.2,4.7
     c-12.7,6.1-24.8,13.6-36.8,21c-4.1,2.5-8.1,4.3-13,4.2c-13.3-0.2-26.6- 
     0.5-40-0.4c-11.8,0.1-23.7,0-35.4,1.3
     c-14.2,1.6-28.6,4.1-40.4,13.1c-10.3,7.8-22.3,6-34.6,7.6c0.9-2.3,1.4- 
     3.9,2.1-5.3c8.6-17.7,20.9-32.3,36-44.9
     c3.4-2.8,6.5-4,10.9- 
     3c20.8,4.7,41.6,9.4,62.4,13.9c5.4,1.2,10.8,2.3,16.2,2.8c3.1,0.3,6.1- 
     1.1,6.6-4.7c0.6-3.8-1.2-6.4-4.9-7.6
     c-1.3-0.4-2.6-0.6-3.9-0.9c-16.2-3.9-32.4-7.6-48.5-12c-6.4-1.7- 
     12.3-5.1-19.7-8.3C570.1,268.2,577.7,262.7,587.3,263.2z"> 
     </g>
   </svg>
  </div>

.pulse{
 animation: pulse 5s infinite;
 transition:.5s ease;
 }

@keyframes pulse {
0%{
background-color: #001F3F;
}
100%{
background-color: #FF4136;
}
}

PLEASE OPEN THE CODEPEN EXAMPLE FILE

TTA1EE
  • 41
  • 5
  • In svg you use fill not background. Furthermore: you are using SASS syntax in css – enxaneta Jun 23 '19 at 12:59
  • Ok, I am full self-taught in coding, do you mean like that?: @keyframes pulse { 0%{ fill: #001F3F; } 100%{ fill: #FF4136; } } – TTA1EE Jun 23 '19 at 13:01

1 Answers1

2

As I've commented: you need to use fill instead of background. Also you use SASS syntax in a css document.

.spin {

  width:90vh;
  animation: spin 3s infinite;
  flex-basis: 50%;
  transform-origin: center;
  filter: blur(2px);
  transition: .5s ease;
}
.spin .pulse {
  animation: pulse 5s infinite;
  transition: .5s ease;
}
.spin:nth-child(1) {
  animation-duration: 2.85s;
}
.spin:nth-child(2) {
  animation-duration: 3.85s;
}
.spin:nth-child(3) {
  animation-duration: 4.85s;
}
.spin:nth-child(4) {
  animation-duration: 5.85s;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0% {
    fill: #001F3F;
  }
  100% {
    fill: #FF4136;
  }
}
<div class="spin ">
           <svg viewBox="0 0 800 800"  >
           <g class="pulse">
            <path class="pulse" d="M587.3,263.2c20.7,1.1,40.8,5.5,60.7,11.4c17,5,34.1,5.2,49.6-5c6.6-4.4,12.6-9.8,18.8-14.8c6.8-5.5,12.7-12.2,21.6-14.9
              c3.8-1.2,4.6-6.2,1.9-9.7c-2.7-3.5-6.6-5.3-10.6-3.2c-6.1,3.2-12.1,6.9-17.6,11.1c-5,3.8-9.2,8.7-13.9,12.9
              c-8.2,7.3-17.8,13.2-28.9,11.4c-17.8-2.9-35.3-7.6-52.9-11.6c0-0.8,0-1.5,0.1-2.3c3.4-0.8,6.8-2,10.3-2.4
              c11.7-1.5,23.5-2.6,35.2-4.1c9.5-1.2,18.2-4.4,24.8-11.7c3.3-3.7,3.5-8.7,0.9-12.4c-2.8-3.9-7.1-5-12-2.9
              c-3.8,1.6-7.9,2.9-11.3,5.2c-8.4,5.8-17.9,7.6-27.7,9c-18.3,2.5-37,2.8-54.2,10.5c-0.7,0.3-1.6,0.3-2.5,0.3c-7-0.2-14-0.2-20.9-0.6
              c-22.3-1.2-44.6-2.5-66.9-3.7c-2.6-0.1-5.4,0.3-7.8,1.2c-5.4,2-8.1,6.8-6.7,11.2c1.4,4.4,5.6,6.6,11.5,5c15.2-4,30.6-4.7,46.1-2.9
              c7.6,0.8,15.2,2.4,22.7,3.7c0,0.5,0,1,0,1.5c-3.1,2.2-6.4,4.1-9.2,6.5c-2.9,2.6-5.8,3-9.5,2c-16.5-4.5-32.6-3.5-48.3,3.6
              c-6.2,2.8-9.3,6.9-8.3,11.5c1.1,5.1,5.5,8,12.4,7.8c4.3-0.1,8.6-1.2,12.9-1.2c6.3,0,12.6,0.6,18.9,0.9c0.1,0.6,0.2,1.2,0.3,1.8
              c-3.3,3.9-6.5,7.9-9.8,11.8c-10.7,12.5-19.9,25.9-26.5,40.9c-5.9,13.4-1.5,24.2,12.3,29.2c17.2,6.2,33.8,5,48.6-6.8
              c8.2-6.6,16.8-12.1,27.5-13.2c8.6-0.9,17.2-2,25.9-2.4c15-0.7,30-1,45-1.1c10.4,0,17.8-4.3,24.1-12.5c9.8-12.9,22.4-19.9,39.5-16.9
              c5.5,1,11.6,0.1,17.3-0.9c7-1.3,10.1-7.9,7.6-14.5c-2.2-5.8-6.7-9.3-12.6-8.7c-7.2,0.7-14.8,1.7-21.2,4.7
              c-12.7,6.1-24.8,13.6-36.8,21c-4.1,2.5-8.1,4.3-13,4.2c-13.3-0.2-26.6-0.5-40-0.4c-11.8,0.1-23.7,0-35.4,1.3
              c-14.2,1.6-28.6,4.1-40.4,13.1c-10.3,7.8-22.3,6-34.6,7.6c0.9-2.3,1.4-3.9,2.1-5.3c8.6-17.7,20.9-32.3,36-44.9
              c3.4-2.8,6.5-4,10.9-3c20.8,4.7,41.6,9.4,62.4,13.9c5.4,1.2,10.8,2.3,16.2,2.8c3.1,0.3,6.1-1.1,6.6-4.7c0.6-3.8-1.2-6.4-4.9-7.6
              c-1.3-0.4-2.6-0.6-3.9-0.9c-16.2-3.9-32.4-7.6-48.5-12c-6.4-1.7-12.3-5.1-19.7-8.3C570.1,268.2,577.7,262.7,587.3,263.2z"  class="spin pulse" />
            </g>
             <g class="pulse">
               <path d="M226,305.6c10.3-0.8,18.3-7.8,24.5-16c3-3.9,2.9-8.5,0-12.6c-2.5-3.6-8-5.5-12-3.7c-2.2,0.9-4.2,2.7-5.8,4.6
              c-6.7,7.9-14.3,14.1-25,16.3c-4.3,0.9-7.9,4.6-12.1,6.7c-5.1,2.6-10.2,5.3-15.6,7.2c-4,1.4-8.5,1.3-12.8,2.1
              c-9.2,1.5-18.7,1.6-27.2,6.7c-4.4,2.6-9.5,4-14.2,6.2c-8.4,3.8-17,5.2-26.3,4.2c-9.1-1-18.7-1.4-26.8,3.6
              c-13.2,8.2-26.2,17-39,25.9c-8.7,6.1-9.9,18.7-3,27c6.5,7.8,17.9,8.5,25.8,1.2c2.7-2.5,5-5.4,7-8.4c3.5-5.2,6.8-10.7,10-16.1
              c4.2-7.2,10.2-10.5,18.5-10.5c5.5,0,11-0.6,16.4-1.7c7.3-1.4,14.5-3.4,21.8-5.2c-0.3,4.9-1.2,9.9-0.8,14.7
              c1.4,18.8-1.2,37.3-8.2,54.4c-7.7,18.9-5.8,35.4,4.6,52.5c9.4,15.6,11.5,32.5,5.2,50.4c-2.2,6.3-2.2,13.7-2,20.6
              c0.1,5.6,4.1,9.4,9.5,10.9c10.5,3,25.2-5.7,26.3-16.5c0.6-5.3-1.1-11.2-2.9-16.5c-6.7-19.7-14.3-39.1-20.8-58.8
              c-2.4-7.3-4.3-15.4-3.9-22.9c1.5-23,9.5-44.8,15-67c0.2-0.8,0.7-1.5,1.1-2.3c3.5-7.8,7-15.6,10.6-23.4c0.5-1,2-2.2,2.8-2.1
              c11.8,1.5,18.8-5.7,26.4-13.2C202.5,315.1,211.9,306.8,226,305.6z" class="spin pulse" />
              </g>
             
             <g class="pulse">
               <path d="M386.7,280.2c-3.2-6.7-8.1-8.2-14-3.7c-22.4,17.1-41.9,37-56.2,61.6c-2.5,4.3-5.7,8.3-9.3,11.6
              c-8.8,8.1-15.1,17.6-19.2,28.8c-1.8,5-3.6,10.5-7,14.2c-9.6,10.5-11,22-6,34.7c2.7,6.8,2.6,13.6,0.5,20.6c-0.4,1.4-0.8,2.9-1,4.4
              c-0.7,5.2,1.6,10.3,5.7,12.4c4.8,2.4,10,2,13.4-1.8c2.7-2.9,5.3-7.5,5.2-11.2c-0.1-6.3-2.1-12.7-4-18.8c-1.6-5.1-4.3-9.7-6.2-14.7
              c-1.6-4.2-1.2-8.3,1.2-12.4c4.9-8.6,9.2-17.6,14.2-26.2c3.2-5.5,6.5-11.4,11-15.7c9.6-9,17.5-19.1,24-30.5
              c9-15.7,22-27.8,36.7-40.1c1.2,3.9,2.4,6.9,3,9.9c4.2,23.4-0.6,46-5.7,68.6c-1.1,5-3.5,8.8-9.3,9.4c-2,0.2-4,1.7-5.8,2.8
              c-24.7,15-34.7,48.1-21.2,74c6.5,12.4,15.3,23.8,23.6,35.2c2.2,3,6.3,4.9,9.9,6.3c7.3,2.8,14.8-2.2,15.5-10.1
              c0.2-2.6,0-5.4-0.6-7.9c-2.6-11.8-6.8-23.4-6.1-35.8c1.5-26.9,6-53.2,15.1-78.6c5-14,8.7-28,4.7-43.4
              C395.2,309.2,393.4,294,386.7,280.2z M362.4,464.2c-11.9-7.2-16.9-18.6-17-32.1c-0.1-12.6,4.1-23.7,15.6-31
              c1.1,21.1,2.2,41.8,3.2,62.5C363.6,463.8,363,464,362.4,464.2z" class="spin" />
              </g>
             
             <g class="pulse">
               <path d="M293.2,328.5c2.6-3.1,5.8-6,9.3-8.4c5.4-3.7,7.1-8,4-12.3c-2.9-3.9-9-5.2-14.2-1.8c-5.8,3.8-11.6,8.3-15.5,13.5
              c-7.1,9.5-14.6,17.2-29.3,16c-0.4,0-0.8,0.1-1.2,0.2c-19.2,6.9-39.1,12.8-57.4,21.2c-11.1,5.1-18.1,14.9-19.3,26.6
              c-0.5,5,1,9.4,6.2,11.9c5.1,2.3,10.8,1.4,14.3-2.1c3.8-3.7,6.5-8.4,8.7-13c2.5-5.3,3.5-11.5,10.2-14c8.6-3.2,17.8-5.4,26.7-8
              c0.4,0.5,0.9,1,1.3,1.5c-0.9,2.5-1.6,5.1-2.6,7.6c-10.4,26.9-20,54.1-26,82c-1.4,6.6-2,14.1,0,20.5c3.7,11.9,22.6,14.7,35.9,6.2
              c4.7-3,7.3-6.9,6.1-11.9c-1.5-6.4-3.5-12.7-5.3-19.1c-1.7-5.8-5-11.8-4.7-17.5c1.3-21.6,5-42.7,20.5-61c3-3.5,3.7-8.5,5.6-13
              c3.7-2,9.5-3.8,12.9-7.3C284.8,340.9,288.4,334.3,293.2,328.5z" />
              </g>
             <g class="pulse">
               <path d="M496.2,398c-4.8-0.2-9.7-0.1-14.5-0.1c-8.6,0-17.1,0-26,0c0.3-1.9,0.6-3.5,0.8-5.2c1.6-12.9,5.4-25.9,1.9-38.7
              c-4.7-17.1-3.4-33.9-1.4-51c1.1-9.5,1.7-19.3,1.1-28.8c-0.7-11.9-7.7-16.2-18.5-11.3c-10.3,4.6-20.1,10.4-29.9,16
              c-4.2,2.4-5,6.8-3,10.9c2.1,4.2,5.4,5.6,10.4,4.4c7.9-2,15.7-4.1,25.4-6.6c-0.7,9.8-1.1,18.7-2,27.5c-1.9,19.5-4.4,38.9-0.1,58.6
              c1.7,7.6-0.4,16.1-1.1,24.2c-0.2,3.1-2.5,4.5-5.4,5.7c-8.3,3.3-16.7,6.7-24.5,11.1c-6.3,3.6-7.2,13.2-2.9,19.1
              c2.8,3.9,7.6,5,11.9,2.2c3.5-2.2,6.7-4.9,9.8-7.6c12.6-11.2,27.1-15,43.6-11.4c4.1,0.9,8.2,2,12.3,2.2c5.2,0.2,10.7,0.4,15.7-0.8
              c6-1.5,8.1-5.3,7.4-10.1C506.4,402.1,502.3,398.2,496.2,398z"/>
             </g>
           </svg>
         </div>
enxaneta
  • 31,608
  • 5
  • 29
  • 42