Construisez facilement des animations CSS avec Animista

Il y a des tonnes d'applications web d'animation CSS en ligne. Mais très peu comparent au niveau de détail et à la facilité d'utilisation que vous obtenez avec Animista.

Cette application Web gratuite vous permet générer des animations CSS personnalisées au clic d'un bouton. Vous choisissez entre des mouvements prédéfinis tels que des diapositives, des transformations, des balançoires et même des animations de gouttes.

Une fois que vous avez créé votre animation, vous pouvez exporter le code comme avec d'autres générateurs CSS. Sauf que, ce code est beaucoup plus facile à utiliser et même vient avec un outil de minifier intégré.

L’interface peut sembler déroutante au début, mais c’est uniquement en raison du nombre d’options disponibles.!

Vous construisez des animations personnalisées trois étapes principales et en utilisant l'interface du haut jusqu'en bas:

1. Choisissez un style de mouvement (balancer, glisser, basculer-échelle) des cercles en haut
2. Personnalisez-le avec différents types de mouvement sous
3. Modifier vos options d'animation dans la barre d'options gauche flottante

Grâce à ce processus, vous pouvez modifier la durée totale de l'animation, le style d'accélération, le délai, à peu près tout. Et tout ça fonctionne en CSS3 pur, ce qui le rend encore plus impressionnant.

Notez également que tout en haut de la barre de navigation, vous pouvez même choisir entre différents types de styles de cible d'animation.

le la valeur par défaut est “de base” qui peut fonctionner sur à peu près n'importe quoi (survol, clic ou animation immédiate). Les autres cibles comprennent texte de page, animations en arrière-plan et même des animations d'entrée personnalisées pour afficher un élément de page masqué.

J'aime particulièrement le “attention” lien en haut qui contient des effets de shake & jitter sympas pour les styles de boutons. Ceux-ci fonctionnent parfaitement sur les boutons CTA pour attirer l’attention et encourager les interactions des utilisateurs.

Une fois que vous avez terminé les ajustements, il vous suffit de cliquez sur la petite icône de support dans le coin supérieur droit du volet de visualisation.

Cela fait apparaître une nouvelle page avec votre classe d'animation CSS complète, ainsi que les images clés. Les fonctionnalités optionnelles vous permettent de minifier le code et inclure le préfixeur automatique qui supporte les anciens navigateurs web.

J'ai utilisé des tonnes d'outils d'animation CSS personnalisés et il ne fait aucun doute qu'Animista est l'outil le plus riche en fonctionnalités. C'est totalement gratuit et un peu complexe au début, mais une fois que vous avez compris l'interface, c'est de loin le meilleur générateur que vous puissiez utiliser..

Pour l'essayer, il suffit de visiter la page d'accueil et de cliquer sur “Essaie-moi”. Vous pouvez également partager vos pensées et vos compliments avec le créateur de l'application Web @ ana108..