Css Star Rating

1.1.8 #permalink Animation Speed

Toggle example guides Toggle HTML markup

By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition.

Examples
Default styling
.immediately
No Transition
.noticeable
Transition runs in noticeable speed
.slow
Transition runs very slow
Markup 
<div class="rating  value-3 [modifier class]">
 <div class="star-container">
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
 </div>
  </div>
Source: src/kss-documentation/modifiers.kss.scss, line 1609