HTML -> CSS problem z animacją
Ostatnio zmodyfikowano 2014-01-23 21:52
Nekronomik Temat założony przez niniejszego użytkownika |
HTML -> CSS problem z animacją » 2014-01-23 18:36:29 Witam, problem jest taki że gdy najeżdżam myszką na menu google to pojawia się animacja , gdy myszke zabieram to od razu znika a powinna być animacja powrotna której nie ma. Animacja powrotna jest tylko wtedy gdy animacja dochodzi do końca. tu jest adres strony jak to wygląda : http://www.moje1991.aq.pl/. a tu kod index: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Zaczynamy !</title> <meta http-equiv="Refresh" content="100" /> <link href="arkusz.css" rel="stylesheet" /> </head> <body id="tldo"> <div id="ramka"> <div id="a1">H</div> <div id="a2"> <div id="a2-dziecko" alt="Google" title="Google" onclick="location.href='https://www.google.pl/'">Google</div> <div id="a2-dziecko"></div> <div id="a2-dziecko"></div> <div id="a2-dziecko"></div> </div> <div id="a3">H</div> <div id="pasek">http://www.moje1991.aq.pl/</div> </div> </body> </html> i kod arkusz.css
#a1
{
background-color:lightblue;
margin-top:10px;
margin-bottom:10px;
text-align:center;
width:20%;
height:25px;
position:relative;
left:40%;
transition-duration:3s;
-webkit-transition-duration:3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
-ms-transition-duration:3s;
}
#a1:hover
{
background-color:yellow;
width:100%;
left:0%;
}
#a2
{
text-align:center;
width:100px;
position:relative;
float:left;
cursor: pointer;
}
#a2-dziecko
{
background-image:url(menu.png);
height:25px;
transition-duration:1s;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-ms-transition-duration:1s;
-ms-transition-timing-function:linear;
}
#a2-dziecko:hover
{
background-image:url(menu_w.png);
}
#a3
{
background-color:orange;
width:80%;
height:100px;
position:relative;
float:left;
left:5%;
}
#ramka
{
background-color:snow;
border:1px ridge black;
box-shadow:0 0 6px black;
overflow:hidden;
position:relative;
width:65%;
height:auto;
left:17.5%;
}
#tlo
{
background-image:url(panele.png);
background-repeat:repeat-y;
background-position:center;
}
#pasek
{
background-color:lightblue;
margin-top:10px;
margin-bottom:10px;
width:100%;
text-align:center;
position:relative;
float:left;
}
Nie wiem też dlaczego wiersz z napisem H podczas animacji drga. |
|
SeaMonster131 |
» 2014-01-23 18:46:22 Ja robię to np w ten sposób: -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
|
|
Nekronomik Temat założony przez niniejszego użytkownika |
» 2014-01-23 19:11:17 Ten sam efekt występuje, nie wiem czemu ale na tej stronie wszystko działa http://kodcss.pl/kurs-css/dzial-1/efekt-przejscia-transition-css3. ------------- Zauważyłem że animacja nie do końca działa dla wczytanej grafiki : background-image:url(menu.png); jeśli chodzi o background-color: to nie ma problemów. Więc teraz jak ten problem rozwiązać... |
|
MrPoxipol |
» 2014-01-23 21:52:50 Na Aurorze 28.0a2 nie ma animacji dla 'google'. |
|
| « 1 » |