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
    10
    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
    10
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi