Apply same CSS styles to divs in the arithmetic sequence of three

I have 10 items in my database table. I want to apply same CSS style to the divs in the arithmetic sequence of 3 items.

For example, items [0, 3,6,9] will have CSS style slideInDown, items [1,4,7] will have CSS style slideFloat and items [2,5,8] will have style slideInUp. @if ($i % 3 == 0), I think this will satisfy the series [0, 3,6,9] but how to write logic for other two series.

My code::

@for ($item = 0; $item < count($posts); $item++)
    @if ($i % 3 == 0)    <!-- for items [0,3,6,9]  -->                
        <div class="content">
            <div class="slideInDown text-center">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @elseif($i == 2) <!-- what will be logic for items [2,5,8]  --> 
        <div class="content">
            <div class="slideInUp">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @else  <!-- for items [1,4,7]  --> 
        <div class="content">
            <div class="slideFloat">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @endif
@endfor

Solution

Actually you could do so directly in CSS using the selector :nth-child(Xn + Y). But since you want to apply a different class for each item, supposedly, the proper way is to ask if ($i % 3 == modulo) where modulo is 0, 1 and 2.

@for ($item = 0; $item < count($posts); $item++)
    @if ($i % 3 == 0)    <!-- for items [0,3,6,9]  -->                
        <div class="content">
            <div class="slideInDown text-center">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @elseif($i % 3 == 2) <!-- what will be logic for items [2,5,8]  --> 
        <div class="content">
            <div class="slideInUp">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @else  <!-- for items [1,4,7]  or $i % 3 == 1 --> 
        <div class="content">
            <div class="slideFloat">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @endif
@endfor

Consider using CSS if this is only for visual purposes.

body {
  display: flex;
}

.item {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid gray;
}

.item:nth-child(3n+0) {
  animation: bounce 1s;
}

.item:nth-child(3n+1) {
  animation: fadeIn 1s;
}

.item:nth-child(3n+2) {
  animation: zoomIn 1s;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />


<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>