Michal.witkowski.bb@gmail.com www.linkedin.com/in/themichalwitkowski
Efekt przejscia Jedną z nowości jaką została dodana w CSS jest właściwość transi:on. Wspomniana właściwość pozwala nam utworzyć pewien efekt animacji. Animacja będzie prezentować zmianę wartości określonych właściwości CSS w drugie.
Co się stało się?
Dodaj duration, kolejno 1s, 2s, 3s, 4 s
Co jeszcze transiton-property właściwość określa właściwość CSS która ma brać udział w efekcie przejścia transi:on-dura:on czas trwania przejścia transi:on-:ming-func:on opóźnienie efektu przejścia transi:on tutaj możemy ująć wszystkie powyższe właściwości
transiton-property
Transition-timing-function
Transition-timing-function ease wolno, szybko, wolno linear taka sama predkość cały czas ease-in powolny start ease-out powolny koniec ease-in-out powolny start i koniec cubic-bezier(n, n, n, n) sam/sama definiujesz prędkość
transition-delay
A tu kongo
Jeszcze bardziej animacje! Do języka CSS co jakiś czas dodawane są bajery. Kolejna to animacja, wykorzystujemy właściwość anima:on
Zalegle zadanie z guzikiem Aby to zadziałało musisz upchnąć element, element:aser, element:before w elemencie o zdefiniowanych wymiarach. Musisz korzystać z-index aby napis był najwyżej, biały, różowy na innych płaszczyznach. Za pomocą before i aser musisz narysować elementy które zawierają się w rodzicu i maja pozycje absolute i mają width/ height 100%. Na hover muszą się przesuwać, jeden z opóźnieniem, drugi bez. Content musi być żeby powstało cokolwiek. Do dzieła! Praca w grupach 2 osobowych jak coś pomogę.
Właściwości anima:on-dura:on czas trwania animacji anima:on-:ming-func:on tempo animacji anima:on-delay opóźnienie animacji anima:on-itera:on-count ilość powtórzeń animacji anima:on-direc:on kierunek powtarzania się animacji anima:on-fill-mode dodatkowy wygląd elementu HTML, przed lub po animacji anima:on-play-state zatrzymanie lub wznowienie animacji
Nazwa animacji Na początku za pomocną anima:on możemy nazwać sobie naszą animacje (anima:on-name). Musimy ją jednak utworzyć tu wchodzi @keyframes. Do dzieła!
Pierwsza animacja @keyframes moja_animacja { 0% {background-color:white;} 25% {background-color:blue;} 50% {background-color:green;} 75% {background-color:gold;} 100% {background-color:yellow;} }
Dodajemy ją potem do naszej klasy anima:on:moja_animacja 12s infinite;
% z 12s, zobacz jak zachowa się dla innych czasów i innych %
Inna animacja
Właściwości rozpoznaj je
Delay działa tylko raz!
Zadanie Zrób pasek postępu, który będzie ładował się od 0% do 100% Niech zmienia kolor co 20%.
Animation-timing-function Tutaj możemy zmieniać tempo animacji tak samo jak w transi:on.
Kolejność anima:on: anima:on-name anima:on-dura:on anima:on-:ming-func:ons anima:on-delay anima:on-itera:on-count anima:on-direc:o anima:on-fill-mode
Zatrzymanie animacji na hover
Animacje 2D / transformacje Żeby podejść do tematu musimy ustalić sobie takie rzeczy, jak punkt zero, oś X, oś Y Oś X jak w matematyce oś pozioma Oś Y jak w matematyce oś pionowa Punkt zero miejsce przecięcia się osi x z osią y
Mając kwadrat Width: 120px; height 120px; border 3px solid gold
Oś X według HTML przechodzi przez jego środek
Oś Y według HTML przechodzi przez jego środek
Punkt zero
Do dzieła Skoro już wiemy jak HTML się z nami porozumiewa, obróćmy nasz kwadrat
Dużo właściwości translatex (x) przesunięcie po osi X translatey (y) przesunięcie po osi X translate (x, y) przesunięcie po osi X i Y scalex(x) powiększenie szerokości scaley(y) powiększenie wysokości scale(x,y) powiększenie wysokości i szerokości skewx(x) pochylenie w prawo lub lewo skewy(y) pochylenie w dół lub górę skew(x, y) nie pytajcie jak to opisać, pochylenie wszędzie! rotate(n) obrót
No to ciach! Translate(x, y) Translate(150px, 200px)
Translate(150px, 200px)
Scale(x,y)
Scale(4, 5.5)
skewx(60deg)
skewy(60deg)
Skew(45deg, 30deg) Uwaga! Tutaj jak przesadzicie to obiekt zniknie
Kolejność anima:on: anima:on-name anima:on-dura:on anima:on-:ming-func:ons anima:on-delay anima:on-itera:on-count anima:on-direc:o anima:on-fill-mode
Kolejność przekształceń
Zadanie Animujemy loadera: ) Pokażę jak mi to wyszło. Rozpiszę jak podejść do problemu. Poradzicie sobie z resztą.