perché non è specificata una durata per l'animazione, prova a inserire per .fadeInLeftOriginariamente inviata da loSte
codice HTML:animation-duration:2s; -webkit-animation-duration:2s;
perché non è specificata una durata per l'animazione, prova a inserire per .fadeInLeft
codice HTML:animation-duration:2s; -webkit-animation-duration:2s;
non c'è verso che funzioni
Questo è qullo che ho modificato (la parte dei keyframe non l'ho toccata)
codice HTML:.fadeInLeft { background-color: #CC99FF; width:400px; height:300px;/* puramente indicativi */ -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; animation-duration: 5s; /* l'ho provato anche a scrivere in questo modo -> fadeInLeft 5s */ -webkit-animation-duration: 5s; /* l'ho provato anche a scrivere in questo modo -> fadeInLeft 5s */ } <body> <div style="margin: 0 100; background-color:#FCC; padding:30px" <div class="fadeInLeft">Ciao</div> </body>
A me funziona senza problemi (firefox, chrome e safari, non ho testato con Opera ma dovrebbe andare anche lì, con IE dovrebbe andare con la versione 11).
Il codice è esattamente quello, comunque te lo reinserisco tutto:
codice HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> <!-- @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeInLeft { 0% { opacity: 0; -ms-transform: translateX(-20px); } 100% { opacity: 1; -ms-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; -webkit-animation-duration:5s; animation-duration: 5s; width:400px; height:400px; background-color:#0099FF } --> </style> </head> <body><div class="fadeInLeft">Ciao</div> </body> </html>
Ora funziona anche a me !?
Provo a spulciare il codice per capire perchè non funzionava.
Grazie
mi sono accorto che se cancello lo stile dell'animazione "fadein"
funziona tutto!!! Ora mi piacerebbe scoprire il motivo…codice HTML:#mioDiv { background-color: #CC99FF; width:400px; height:300px;/* puramente indicativi */ -webkit-animation: fadein 5s; -moz-animation: fadein 5s; -ms-animation: fadein 5s; -o-animation: fadein 5s; animation: fadein 5s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
non ti seguo, stiamo parlando del mio esempio o del tuo? Il mio funzionava e variava solo la trasparenza, il tuo aveva anche un effetto di movimento ma era privo di indicazioni sulla durata delle animazioni e aggiunte quelle funziona pure lui. Non so ora cosa stai facendo
Scusami se ti risponso solo ora… mi spiego meglio
Premesso che ora funziona tutto, l'effetto "fadeinLeft" non funzionava se nel foglio stile era presente il tuo effetto "faidin".
Riguardando meglio il codice mi sono accorto di avre combinato un pasticcio, ripulito il tutto funziona perfettamente.
Grazie molte per l'aiuto.
Permessi di invio
Rispondi quotando