Un esempio:
giocando con questi valoricodice 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="">
puoi regolare la trasparenza, puoi anche modificare la durata (animation-duration). La compatibilità non è crossbrowser.codice HTML:0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;}
Per fare ciò che devi in maniera economica sicuramente la soluzione migliore, come diceva giulio74 è la gif animata
Rispondi quotando
