Michał Witkowski.

Transkrypt

1

2 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.

3 Co się stało się?

4 Dodaj duration, kolejno 1s, 2s, 3s, 4 s

5 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

6 transiton-property

7 Transition-timing-function

8 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ść

9 transition-delay

10 A tu kongo

11 Jeszcze bardziej animacje! Do języka CSS co jakiś czas dodawane są bajery. Kolejna to animacja, wykorzystujemy właściwość anima:on

12 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ę.

13 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

14 Nazwa animacji Na początku za pomocną anima:on możemy nazwać sobie naszą animacje (anima:on-name). Musimy ją jednak utworzyć tu Do dzieła!

15 Pierwsza moja_animacja { 0% {background-color:white;} 25% {background-color:blue;} 50% {background-color:green;} 75% {background-color:gold;} 100% {background-color:yellow;} }

16 Dodajemy ją potem do naszej klasy anima:on:moja_animacja 12s infinite;

17 % z 12s, zobacz jak zachowa się dla innych czasów i innych %

18 Inna animacja

19 Właściwości rozpoznaj je

20 Delay działa tylko raz!

21 Zadanie Zrób pasek postępu, który będzie ładował się od 0% do 100% Niech zmienia kolor co 20%.

22 Animation-timing-function Tutaj możemy zmieniać tempo animacji tak samo jak w transi:on.

23

24 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

25 Zatrzymanie animacji na hover

26 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

27 Mając kwadrat Width: 120px; height 120px; border 3px solid gold

28

29 Oś X według HTML przechodzi przez jego środek

30 Oś Y według HTML przechodzi przez jego środek

31 Punkt zero

32 Do dzieła Skoro już wiemy jak HTML się z nami porozumiewa, obróćmy nasz kwadrat

33 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

34 No to ciach! Translate(x, y) Translate(150px, 200px)

35 Translate(150px, 200px)

36 Scale(x,y)

37 Scale(4, 5.5)

38 skewx(60deg)

39 skewy(60deg)

40 Skew(45deg, 30deg) Uwaga! Tutaj jak przesadzicie to obiekt zniknie

41 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

42 Kolejność przekształceń

43 Zadanie Animujemy loadera: ) Pokażę jak mi to wyszło. Rozpiszę jak podejść do problemu. Poradzicie sobie z resztą.