The following way is an easy SCSS for loop that will generate child classes to delay animations of divs with the same class.

.service{
 position: relative;
 padding: $padding_l 0px;
 opacity: 0;

 &.visable{
  opacity: 1;
 }
// Loop through the items and add some delay.
 @for $i from 1 through 12 {
 &:nth-child(#{$i}) {
 -webkit-animation-delay: (0.05s * $i);
 }
 }