5 Replies Latest reply on Feb 24, 2015 4:42 PM by ypunto

    how can I make an animation run when the mouse is over?

    ypunto

      Hi

       

      I'd like an animation to run when the mouse is ove it?

      I suppose it is a behaviors matter, but I cannot find it.

       

      Thanks in advance

       

      Aurelio

        • 1. Re: how can I make an animation run when the mouse is over?
          ypunto Level 1

          Hi

           

          WITH FIREWORKS I'd like an animation to run when the mouse is ove it?

          I suppose it is a behaviors matter, but I cannot find it.

           

          Thanks in advance

           

          Aurelio

          • 2. Re: how can I make an animation run when the mouse is over?
            Herbert2001 Level 4

            That is not directly supported in Fireworks. However, you could export the animation as an animated gif first, then create a new file with a slice and a static (non-animated) version of your animation.

             

            Add a roll over behaviour, and replace with your animated version.

             

            But honestly, you should solve this in html and CSS(3). It is very simple to do, and does not require any javascript.

            I extended an existing Fiddle that demonstrates how to create a CSS3 animation with a hover effect for you.

            http://jsfiddle.net/gp0v87sj/1/

            • 3. Re: how can I make an animation run when the mouse is over?
              ypunto Level 1

              Thank you very much Herbert!

               

              Aurelio

               

              El 05/02/2015, a las 13:40, Herbert2001 <forums_noreply@adobe.com> escribió:

               

              how can I make an animation run when the mouse is over?

              created by Herbert2001 <https://forums.adobe.com/people/Herbert2001> in Fireworks - View the full discussion <https://forums.adobe.com/message/7166688#7166688>

              That is not directly supported in Fireworks. However, you could export the animation as an animated gif first, then create a new file with a slice and a static (non-animated) version of your animation.

               

               

              Add a roll over behaviour, and replace with your animated version.

               

               

              But honestly, you should solve this in html and CSS(3). It is very simple to do, and does not require any javascript.

               

              I extended an existing Fiddle that demonstrates how to create a CSS3 animation with a hover effect for you.

               

              http://jsfiddle.net/gp0v87sj/1/ <http://jsfiddle.net/gp0v87sj/1/>

              If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/7166688#7166688 and clicking ‘Correct’ below the answer

              Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:

              Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/7166688#7166688

              To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"

              Start a new discussion in Fireworks by email <mailto:discussions-community-fireworks@adobe-v7.hosted.jivesoftware.com> or at Adobe Community <https://forums.adobe.com/choose-container.jspa?contentType=1&containerType=14&container=22 32>

              For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624 <https://forums.adobe.com/thread/1516624>.

               

              • 4. Re: how can I make an animation run when the mouse is over?
                ypunto Level 1

                Hi Herbert

                 

                I’ve followed your instructions and everything is ok, but If I change the width of the animation PNG it does not.

                Would you mind take a look at:

                 

                http://www.cristalum.com.mx/animation/animation1.html

                 

                 

                I think I need one

                 


                 

                 

                @keyframes play {

                 

                 

                   from { background-position:    0px; }

                 

                 

                     to { background-position: -1008px; }

                 

                 

                }

                 

                 

                for each animation, but I don’t know if it is possible.

                 

                Thanks in advance

                 

                Aurelio Pérez

                 

                Just in case, here is the CCS file:

                 

                 

                 

                /* double doors */

                .sh-d-a {

                    width: 84px;

                    height: 90px;

                    background-image: url("http://www.cristalum.com.mx/animation/Shutter-doble-abatible.png");

                    background-position: top left;

                }

                 

                 

                .sh-d-a:hover {

                    width: 84px;

                    height: 90px;

                    background-image: url("http://www.cristalum.com.mx/animation/Shutter-doble-abatible.png");

                   

                /*  -webkit-animation: play .8s steps(10) infinite;  */

                    -webkit-animation: play .8s steps(12) ;

                       -moz-animation: play .8s steps(12) ;

                        -ms-animation: play .8s steps(12) ;

                         -o-animation: play .8s steps(12) ;

                            animation: play .8s steps(12) ;

                }

                 

                 

                @-webkit-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -1008px; }

                }

                 

                 

                @-moz-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -1008px; }

                }

                 

                 

                @-ms-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -1008px; }

                }

                 

                 

                @-o-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -1008px; }

                }

                 

                 

                @keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -1008px; }

                }

                 

                 

                 

                 

                /* doors */

                 

                 

                .sh-a {

                    width: 50px;

                    height: 90px;

                    background-image: url("http://www.cristalum.com.mx/animation/Shutter--abatible.png");

                    background-position: top left;

                }

                 

                 

                .sh-a:hover {

                    width: 50px;

                    height: 90px;

                    background-image: url("http://www.cristalum.com.mx/animation/Shutter--abatible.png");

                   

                /*  -webkit-animation: play .8s steps(10) infinite;  */

                    -webkit-animation: play .8s steps(12) ;

                       -moz-animation: play .8s steps(12) ;

                        -ms-animation: play .8s steps(12) ;

                         -o-animation: play .8s steps(12) ;

                            animation: play .8s steps(12) ;

                }

                 

                 

                @-webkit-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -600px; }

                }

                 

                 

                @-moz-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -600px; }

                }

                 

                 

                @-ms-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -600px; }

                }

                 

                 

                @-o-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -600px; }

                }

                 

                 

                @keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -600px; }

                }

                 

                 

                 

                 

                 

                 

                /* The original */

                 

                 

                .hi {

                    width: 50px;

                    height: 72px;

                    background-image: url("http://s.cdpn.io/79/sprite-steps.png");

                    background-position: top left;

                }

                 

                 

                .hi:hover {

                    width: 50px;

                    height: 72px;

                    background-image: url("http://s.cdpn.io/79/sprite-steps.png");

                   

                /*  -webkit-animation: play .8s steps(10) infinite;  */

                    -webkit-animation: play .8s steps(10) ;

                       -moz-animation: play .8s steps(10) ;

                        -ms-animation: play .8s steps(10) ;

                         -o-animation: play .8s steps(10) ;

                            animation: play .8s steps(10) ;

                }

                 

                 

                @-webkit-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -500px; }

                }

                 

                 

                @-moz-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -500px; }

                }

                 

                 

                @-ms-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -500px; }

                }

                 

                 

                @-o-keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -500px; }

                }

                 

                 

                @keyframes play {

                   from { background-position:    0px; }

                     to { background-position: -500px; }

                }

                .

                 

                • 5. Re: how can I make an animation run when the mouse is over?
                  ypunto Level 1

                  Hi

                   

                  I found the answer at:

                       How: have more than one CSS sprite on a page

                   

                  Thanks

                   

                  Aurelio