Effetti CSS3

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

Ciao a tutti, è possibile che il div di testo compaia con un effetto "fade in" al caricamento della pagina usando solo CSS3? (no js)
Vi chiedo questoperchè in tutti gli esempi che trovo in internet questo effetto è associato ad un stao :hover

Grazie

**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>

**danieleb74** · 11-03-2014, 18:24

Prova a dare un'occhiata a questo tool:
http://blog.html.it/20/02/2014/gener...ss3-animation/

**loSte** · 11-03-2014, 19:23

Veramente utile!!!!!
Ma l'ho provato per creare un'adnimazione fadein da sinistra e nella preview del tool funziona, ma se la metto in un nuovo file html la vedo solo come un semplice fade in da opacità 0 a 1 senza spostamento da sinistra a destra. Perche???

**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…

Discussione: Effetti CSS3

Strumenti discussione

Ricerca discussione

Visualizza

Effetti CSS3

Permessi di invio