Fade/blur focus animation

Fade-blur focus Sass

$animation-width: 1024px
$animation-height: 768px
 
// Animation keyframes
 
@-webkit-keyframes fio
    0%, 100%
        opacity: 0.2
        -webkit-transform: scale(0.2, 0.2)
        -webkit-filter: blur(3px)
 
    50%
        opacity: 1
        -webkit-transform: scale(1,1)
        -webkit-filter: blur(0)
 
 
// Styling
 
.animated
    font:
        family: "Helvetica"
        size: 36px
    .item
        position: absolute
        opacity: 0
        -webkit-animation:
            direction: normal
            duration: 8s
            iteration-count: infinite
            name: fio
            timing-function: ease-in-out

        @for $i from 1 through 10
            &:nth-of-type(#{$i}) 
                left: random($animation-width) + px
                top: random($animation-height) + px
                -webkit-animation-delay: random(500)/100 + s

Test harness HTML

<div class="animated">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
  <div class="item">Item Four</div>
  <div class="item">Item Five</div>
  <div class="item">Item Six</div>
  <div class="item">Item Seven</div>
  <div class="item">Item Eight</div>
  <div class="item">Item Nine</div>
  <div class="item">Item Ten</div>
</div>

You could use nth-child in the sass to avoid having to give numerical class names to the items, and also do 0%,100% … to save duplicating the two identical animation states.

@peteaylward Thanks Pete ;) on Sunday, no less!
Also a shoutout to @pandalion for her comments on Twitter ;)