Effetti CSS3

**Prill** · 11-03-2014, 15:15

un esempio:

codice HTML:

...
<style type="text/css">
<!--
#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; }
}
-->
</style>
</head>

<body>
<div id="mioDiv"></div>
...

**loSte** · 11-03-2014, 16:13

Grazie molto gentile… se posso approfittare perchè con questo codice non funziona?

@-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 {
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;
}

<body>

<div class="fadeInLeft">Ciao</div>

</body>

**Prill** · 11-03-2014, 19:42

Originariamente inviata da loSte

perchè con questo codice non funziona?

perché non è specificata una durata per l'animazione, prova a inserire per .fadeInLeft

codice HTML:

animation-duration:2s;
    -webkit-animation-duration:2s;

**loSte** · 12-03-2014, 09:26

Originariamente inviata da Prill

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>

**Prill** · 12-03-2014, 09:58

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>

**loSte** · 12-03-2014, 10:44

Ora funziona anche a me !?

Provo a spulciare il codice per capire perchè non funzionava.

Grazie

**loSte** · 12-03-2014, 10:53

mi sono accorto che se cancello lo stile dell'animazione "fadein"

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; }
}

funziona tutto!!! Ora mi piacerebbe scoprire il motivo…

**Prill** · 12-03-2014, 11:33

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

Discussione: Effetti CSS3

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio