Quel workflow pour l’animation chez Novius ?

Quel wokflow pour l’animation chez Novius ?

• Explorer, trouver le contexte et vendre
• Conception, prototype et design
• Développement et industrialisation

Les animations CSS

1. Pourquoi animer ?

1.1. Fonctionnalité

• Optimiser l'expérience utilisateur
• Faire paraitre les choses plus fluides / rapides
• Attirer l'attention sur une fonctionnalité critique / un message
• Apporter un feedback visuel sur une action silencieuse (préparer l'utilisateur aux actions futures)

1. Pourquoi animer ?

1.2. Matérialité

• Apporter de la consistance, de la cohérence
• Quitter le côté abstrait pour se rapprocher de la vie de tous les jours (vélocité, gravité, inertie, etc)
• Être cohérent et ne pas faire d'erreur (au risque de sonner faux)

1. Pourquoi animer ?

1.3. Effet "wow"

• Apporter le petit plus qui fait la différence
• Faire passer le produit pour quelque chose de soigné, d'abouti, de moderne ("effet Apple" Tony ❤)

1. Pourquoi animer ?

1.4. Principes

• Partir d'un point A vers un point B
• Être fluide et linéaire
• Faire des transitions qui ont du sens

2. Comment ça marche ?

2.1. Transitions CSS

La propriété transition se décompose ainsi :

• transition-property : propriété(s) CSS à modifier
• transition-duration : temps total de la transition
• transition-timing-function : méthode d’interpolation
• transition-delay : temps avant transition

2. Comment ça marche ?

2.1. Transitions CSS

2. Comment ça marche ?

2.1. Transitions CSS

transition: width 2s ease-in-out 3s;

transition: background-color 300ms ease;

transition: all 100ms ease-in-out;

transition: opacity 0.2s ease-in-out,
            color 0.4s ease-in-out;

/* color, background-color, background-image, border,
font-size, width, height, margin, padding, opacity, etc */

2. Comment ça marche ?

2.1. Transitions CSS

img {
    transition: transform 300ms ease;

    &:hover {
        transform: scale(1.2) rotate(-10deg);
    }
        
}

CodePen

2. Comment ça marche ?

2.2. Animations CSS

2. Comment ça marche ?

2.2. Animations CSS

La propriété animation se décompose ainsi :

• animation-name : nom de l'animation
• animation-duration : temps total de l’animation
• animation-timing-function : méthode d’interpolation
• animation-iteration-count : nombre de répétition de l’animation (infinite)
• animation-direction : sens de l'animation
• animation-delay : temps avant animation
• animation-fill-mode : conservation de l’état de l’animation (avant ou après)

2. Comment ça marche ?

2.2. Animations CSS

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

img {
    animation: hide 2s ease-in infinite;
}

CodePen

Pour conclure...

2. Comment ça marche ?

2.2. Animations CSS

(Là on doit faire une ouverture)

Et pour la suite ?