Valeur de cette activité : 5 points
Compétence :
28 : L'animation CSS

A-Module 03 : CSS : 5 points - difficulté : 2

L'animation CSS

Présentation

Le langage CSS permet maintenant d'animer les différents éléments d'une page web, Cette activité vous permettra de découvrir les fonctions d'animation du langage CSS.
ATTENTION : ces nouvelles propriétés css ne fonctionneront pas dans tous les navigateurs web.
Vous pouvez répéter ce travail 3 fois en utilisant une animation différente pour chacun des travaux présentés.

Description

L'animation CSS

  1. Ajoutez une page à votre portfolio en affichant la directive 77521
  2. Affiche les assistants et
  3. Inscrivez le titre : L'animation CSS
  4. Inscrivez dans le champ section : MODULE CSS
  5. Inscrivez dans le champ matière : Informatique
  6. Inscrivez dans le champ No de la directive : 77521
  7. Inscrivez dans votre page le titre de niveau 1 : L'animation CSS
  8. Ajoutez dans votre page, sous le titre, une division ayant une classe nommée "anim" contenant ces propriétés css : 
    

<style>
.anim{
height:150px;
width:150px;
background:yellow;
}
</style>

<div class="anim">Animation Css</div>
  9. En utilisant un des sites suivants, insérez dans votre page le code CSS qui permettra d'animer une propriété de cette division :
    l'animation CSS de w3schools (suggéré)

    L'animation CSS

    Les transitions Css3

    http://www.the-art-of-web.com/css/css-animation/

    http://tobiasahlin.com/spinkit/

    Autre site utile pour l'animation CSS

    http://speckyboy.com/2015/01/07/css-transitions-transforms-animations/

    Recherche Google : css3 animation

  10. Visualisez votre page et apportez des modifications au besoin.