Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    CSS3: animation funziona solo su Firefox

    Ciao a tutti,
    ho questo semplice codice che anima lo sfondo:

    codice:
    @-moz-keyframes onde-div {
    	0% {
        	background-position: 0 0;
    	}
    	100% {
        	background-position: 100% 0;
    	}
    }
    
    
    @keyframes onde-div{
    	0% {background-position: 0 0; }
    	100%{ background-position:100% 0; }
    	}
    
    #animate-area { 
    	width: 200px; 
    	height: 200px; 
    	border-radius: 50%;
    	border: 3px solid #CCC;
    	background-image:url(onde3.png);
    	background-position: 0px 0px;
    	background-repeat: repeat-x;
    
    	animation: 5s linear 0s normal none infinite onde-div;
    	-webkit-animation: 5s linear 0s normal none infinite onde-div;
    }
    ..ma funziona solo su firefox.
    Come mai?
    Ho provato a controllare per filo e per segno sul sito del W3C, ma non riesco a venirne fuori.

    Grazie per l'aiuto!

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Stai usando estensioni moderne, non supportate da tutti i browser.

    Prova a vedere le tabelle di compatibilita` dei vari attributi CSS
    (mi par di ricordare che W3schools.com le aveva - non so se sono aggiornate - altrimenti cerca in rete tali tabelle)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Per IE, hai ragione: @keyframe viene supportato solo da IE10 in poi, ma per gli altri dovrebbe funzionare tutto bene, anche perché se controllo alcuni esempi su internet che utilizzino @keyframe e animation, funzionano alla perfezione.

  4. #4

    RISOLTO!

    Ho risolto.
    Mancava un:

    codice:
    @-webkit-keyframes onde-div {
    	0% {
        	background-position: 0 0;
    	}
    	100% {
        	background-position: 100% 0;
    	}
    }
    Grazie comunque al tuo suggerimento ho imparato a controllare sempre la versione supportata su w3cschools!

    Spero possa essere utile anche ad altri utenti.

    Ciao!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.