Generated by SassMeister.com.

input.scss

.pulse-fade {
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.pulse-fade-2 {animation-delay: -0.75s;}
.pulse-fade-3 {animation-delay: -0.5s;}
.pulse-fade-4 {animation-delay: -0.25s;}

@keyframes pulse {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 50%;
    }
}
/*
@media (prefers-reduce-motion) {
    @keyframes pulse {
        0% {
            opacity: 100%;
        }

        100% {
            opacity: 100%;
        }
    }
}*/
body {
    background-color: rgba(176, 196, 223, 1);
    
}
.tile-stencil {
    height: 284px;
    width: 310px;
    border-radius: 4px; 
    background-color: white;
    position: relative;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);
}

.tile-image {
    display: inline-block;
    width: 78px;
    height: 78px;
    border-radius: 100px;
    background-color: rgb(243, 243, 243);
transform: translateX(-50%);
left: 50%;
position: relative;
margin-top:3rem;
}

.tile-text {
    height: 75px;
    display: flex;
    flex-direction: column;
    margin-top:3rem;
}

.font-size-six-stencil {
    margin-top: 1rem;
    width: 70%;
    /* This is smaller than the text height by about 30 percent based on feedback from ux */
    height: 8px;
    background-color:rgb(243, 243, 243);
    border-radius: 4px;
    align-self: center;
}

.font-size-six-stencil + .font-size-six-stencil {
    opacity: 90%;
    width: 65%;
}

.font-size-six-stencil + .font-size-six-stencil + .font-size-six-stencil {
    opacity: 85%;
    width: 60%;
}

markup.html

    <article class="tile-stencil">
        <div class="slds-card__body slds-card__body_inner slds-m-top_large">
            <div class="slds-illustration slds-illustration_small">
                <div class="tile-image pulse-fade pulse-fade-1"></div>
            </div>
            <div class="tile-text">
                <div class="font-size-six-stencil pulse-fade pulse-fade-2"></div>
                <div class="font-size-six-stencil pulse-fade pulse-fade-3"></div>
                <div class="font-size-six-stencil pulse-fade pulse-fade-4"></div>
            </div>
        </div>
    </article>

output.css

.pulse-fade {
  animation-name: pulse;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.pulse-fade-2 {
  animation-delay: -0.75s;
}

.pulse-fade-3 {
  animation-delay: -0.5s;
}

.pulse-fade-4 {
  animation-delay: -0.25s;
}

@keyframes pulse {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 50%;
  }
}
/*
@media (prefers-reduce-motion) {
    @keyframes pulse {
        0% {
            opacity: 100%;
        }

        100% {
            opacity: 100%;
        }
    }
}*/
body {
  background-color: #b0c4df;
}

.tile-stencil {
  height: 284px;
  width: 310px;
  border-radius: 4px;
  background-color: white;
  position: relative;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.tile-image {
  display: inline-block;
  width: 78px;
  height: 78px;
  border-radius: 100px;
  background-color: #f3f3f3;
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  margin-top: 3rem;
}

.tile-text {
  height: 75px;
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
}

.font-size-six-stencil {
  margin-top: 1rem;
  width: 70%;
  /* This is smaller than the text height by about 30 percent based on feedback from ux */
  height: 8px;
  background-color: #f3f3f3;
  border-radius: 4px;
  align-self: center;
}

.font-size-six-stencil + .font-size-six-stencil {
  opacity: 90%;
  width: 65%;
}

.font-size-six-stencil + .font-size-six-stencil + .font-size-six-stencil {
  opacity: 85%;
  width: 60%;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}