My idea is:

CSS Animation Editor

CSS frame-by-frame animation editor. I believe someone on devtools started this project (might have been Paul Rouget?) and I would love to see it resurrected.

173 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    afabbroafabbro shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    8 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • GayMailGayMail commented  ·   ·  Flag as inappropriate

        -----------------------------------------------------------------------------
        Hey! I am Tyler-D of Rapezilla! I love to put my holy Rapezilla cock in the pussies of girls of 6 years or in the mouth of 6-year old boys! Dear raped to the users, we hope you enjoy our bright and shiny cool Chrome clone, in the same way as we do ... In the same way as you do to enjoy sucking Google cock, in the same way as we do... Day to day, month to month, year by year! You users has to know, we are addicted to the money of Google and prostituting ourselves with a smile slasher always and forever!

        and never forget:

        Shit fucktards Mozilla nazis! Let the rape of 6-year children and mountain goats fucking pussies stupid! That ISIS decapitarlo and it will send you to hell damn infidels have no value! NAZICUNTS stupid! And as I do not support ISIS - The Russian troops should bomb that fucktards into oblivion after! Fuck Mozilla, fuck Isis, fuck America! God bless Russia and Russian people, fucktards!

        卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐

        TylerDMozilla, Justin Dolske, Gavin Sharp, Mattn, Blake Winton, Aza Dotzler, MSUJaws Dao Gottwald, UX-Team is a damn bitch to fuck in the ass! TylerDMozilla, Blake Winton, Aza Dotzler, Gavin Sharp, MSUJaws Dao Gottwald, UX-Team cool! Cool! Pimp shit! Cool! Assholes, sluts, whores suck my sons monster cock! Their cocks fucking sluts! TylerDMozilla, Justin Dolske, Gavin Sharp, Mattn, Blake Winton, Aza Dotzler, MSUJaws Dao Gottwald, UX-Team play with my two big golden bells of glory!

        Australis is for children, developed by Mozilla UX gay cock fuckers suck! To deepen the immersion of ass fucking idiots Google mindless austhistic! Assholes! Sluts! Cocksucking Freaks Google! Fuck sluts Googlezilla and go bankrupt! And take Australis fuck you, Gaylord! ! That our dear Lord God and jesus Christ send their decaying bodies straight to hell for touching the golden eggs Communities of glory! Fuck you and kiss Googles ass! If you like Chrome that much in both Australis cloning, you have to be serious and work for fucktards Chrome! Greetings from Spain, ChiliConCarne1

        卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐

        Fuck you pussies clone Mozilla Chrome!

        Ah Mozilla !!! Fuck Google Loving fascist anti customization! You idiots violas 4 years old mountain goats in the strength of the bitch Justin Dolske! Rapists fucking 4 years old mountain goats! Hey bitches! I shit on your fucking faces joes cheap!

        Hey! This is Gaywin ass Harp, one of the browsers Clone fresh chrome Devs of Mozilla! Bondage, unconditional lover gay friends Trashbin Porno-Dolske and Asshole Dotzler, they are the rapists of the mountain goat more hip in teh Universe! Mozilla is teh c-c-criminal most incredible o-o-oraganisation in the mountain goats v-v-violating b-b-business! That is cocksuckers right!
        -----------------------------------------------------------------------------

        ░░░░░░░░░░░▄▄▄▄▄
        ░░░░░░░▄▄█████████▄▄
        ░░░░▄▀▀▀▀█▀▀▀▀▀▀█████▄
        ░░▄██████░░░░░░░░░░░▀██
        ░▐██████▌░░░░░░░░░░░░░▐▌
        ░███████▌░░░░░░░░░░░░░░█
        ▐████████░░░░░░░░░░░░░░░█
        ▐██████▌░░░░░▄▀▀▀▀▀▄░▀░▄▄▌
        ░█▀▀███▀░░░░░░▄▀█▀░░░▐▄▄▄▌
        ▐░▌▀▄░░░░░░░░░░▄▄▄▀░░░▌▀░▌
        ░▌▐░░▌░░░░░░░░░░░▀░░░░▐░▐
        ░▐░▀▄▐░░░░░░░░░░░▌▌░▄▄░▐░▌
        ░░▀█░▄▀░░░░░░░░░▐░▐▄▄▄▄▀▐
        ░░░▌▀░▐░░░░░░░░▄▀░░▀▀▀▀░▌
        ░░░▐░░░░░░░░░▌░░░▄▀▀▀▀▄▐
        ░░░▌░░░░░░░░░▐░░░░░▄▄░░▌
        ░░█▀▄░░░▐░▐░░░░░░░░░░░█
        ░█░█░▀▀▄░▌░█░░░▀▀▄▄▄▄▀
        █░░░▀▄░░▀▀▄▄█░░░░░▄▀
        ░░░░░░▀▄░░░░▀▀▄▄▄▀▐
        █░░░░░░░▀▄░░░░░▐░▌▐
        ░█░░░░░░░░▀▄░░░▌░▐▌▐
        ░░█░░░░░░░░░█░▐░▄▄▌░█▀▄
        ░░░█░░░░░░░░░█▌▐░▄▐░░▀▄▀▀▄▄
        ░░░░█░░░░░░░░░▀▄░░▐░░░▀▄░░░▀▀▄▄
        ░░░░░▀▄░▄▀█░░░░░█░░▌░░░░▀▄░░░░░█

        ░░░░░░░░░░░▄▄▄▄▄
        ░░░░░░░▄▄█████████▄▄
        ░░░░▄▀▀▀▀█▀▀▀▀▀▀█████▄
        ░░▄██████░░░░░░░░░░░▀██
        ░▐██████▌░░░░░░░░░░░░░▐▌
        ░███████▌░░░░░░░░░░░░░░█
        ▐████████░░░░░░░░░░░░░░░█
        ▐██████▌░░░░░▄▀▀▀▀▀▄░▀░▄▄▌
        ░█▀▀███▀░░░░░░▄▀█▀░░░▐▄▄▄▌
        ▐░▌▀▄░░░░░░░░░░▄▄▄▀░░░▌▀░▌
        ░▌▐░░▌░░░░░░░░░░░▀░░░░▐░▐
        ░▐░▀▄▐░░░░░░░░░░░▌▌░▄▄░▐░▌
        ░░▀█░▄▀░░░░░░░░░▐░▐▄▄▄▄▀▐
        ░░░▌▀░▐░░░░░░░░▄▀░░▀▀▀▀░▌
        ░░░▐░░░░░░░░░▌░░░▄▀▀▀▀▄▐
        ░░░▌░░░░░░░░░▐░░░░░▄▄░░▌
        ░░█▀▄░░░▐░▐░░░░░░░░░░░█
        ░█░█░▀▀▄░▌░█░░░▀▀▄▄▄▄▀
        █░░░▀▄░░▀▀▄▄█░░░░░▄▀
        ░░░░░░▀▄░░░░▀▀▄▄▄▀▐
        █░░░░░░░▀▄░░░░░▐░▌▐
        ░█░░░░░░░░▀▄░░░▌░▐▌▐
        ░░█░░░░░░░░░█░▐░▄▄▌░█▀▄
        ░░░█░░░░░░░░░█▌▐░▄▐░░▀▄▀▀▄▄
        ░░░░█░░░░░░░░░▀▄░░▐░░░▀▄░░░▀▀▄▄
        ░░░░░▀▄░▄▀█░░░░░█░░▌░░░░▀▄░░░░░█

        ░░░░░░░░░░░▄▄▄▄▄
        ░░░░░░░▄▄█████████▄▄
        ░░░░▄▀▀▀▀█▀▀▀▀▀▀█████▄
        ░░▄██████░░░░░░░░░░░▀██
        ░▐██████▌░░░░░░░░░░░░░▐▌
        ░███████▌░░░░░░░░░░░░░░█
        ▐████████░░░░░░░░░░░░░░░█
        ▐██████▌░░░░░▄▀▀▀▀▀▄░▀░▄▄▌
        ░█▀▀███▀░░░░░░▄▀█▀░░░▐▄▄▄▌
        ▐░▌▀▄░░░░░░░░░░▄▄▄▀░░░▌▀░▌
        ░▌▐░░▌░░░░░░░░░░░▀░░░░▐░▐
        ░▐░▀▄▐░░░░░░░░░░░▌▌░▄▄░▐░▌
        ░░▀█░▄▀░░░░░░░░░▐░▐▄▄▄▄▀▐
        ░░░▌▀░▐░░░░░░░░▄▀░░▀▀▀▀░▌
        ░░░▐░░░░░░░░░▌░░░▄▀▀▀▀▄▐
        ░░░▌░░░░░░░░░▐░░░░░▄▄░░▌
        ░░█▀▄░░░▐░▐░░░░░░░░░░░█
        ░█░█░▀▀▄░▌░█░░░▀▀▄▄▄▄▀
        █░░░▀▄░░▀▀▄▄█░░░░░▄▀
        ░░░░░░▀▄░░░░▀▀▄▄▄▀▐
        █░░░░░░░▀▄░░░░░▐░▌▐
        ░█░░░░░░░░▀▄░░░▌░▐▌▐
        ░░█░░░░░░░░░█░▐░▄▄▌░█▀▄
        ░░░█░░░░░░░░░█▌▐░▄▐░░▀▄▀▀▄▄
        ░░░░█░░░░░░░░░▀▄░░▐░░░▀▄░░░▀▀▄▄
        ░░░░░▀▄░▄▀█░░░░░█░░▌░░░░▀▄░░░░░█

      • Camden NarztCamden Narzt commented  ·   ·  Flag as inappropriate

        Once this is underway, it would be great if one could stop the interval that is firing off the animations from within the tool, as it's often a framework that calls setInterval so I don't have the interval id to clear the interval.

      • Mircea PiturcaMircea Piturca commented  ·   ·  Flag as inappropriate

        Having CSS/SMIL/Element.animate under one umbrella would be amazingly useful for developers. As Patrick mentioned lots of features could be added from simple timeline inspection to a full fledged animation/interaction editor.

        As a developer I would be thrilled to have access to low lever Editor APIs from XPCOM or from a panel in DevTools. Please consider in making this extensible.

      • Patrick BrossetPatrick Brosset commented  ·   ·  Flag as inappropriate

        Great idea!
        I've started working on a backend for exposing the web animation API (that bug Paul mentioned) to the devtools. You can follow along at https://bugzilla.mozilla.org/show_bug.cgi?id=1096044.

        In terms of UI, I think one of the first steps we could take is show a mini timeline of running animations for the currently selected node in the inspector. This could be either a new sidebar or inside the "styles" tab, next to the "keyframes" section we already have for css animations.
        This timeline would allow for basic play/pause/seek functionality.

        I'd also love to see a more complete, more creative, tool in its own tab in the toolbox. Something that would sort of look like Flash or similar tools.
        There are so many features we could built in a tool like this.

      • Cédric NéhémieCédric Néhémie commented  ·   ·  Flag as inappropriate

        It surely would be great, I seriously miss the curves editor of 3dsmax back in my 3d days, would love to see that kind of things now that css animations are widely spread.
        Having a way to edit all the animated properties separately just by moving points of a curve will really allow for amazing animations to be created.

      Feedback and Knowledge Base