Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

CSS3 podział dla animacji

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

CSS3 podział dla animacji

Post 21.10.2013, 13:02:27

Witam

Posługuję się programem WYSIWYG w którym obecnie tworzę stronę internetową. Wszystko robie w ramach nauki, stworzyłem layout w photoshopie gdzie również porobiłem buttony. Wszystko ładnie ułożyłem a następnie przeszedłem do zrobienia animacji w zakładce CSS3 animation. Problem jest taki że gdy robię dla pojedyńczych buttonów animację to jest ona na wszystkich. Przykładowo mam 5 x buttonów gdzie na button 1 ustawiam jedną animację a na button 2 już inną to działają w tym samym czasie. Każdy button ma swój odnośnik do jakiejś strony, źle wygląda to, jeżeli klikam nagle wszystkie na raz ukazują swoją animację, daje to efekt jakby wszystkie na raz działały a mi chodzi, aby każdy był osobno. Proszę o pomoc.
Contritio
Posty: 66
Dołączył(a): 21.10.2013

Re: CSS3 podział dla animacji

Post 21.10.2013, 14:17:48

Nie wiem co za program, ale spróbuj zastosować oddzielne identyfikatory do każdego buttonu lub lepiej klasy.
Avatar użytkownikaJaason
Tomasz Waszkiewicz

capoeirista
capoeirista

Posty: 3511
Dołączył(a): 14.04.2002
Lokalizacja: Warszawa

Re: CSS3 podział dla animacji

Post 21.10.2013, 14:57:07

wrzuce kod, może coś przedstawi
HTML
body
{
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
}
</style>
<link href="Bez_nazwy1.css" rel="stylesheet" type="text/css">
<style type="text/css">
#Image1
{
border: 0px #000000 solid;
}
#Image2
{
border: 0px #000000 solid;
}
#Image3
{
border: 0px #000000 solid;
-webkit-animation: animate-fade-in 500ms linear 0ms 1 normal;
-moz-animation: animate-fade-in 500ms linear 0ms 1 normal;
-ms-animation: animate-fade-in 500ms linear 0ms 1 normal;
animation: animate-fade-in 500ms linear 0ms 1 normal;
}
#Image3:disabled
{
background-color: #FFFFFF;
-webkit-transition: background-color 500ms linear 0ms;
-moz-transition: background-color 500ms linear 0ms;
-ms-transition: background-color 500ms linear 0ms;
transition: background-color 500ms linear 0ms;
}
#Image4
{
border: 0px #000000 solid;
-webkit-animation: animate-fade-in 500ms linear 0ms 1 normal;
-moz-animation: animate-fade-in 500ms linear 0ms 1 normal;
-ms-animation: animate-fade-in 500ms linear 0ms 1 normal;
animation: animate-fade-in 500ms linear 0ms 1 normal;
}
#Image5
{
border: 0px #000000 solid;
-webkit-animation: animate-fade-in 500ms linear 0ms 1 alternate;
-moz-animation: animate-fade-in 500ms linear 0ms 1 alternate;
-ms-animation: animate-fade-in 500ms linear 0ms 1 alternate;
animation: animate-fade-in 500ms linear 0ms 1 alternate;
}
#Image6
{
border: 0px #000000 solid;
-webkit-animation: animate-fade-in 500ms linear 0ms 1 normal;
-moz-animation: animate-fade-in 500ms linear 0ms 1 normal;
-ms-animation: animate-fade-in 500ms linear 0ms 1 normal;
animation: animate-fade-in 500ms linear 0ms 1 normal;
}
#Image7
{
border: 0px #000000 solid;
}
</style>
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:990px;height:760px;z-index:0;">
<img src="images/projekt1%20copy.png" id="Image1" alt="" style="width:990px;height:760px;"></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:0px;width:559px;height:133px;z-index:1;">
<img src="images/projekt1_01.gif" id="Image2" alt="" style="width:559px;height:133px;"></div>
<div id="wb_Image3" style="position:absolute;left:481px;top:152px;width:140px;height:15px;z-index:2;">
<a href="./strona1.html"><img src="images/Obsluga.png" id="Image3" alt="" style="width:140px;height:15px;"></a></div>
<div id="wb_Image4" style="position:absolute;left:149px;top:154px;width:140px;height:15px;z-index:3;">
<a href="./strona1.html"><img src="images/Internet.png" id="Image4" alt="" style="width:140px;height:15px;"></a></div>
<div id="wb_Image5" style="position:absolute;left:287px;top:154px;width:90px;height:15px;z-index:4;">
<a href="./strona1.html"><img src="images/Dedyki.png" id="Image5" alt="" style="width:90px;height:15px;"></a></div>
<div id="wb_Image6" style="position:absolute;left:637px;top:151px;width:150px;height:20px;z-index:5;">
<img src="images/Tworzenie.png" id="Image6" alt="" style="width:150px;height:20px;"></div>
<div id="wb_Image7" style="position:absolute;left:385px;top:153px;width:90px;height:15px;z-index:6;">
<a href="./strona1.html"><img src="images/VPS.png" id="Image7" alt="" style="width:90px;height:15px;"></a></div>
</body>
</html>

CSS
@-webkit-keyframes animate-fade-in
{
0% { opacity: 0; }
100% { opacity: 6; }
}
@-moz-keyframes animate-fade-in
{
0% { opacity: 0; }
100% { opacity: 5; }
}
@-o-keyframes animate-fade-in
{
0% { opacity: 0 }
100% { opacity: 4; }
}
display: block;
@-ms-keyframes animate-fade-in
{
0% { opacity: 0; }
100% { opacity: 3; }
}
@keyframes animate-fade-in
{
0% { opacity: 0; }
100% { opacity: 2; }
}
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
h1
{
font-family: Arial;
font-size: 32px;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #000000;
background-color: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
h2
{
font-family: Arial;
font-size: 27px;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #000000;
background-color: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
h3
{
font-family: Arial;
font-size: 24px;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #000000;
background-color: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
h4
{
font-family: Arial;
font-size: 21px;
font-weight: normal;
font-style: italic;
text-decoration: none;
color: #000000;
background-color: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
h5
{
font-family: Arial;
font-size: 19px;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #000000;
background-color: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
h6
{
font-family: Arial;
font-size: 16px;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #000000;
background-color: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
.CustomStyle
{
font-family: "Courier New";
font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #000080;
background-color: transparent;
}
Contritio
Posty: 66
Dołączył(a): 21.10.2013

Re: CSS3 podział dla animacji

Post 21.10.2013, 16:48:40

Czy mógłbyś przełożyć to na działający przykład np. tutaj http://jsfiddle.net/ (kopiujesz kod w odpowiednie okienka i Run, jak wszystko działa Save i wklejasz link.
Ułatwi to weryfikację kodu i znacząco wpłynie zapewne na szybkość pojawiania się porad :)
Avatar użytkownikaJaason
Tomasz Waszkiewicz

capoeirista
capoeirista

Posty: 3511
Dołączył(a): 14.04.2002
Lokalizacja: Warszawa

Re: CSS3 podział dla animacji

Post 25.10.2013, 15:20:55

Temat do zamknięcia. Samemu udało mi się rozwiązać problem :)
Contritio
Posty: 66
Dołączył(a): 21.10.2013


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50460 zarejestrowanych użytkowników.
Najnowszy użytkownik: GwenSDickey


Nasi użytkownicy napisali:

  • 935696 wiadomości
  • w 246595 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)