Dans le script ci-dessous, on crée tout d'abord un disque et un rectangle.
Le script fait ensuite évoluer les attributs de ces deux figures. Le code duration(5000) précise que l'évolution se fera sur un temps de 5000 ms (soit 5 secondes).
Vous pouvez relancer l'animation en rechargeant la page (cliquez sur la flèche 
dans la barre d'adresse du navigateur).
Nous avons vu ci-dessus comment préciser le temps pour l'évolution des valeurs d'attributs. Nous pouvons également donné un temps avant le démarrage de l'évolution.
Ci-dessous, nous reprenons le code précédent, mais nous ajoutons un délai pour l'évolution du rectangle avec la fonction delay(). Le temps de passage d'une valeur à l'autre de chacun des attributs sera le même que précédemment, mais cette évolution commence plus tardivement (ici avec un retard de 2 secondes sur les évolutions du disque).
Un autre exemple avec du texte :
On peut également enchaîner les transitions comme le montre l'exemple ci-dessous : on commence par changer la couleur de bleu à orange (temps de 1s), puis une transition sur la position et la taille a lieu (durée 5s) et finalement on réattribue la couleur intiale (de façon instantanée).
Si on veut utiliser une transition ou une partie d'une transition sur plusieurs objets différents, on peut l'enregistrer dans une variable.
Dans l'exemple ci-dessous, le temps est commun aux deux modifications.
On peut mettre en oeuvre en début et fin d'une transition des effets en utilisant start et end comme dans l'exemple qui suit où l'on rend transparent le rectangle avant la transition principale puis on le rend à nouveau opaque en fin de transition.