CSS3 Transition Blocks

Overview

CSS3 transitions allow you to create animations without needing to use JavaScript. After reading an article on A List Apart I created a little experiment to test this.

The example below contains 25 blocks of different dimensions. Various CSS values are alternating between two states.

(At the moment this only works in Safari/Chrome, but these transitions will soon be available to most modern browsers.)

The code is straightforward, each block is a simple HTML element:

1
2
3
4
<p id="element-1" class="el">1</p>
<p id="element-2" class="el">2</p>
...
<p id="element-25" class="el">25</p>

For each element, two random sets of CSS properties (‘from’ and ‘to’) are generated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  @keyframes element-1-anim {
      from {
          background:rgba(96, 69, 248, 0.62);
          left:79%;
          top:89%;
          width:23px;
          height:53px;
          z-index:26;
          line-height:53px;
          opacity:0.47;
          text-shadow: rgba(8, 60, 23, 0.83) 9px -7px 7px;
          transform: scale(0.56) rotate(65deg);
      }
      to {
          background:rgba(100, 165, 96, 0.77);
          left:65%;
          top:66%;
          width:95px;
          height:53px;
          z-index:45;
          line-height:53px;
          opacity:0.81;
          text-shadow: rgba(7, 20, 87, 0.48) 6px -2px 5px;
          transform: scale(0.69) rotate(337deg);
      }
  }

  p#element-1 {
      animation-name: element-1-anim;
      animation-duration: 5s;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
  }

The list of CSS properties that can be adjusted shows what is possible with CSS3 transitions.