< Pete Goodman Web developer >

Labs - CSS3 Transition blocks

Sunday 5th December 2010, 10:05

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.)

0

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

Here is a full-screen version that randomises the block transitions each time the page is refreshed. The source code for this example is here.

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


<p id="element-1" class="el">1</p>

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


@-webkit-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;
        -webkit-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;
        -webkit-transform: scale(0.69) rotate(337deg);
    }
}

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

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

Comments

Be the first person to comment on this lab...

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.