Demo:

jQuery

CSS

Przezroczystość
Przesuwanie

Pozostałe wybrane elementy animacji css

Zaokrągalnie ramek Zamiana koloru tła Rotacja Efekty na tekście

eWeb Design

Każda strona internetowa w mniejszym, lub większym stopniu zawierają elementy animacji. Zazwyczaj są to skrypty Java Script, jQuery.
Występują przypadki, że nie na rękę jest nam używać skryptów z różnych powodów. I co w takim przypadku, jeśli chcemy, żeby nasza strona zawierała drobne animacje? Można zastąpić je stylami CSS, oczywiście tam gdzie to możliwe, a możliwości są w większości przypadków odpowiednie.

Przezroczystość

Przezroczystość jest bardzo często wykorzystywana w galerii, na obrazkach na całej stronie, w elementach, gdzie jakiś element posiada tło. Jest to z pewnością jedna z najczęściej nierozchwytywany funkcji.
Bardzo łanie przezroczystość wygląda jak się napisze skrypt w jQuery, wtedy po najechaniu, czy kliknięciu przezroczystość animuje się do odpowiednich parametrów.
W stylach css wprowadzenie wyłącznie atrybutu opacity: sprawia, iż nasz element będzie miała przezroczystość, ale żadnej animacji. Można jednak temu zaradzić, i wprowadzić jeszcze jeden parametr, który sprawi, że nie będzie różnicy między animacją w jQuery a css .

   transition: all .8s ease-in-out;
   opacity:0.5;

Przesuwanie elementu

Wydaje się, że animacja elementu w dowolną stronę, a więc płynne przesunięcie jest możliwe tylko za pomocą skryptów jQuery ten jest w błędzie. CSS3 daje takie możliwości poprzez kilka parametrów.

   -webkit-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   -o-transition: 1s ease-in-out;
   transition: 1s ease-in-out;

   -webkit-transform: translate(3em,0);
   -moz-transform: translate(3em,0);
   -o-transform: translate(3em,0);
   -ms-transform: translate(3em,0);
   transform: translate(3em,0);

Operacje na ramkach

Możliwość kombinacje na ramkach za pomocą stylów css są bardzo duże. Ja poniżej przytoczę jeden przykład, który w płynny sposób zaokrągla rogi ramki. Za animację odpowiada dokładnie te same parametry co wyżej. Jedyną dodatkową zmianą jest dodanie atrybutu, który zaokrągla rogi.

   -webkit-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   -o-transition: 1s ease-in-out;
   transition: 1s ease-in-out;

   border-radius:10px;

Zmiana koloru tła

W tym zakresie pole do popisu jest również bardzo duże. Moja animacja jest tworzona za pomocą parametru animate-name, oraz drugiego parametru, który definiowany jest w pierwszym elemencie.

   animation-duration: 5s;
   animation-name: backme;

Pierwsza linia oznacza czas całej animacji a ostatnia linia kodu to nazwa funkcji, która odpowiada za zmianę koloru tła, a funkcja wygląda następująco:

@keyframes backme {
  from {
    background: #fff;
  }

  to {
    background: #DD0055;
  }
}

Składnia nie podobna może do styli css, ale myślę, że czytelna i nie ma w niej nic nadzwyczajnego. @keyframes jest wymagany i musi być przed nazwą.

Rotacja

Rotacja elementu nie jest tak bardzo popularna i nie zawsze jest potrzeba jej stosowania na stronie. Niemniej jednak, w pewnych sytuacjach może okazać się bardzo przydatna.

   -webkit-transform: rotate(70deg);
   -moz-transform: rotate(70deg);
   -o-transform: rotate(70deg);
   -ms-transform: rotate(70deg);
   transform: rotate(70deg);

Styl ten rotuje element o 70 stopni. Dodanie wyłącznie tego stylu do elementu, sprawi, że będzie on cały czas obrócony, jednak my chcemy, aby po najechaniu na dany element tworzyła się animacja, więc dodatkowo w stylach do klasy + :hover dodajemy znane nam już elementy:

   -webkit-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   -o-transition: 1s ease-in-out;
   transition: 1s ease-in-out;

Animacja tekstu

Animowane teksty to domena Flasha, jednak proste, ale funkcjonalne animacje możemy wykonać również za pomocą styli css. Oto jedna z wielu możliwych animacji tekstu, która to płynnie zwiększa czcionkę i zmienia kolor.

.ewd_font h3.ewd_css:hover
{
   transform: scale(1.2);
   color: #DD0055;
}

Wszystkie metody CSS3 funkcji Transition i Transform

  • Paramerty CSS3 transition:
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • Paramerty CSS3 transform::
  • matrix
  • translate
  • translateX
  • translateY
  • scale
  • scaleX
  • scaleY
  • rotate
  • skew
  • skewX
  • skewY

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code