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.