Problema transition css3

Fai una domanda Tutte le categorie
qadesh1
qadesh1
29 nov 2014, 14:57
salve a tutti .Ho un problemino nell'implementazione di un effetto rollover in css3.
Quello che vorrei fare è aumentare le dimensioni del link sopra il quel passo il mouse di 1,2 volte la dimensione in una transizione che dura un secondo.Quello che succede è che la transizione avviene nel tempo stabilito ma, una volta trascorso il secondo,pur mantenendo il cursore del mouse sempre sul link,le dimensioni tornano quelle di partenza.
Posto il codice:

<html>


<head>
      <title>prova</title>
      <style>
         
       

         .box{ width:800px;
                     height:50px;
                     border:thin solid black;
                     text-align:center;
                     margin:auto;
                     
                
                         
                    }

         .box a {
                         color: gray;
                         font-weight: 900;
                         text-shadow: none;
                         text-decoration:none;
                         
                      }



         .box a:hover{transition-duration: 1s;
                      transition-property: transform;
                      transform:scale(1.2);
                      
                      color:red;
                       }

          

        </style>
       </head>
     <body>
         
          <div class="box">

<a href="#" >Desultory</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Sumptuous</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Scintilla</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Propinquity</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Harbinger</a>

</div>

    </body>
  </html>


cosa non va?
tra l'altro con firefox non funziona...come mai???
Risposte
Studente Anonimo
Studente Anonimo
30 nov 2014, 01:39
Ciao, prova ad aggiungere queste due regole al selettore box.a:

display:inline-block;                                                  
position:relative;

"qadesh":
tra l'altro con firefox non funziona...come mai???

A me funziona con la modifica precedente. Al limite prova ad aggiungere prima delle seguenti due regole:

transition: transform 1s;                                               
transform:scale(1.2);

le stesse prefissate con -moz-, -webkit-, -ms-, -o-.

[_url=http://jsfiddle.net/nivit/0s9wk6av/3/:39kjprgo]Demo[/_url:39kjprgo]
Rispondi
Per rispondere a questa discussione devi prima effettuare il login.