timing utilities Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<div data-delay="soft" class="text">
  
  <p>Texte</p>
</div>

<div data-delay="medium" class="text">
  
  <p>Texte</p>
</div>

<div data-delay="speed" class="color-variables">
  
  <p class="left">Texte</p>
</div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

$i: 5;
 
@while $i > 0 {
    [data-delay='#{$i}']{
      animation-delay: #{$i}s;
    }
    $i: $i - .1;
}


$delay: (
  soft: 1.2,
  medium: 1.5,
  speed: 1.8
);

@each $key,$value in $delay{
  [data-delay="#{$key}"]{
    border: 1px solid blue;
    animation-delay: #{$value}s;
  }
  
}

SassMeister-output.css

[data-delay='5'] {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

[data-delay='4.9'] {
  -webkit-animation-delay: 4.9s;
          animation-delay: 4.9s;
}

[data-delay='4.8'] {
  -webkit-animation-delay: 4.8s;
          animation-delay: 4.8s;
}

[data-delay='4.7'] {
  -webkit-animation-delay: 4.7s;
          animation-delay: 4.7s;
}

[data-delay='4.6'] {
  -webkit-animation-delay: 4.6s;
          animation-delay: 4.6s;
}

[data-delay='4.5'] {
  -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s;
}

[data-delay='4.4'] {
  -webkit-animation-delay: 4.4s;
          animation-delay: 4.4s;
}

[data-delay='4.3'] {
  -webkit-animation-delay: 4.3s;
          animation-delay: 4.3s;
}

[data-delay='4.2'] {
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}

[data-delay='4.1'] {
  -webkit-animation-delay: 4.1s;
          animation-delay: 4.1s;
}

[data-delay='4'] {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

[data-delay='3.9'] {
  -webkit-animation-delay: 3.9s;
          animation-delay: 3.9s;
}

[data-delay='3.8'] {
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
}

[data-delay='3.7'] {
  -webkit-animation-delay: 3.7s;
          animation-delay: 3.7s;
}

[data-delay='3.6'] {
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
}

[data-delay='3.5'] {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

[data-delay='3.4'] {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}

[data-delay='3.3'] {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

[data-delay='3.2'] {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

[data-delay='3.1'] {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}

[data-delay='3'] {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

[data-delay='2.9'] {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}

[data-delay='2.8'] {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

[data-delay='2.7'] {
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}

[data-delay='2.6'] {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

[data-delay='2.5'] {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

[data-delay='2.4'] {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

[data-delay='2.3'] {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

[data-delay='2.2'] {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

[data-delay='2.1'] {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

[data-delay='2'] {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

[data-delay='1.9'] {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}

[data-delay='1.8'] {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

[data-delay='1.7'] {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

[data-delay='1.6'] {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

[data-delay='1.5'] {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

[data-delay='1.4'] {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

[data-delay='1.3'] {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

[data-delay='1.2'] {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

[data-delay='1.1'] {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

[data-delay='1'] {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

[data-delay='0.9'] {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

[data-delay='0.8'] {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

[data-delay='0.7'] {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

[data-delay='0.6'] {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

[data-delay='0.5'] {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

[data-delay='0.4'] {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

[data-delay='0.3'] {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

[data-delay='0.2'] {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

[data-delay='0.1'] {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

[data-delay="soft"] {
  border: 1px solid blue;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

[data-delay="medium"] {
  border: 1px solid blue;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

[data-delay="speed"] {
  border: 1px solid blue;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

SassMeister-rendered.html

<div data-delay="soft" class="text">
  
  <p>Texte</p>
</div>

<div data-delay="medium" class="text">
  
  <p>Texte</p>
</div>

<div data-delay="speed" class="color-variables">
  
  <p class="left">Texte</p>
</div>