Est-il possible d'inspecter CSS3 animation d'images clés avec un navigateur inspecteur?
J'ai rencontré un certain nombre de sites, aujourd'hui, que de profiter de CSS3 image clé de style d'animation, et a décidé de le tester sur mes propres sites. Cependant, ce qui m'amène à un dilemme: d'Habitude avant de me commettre un fichier CSS pour le site, je vais utiliser le navigateur de l'inspecteur (Ctrl+Shift+I
sur Chrome, Opera et FF; F12
dans IE) à tweack et modifier le CSS en local pour voir ce que j'aime le mieux. Toutefois, il semble que il n'y a pas moyen de modifier les images clés d'un CSS3 animation avec le navigateur inspecteur! C'est une extrême hinderance pour moi, car cela m'oblige à commettre un fichier CSS à chaque fois que je veux changer de toute nuance de l'animation, qui est également livré avec un maximum de 15 minutes de retard à partir du serveur. Est il possible que je puisse modifier localement le CSS3 animation d'images clés à l'aide du navigateur de l'inspecteur?
Vous devez vous connecter pour publier un commentaire.
Sur Chrome:
- Ctrl+Maj+I
- Choisir un élément
- colonne de droite: cliquez sur les css-lien (par exemple style.css:24)
- Maintenant, vous pouvez modifier votre css-fichier
Notes:
- Vous ne pouvez pas modifier le code css dans la colonne de droite et dans la css de fichiers en même temps
- De relancer l'animation, retirez -webkit-animation:... et l'ajouter
Huzzah hoorah et hourra! C'est tout à fait possible aujourd'hui! Chrome Dev Tools ajouté un onglet Animation! Il suffit d'ouvrir les outils de dev et cliquez sur cette petite beauté: Et une suite complète d'outils sympas sont disponibles pour le débogage des animations 😀
Depuis Chrome 50 il est enfin possible de modifier le code CSS les images clés.
https://twitter.com/ChromeDevTools/status/694966453376675840
Si vous voulez encore plus de contrôle, téléchargement de google Chrome Canary (64 bits nécessaire, je crois). Il y a un petit bouton "play" et un ajustement du temps de sorte que vous pouvez ralentir l'animation et de la mettre en pause quand vous le souhaitez. Assez cool!
Vidéo d'instruction
Bientôt, grâce au Chrome Dev Tools Chronologie d'Animation.
Jusqu'à présent, il est seulement ce teaser vidéo: https://www.youtube.com/watch?v=U9xfYbKxosI