Dans ce chapitre, tu vas animer une boîte avec CSS et JavaScript ! On commencera par créer une boîte carrée avec <div> et CSS : width: 100px; height: 100px; background-color: purple;. Ensuite, tu apprendras à la faire grandir avec une animation CSS : @keyframes grandir { from { width: 100px; } to { width: 200px; } } et animation: grandir 2s infinite; pour qu’elle pulse sans arrêt. Puis, avec JavaScript, tu ajouteras un contrôle : un bouton pour la faire grandir ou rétrécir quand tu cliques. Tu utiliseras style.width = '150px' pour changer sa taille en direct, et une condition (if) pour alterner entre grand et petit : if (boite.style.width == '150px') { boite.style.width = '100px'; }. À la fin, ta boîte bougera toute seule et réagira à tes clics ! Tu pourras la personnaliser : change sa couleur, fais-la tourner avec transform: rotate(45deg);, ou ajoute un son. Ce projet t’apprendra à combiner des animations CSS et JavaScript pour rendre ton site vivant. C’est comme donner des superpouvoirs à une simple boîte – prépare-toi à t’amuser et à créer quelque chose de génial !
