How does apply the plus symbol in a CSS3 delay class definition?

Question

The below CSS is a section which runs a number of animations

Could you hint or if you prefer "translate" what the + means and/or does? Any link to some documentation is welcome.

also how to use this which sounds like a method to change the delay amount with classes , yes... but of to use it in the html ?

.animated.delay {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
.animated.delay+.delay {
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}
.animated.delay+.delay+.delay {
  -webkit-animation-delay: 1300ms;
  animation-delay: 1300ms;
}
.animated.delay+.delay+.delay+.delay {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
.animated.delay+.delay+.delay+.delay+.delay {
  -webkit-animation-delay: 1150ms;
  animation-delay: 1150ms;
}
.animated.delay+.delay+.delay+.delay+.delay+.delay {
  -webkit-animation-delay: 550ms;
  animation-delay: 550ms;
}

Answer 1

It finds all the elements placed after the first element.

Adjacent sibling combinator

The adjacent sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

CSS Selectors | W3C

As an example:

div + p {
  background: red;
}

<div>
  <p>Not Affected</p>
</div>
<p>Affected</p>