[TuT] Dla nowizjuszy - Animacje CSS

[Fennec]

Animacje CSS

Co można wyczarować za pomocą CSS3

 

 

Dlaczego właśnie CSS?

Css jest kompatybilny na większości przeglądarek, jest prosty w obsłudze.

 

Jak to zrobić?

Na początku tworzymy obiekt do animacji w HTML(blok, paragraf, link itd.).

W pliku css definiujemy regułę w znaczniku, np.:

div{
-moz-animation: animacja 0.2s infinite;
-webkit-animation: animacja 0.2s infinite
-o-animation: 0.2s infinite;
animation: 0.2s infinite;
}

Teraz opiszę ją jak najlepiej:

1. 'div' to znacznik dopisujący regułę do obiektu(możemy również korzystać z 'class="klasa"', '.klasa' lub z  'id="identyfikator"', '#identyfikator'), po znaczniku regułę zaczynamy od klamry '{'.

2. 

-moz-animation: animacja 0.2s infinite;
-webkit-animation: animacja 0.2s infinite
-o-animation: animacja 0.2s infinite;
animation: animacja 0.2s infinite;

definicja animacji dla przeglądarek, parametry opisane tutaj:

animation: keyframes time loop

keyframes - odnośnik do animacji

time - prędkość animacji

loop - powtórzenie (infinite - nieskończoność lub liczba)

 

-DEFINICJA ANIMACJI-

@keyframes animacja
{
from {width:100px;}
to {width:300px;}
}
@-webkit-keyframes animacja
{
from {width:100px;}
to {width:300px;}
}
@-moz-keyframes animacja
{
from {width:100px;}
to {width:300px;}
}
@-o-keyframes animacja
{
from {width:100px;}
to {width:300px;}
}

Znaczniki: from - definicje CSS początkowe, to - definicje CSS po wykonaniu animacji.

 

Transitions - Czyli animacje po :hover

div{
background-color:black;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}

div:hover{
background-color:red;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}

1. div i div:hover to znaczniki, div z dodatkiem :hover definiuje znacznik o najechaniu myszką.

2. Elementy CSS w znacznikach definiują zwykłą zmianę

3. Elementy css w znacznikach zawierające 'transition' definiują animacje, podobnie jak wyżej, tylko, że z brakiem definicji animacji.

 

 

© desperek

[tls01]

Wątek dotyczy transition w CSS, więc nie będę zakładać nowego, tylko zapytam tutaj. 

 

Mam taki oto kod ma boczne "menu":

HTML:

 

 

<div id="left">
   <div class="slide">
      <img src="img/icons/ts.png" width="30" height="30" alt="ts" />
      <div class="text">Jeden<br />asdf</div>
   </div>
   <div class="slide">
      <img src="img/icons/fb.png" width="30" height="30" alt="fb" />
      <div class="text">Dwa<br />asdf</div>
</div>

 

 

CSS:

 

 

#left {
	position: fixed;
	margin: 0;
	padding: 0;
	left: 0px;
	top: 150px;
	z-index: 999;
}

.slide {
	width: 30px;
	height: 30px;
	overflow: hidden;
	margin-bottom: 3px;
	padding: 3px;
	color: #fff;
	transition: width 1s ease, opacity 2s ease;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	opacity: 0.5;
	background-color: #16171a;
}

.slide:hover {
	width: 100%;
	height: 30px;
	overflow: hidden;
	opacity: 0.8;
}

#left .text {
	float: right;
	display: none;
	padding: 3px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
}

#left .slide:hover > .text {
	display: block;
	color: #FFFFFF;
}

 

 

I teraz - po najechaniu na dowolny "przycisk" zaczyna się on rozsuwać, a następnie pojawia się w nim tekst. Problem w tym, że tekst pojawia się dopiero po całkowitym rozsunięciu "przycisku", a chciałbym, żeby tekst rozsuwał się "dynamicznie" - czyli aby odsłaniał się stopniowo, a nie dopiero po zakończeniu animacji.

Mam nadzieję, że udało mi się to wyjaśnić, chaotycznie, ale jednak.

 

btw. Dopiero uczę się CSS, więc, jeśli zobaczycie w kodzie coś, co nie ma najmniejszego sensu dajcie mi znać.