3 Replies Latest reply on Oct 5, 2014 11:41 AM by resdesign

    How I add @keyframe rules for Edge Animate?

    Mariian

      Hi,

       

      I'm trying to spin (y-asis) a 3D cube (4 sides) infinite side by side and I think I need @keyframes rules for animation.

       

      What is syntax for that in Edge Animate? Should I use external css-file or what?

       

      I find also to some jQuery tips for this incremental 3D cube--> jquery - Rotating a CSS3 3d cube with javascript - Stack Overflow

      but I don't know how I write this syntax in Animate..

       

       

      -Mariian-

        • 1. Re: How I add @keyframe rules for Edge Animate?
          resdesign Adobe Community Professional & MVP

          HI there,

          What do you have for you cube? png files? In which case you need to create a symbol with all your images and have the display on/off for each image and then a loop.

          An easier way yet would be to use edgehero.com pluggin for Animate and make  the cubes with it (see turtorial there). This is all done for you!

           

          cubes.png

          • 2. Re: How I add @keyframe rules for Edge Animate?
            Mariian Level 1

            Hi resdesign,

             

            Yes, I need to create 3d cube with four image and I want them to loop. I'm using edgehero.js file and I have container-div with class "perspective_1000px center" and inside container I have cube-div with class "cube3d" and inside cube I have these six side and four of them (for y-axis) are images.

             

            Sorry, but what you mean part about "you need to create a symbol with all your images and have the display on/off for each image and then a loop"

             

            -Mariian-

            • 3. Re: How I add @keyframe rules for Edge Animate?
              resdesign Adobe Community Professional & MVP

              THe display on/off was meant to png sequence for a cube but if you need edgehero then you do not need that.

               

              All you have to do is create your images and group them in a div and group this div into another div. Add the necessary classes for each div.

              Then this should work properly.

               

              There should be some sample files on edgeHero.com

               

              If you need I could send you a sample.