1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    3
    Vote Rating
    0
    mongoflex is on a distinguished road

      0  

    Default Hover fonction on a mutilple images animation.

    Hover fonction on a mutilple images animation.


    Hello !!

    I recently draw & animate a "sonar effect" icon ,made of 4 circles on a transparent background .
    I've used the Sencha animator prefix utility to have the CSS & HTML codes.
    Here's the code :

    Code:
    @charset "UTF-8";/* CSS Document */
    
    
    .sonar-stage {position: relative;  -webkit-transform-style:preserve-3d; overflow:hidden}
     .sonar-stage div {
     position: absolute;
     }
    
    
     .sonar-stage a {
    color: inherit;
     text-decoration:none;
    }
    
    
     .sonar-stage * {
    margin:0;
     padding:0;
     -webkit-font-smoothing: antialiased;
    }
    
    
    .sonar-stage{
     height: 200px;
    width: 200px;
    background-color: rgba(0,0,0,0);
    border:1px solid rgba(255,255,255,0);
     }
    
    
    #sonar-20{
     -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    width: 200px;
    height: 200px;
    top:0;
     left:0;
     }
    
    
    #sonar-21{
     -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    width: 200px;
    height: 200px;
    top:0;
     left:0;
     }
    
    
    #sonar-22{
     -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    width: 200px;
    height: 200px;
    top:0;
     left:0;
     }
    
    
    #sonar-23{
     -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    width: 200px;
    height: 200px;
    top:0;
     left:0;
     }
    
    
    @-webkit-keyframes sonar-ani-24 {
    0% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
     opacity:0;
    }
    0.01% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    opacity:1;
    }
    50% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.1500000000000001, 1.1500000000000001, 0);
    -webkit-animation-timing-function:ease-in;
    opacity:1;
    }
    100% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-out;
    opacity:1;
    }
    }
    
    
    .run #sonar-20 {
    -webkit-animation-name: sonar-ani-24;
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count:infinite;
    }
    .restart #sonar-20 {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    }
    @-webkit-keyframes sonar-ani-25 {
    0% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
     opacity:0;
    }
    0.01% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    opacity:1;
    }
    50% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.1500000000000001, 1.1500000000000001, 0);
    -webkit-animation-timing-function:ease-in;
    opacity:1;
    }
    100% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-out;
    opacity:1;
    }
    }
    
    
    .run #sonar-21 {
    -webkit-animation-name: sonar-ani-25;
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 2s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count:infinite;
    }
    .restart #sonar-21 {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    
    
    }
    @-webkit-keyframes sonar-ani-26 {
    0% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
     opacity:0;
    }
    0.01% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    opacity:1;
    }
    50% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.1500000000000001, 1.1500000000000001, 0);
    -webkit-animation-timing-function:ease-in;
    opacity:1;
    }
    100% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-out;
    opacity:1;
    }
    }
    
    
    .run #sonar-22 {
    -webkit-animation-name: sonar-ani-26;
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count:infinite;
    }
    .restart #sonar-22 {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    }
    @-webkit-keyframes sonar-ani-27 {
    0% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    }
    28.57% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.1500000000000001, 1.1500000000000001, 0);
    -webkit-animation-timing-function:ease-in;
    }
    57.14% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-out;
    }
    85.71% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.1500000000000001, 1.1500000000000001, 0);
    -webkit-animation-timing-function:ease-in;
    }
    100% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-out;
    }
    }
    
    
    .run #sonar-23 {
    -webkit-animation-name: sonar-ani-27;
    -webkit-animation-duration: 7s;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count:infinite;
    }
    .restart #sonar-23 {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.01, 0.01, 0);
    -webkit-animation-timing-function:ease-in;
    }
    HTML Code:
    <div class="sonar-stage run" id="ext-gen1450"><div class="AN-Object" id="sonar-20"><div id="sonar-val-20"><img src="assets/Sonareffectsmall.png"></div></div><div class="AN-Object" id="sonar-21"><div id="sonar-val-21"><img src="assets/Sonareffectsmall.png"></div></div><div class="AN-Object" id="sonar-22"><div id="sonar-val-22"><img src="assets/Sonareffectsmall.png"></div></div><div class="AN-Object" id="sonar-23"><div id="sonar-val-23"><img src="assets/Sonareffectsmall.png"></div></div></div>
    What i'm trying to do is to insert a hover function to make it appear -using opacity or whatever-
    I've tried many things to make it work, but only 1 picture out of 4 appears on hover.
    I've tried many many possibilities, but no one seems to work.
    Could somebody help me ????

    PS sorry 4 my poor english .

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    9
    arnebech will become famous soon enough

      0  

    Default


    Perhaps if you add this css code it might work:
    Code:
    #ext-gen1450 {
            opacity: 0;
            -webkit-transition: opacity 0.5s;
    }
        
    #ext-gen1450:hover {
            opacity: 1;
    }
    I also added a webkit-transition in there to make it a smooth transition.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    3
    Vote Rating
    0
    mongoflex is on a distinguished road

      0  

    Default


    It works thanks a lots !!!! What refers to "ext-gen" ???

  4. #4
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    9
    arnebech will become famous soon enough

      0  

    Default


    It refers to the id of the outermost element in this case. The ext-gen is a prefix used for auto-generating ids by the extjs library.

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    3
    Vote Rating
    0
    mongoflex is on a distinguished road

      0  

    Default


    Cheers for the explaination !!I'll dig it !!

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar