Effetto CSS sempre attivo

**Marco.Maffei-12** · 04-02-2014, 22:57

Salve a tutti, è possibile applicare un effetto CSS sempre attivo a un elemento? Per esempio un'immagine che ruota e non si ferma mai e che l'effetto non abbia inizio per forza con il verificarsi di un evento (es: #elem:hover)...

**giulio_74** · 04-02-2014, 23:51

non mi pare pero puoi utilizare javascript o semplicemente una gif animata a secondo di cosa devi fare .

**Marco.Maffei-12** · 05-02-2014, 00:35

Originariamente inviata da giulio_74

non mi pare pero puoi utilizare javascript o semplicemente una gif animata a secondo di cosa devi fare .

Ho un'immagine, vorrei farla brillare, poi tornare normale e poi di nuovo brillare, all'infinito. Javascript non so usarlo e la maniera più semplice è con CSS se questo è possibile. L'effetto deve cominciare appena si carica la pagina...

**Prill** · 05-02-2014, 10:22

Un esempio:

codice HTML:

<style type="text/css">
<!--

@-webkit-keyframes blink {
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink {
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
.fading {
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;
    
-moz-animation-direction: normal;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out;    
}
-->
</style>
</head>

<body>
<img class="fading" src="miaImmagine.estensione" alt="">

giocando con questi valori

codice HTML:

0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}

puoi regolare la trasparenza, puoi anche modificare la durata (animation-duration). La compatibilità non è crossbrowser.
Per fare ciò che devi in maniera economica sicuramente la soluzione migliore, come diceva giulio74 è la gif animata

**giulio_74** · 05-02-2014, 16:31

crei una gif animata con ciclo infinito inpostando il cambiamento di immagini sullo stato hover da css
o con js

**Marco.Maffei-12** · 13-02-2014, 17:01

Creo una gif animata e dove posso stilizzo con css. Il codice mi è comunque utile. Grazie a entrambi

Discussione: Effetto CSS sempre attivo

Strumenti discussione

Ricerca discussione

Visualizza

Effetto CSS sempre attivo

Tag per questa discussione

Permessi di invio