Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> CSS - keyframes
soliniak
post 17.02.2017, 19:38:55
Post #1





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 8.08.2009

Ostrzeżenie: (0%)
-----


Wieczór,

Jak pozbyć się tej pauzy w trakcie animacji?
Klik

Dzięki za pomoc, pozdrawiam.
Go to the top of the page
+Quote Post
trueblue
post 17.02.2017, 19:45:03
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Zmienić easing na linear, albo zmienić klatki na 0 -20px, 50% 20px, 100% -20px


--------------------
Go to the top of the page
+Quote Post
soliniak
post 17.02.2017, 21:09:02
Post #3





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 8.08.2009

Ostrzeżenie: (0%)
-----


Zależy mi aby punkty przemieszczały się płynnie w odniesieniu do osi (zaznaczyłem na czerwono).
Ustawiając punkt startu na -20px wychodzi lipa. Linear nie wygląda tak dobrze jak ease.
Klik
Go to the top of the page
+Quote Post
trueblue
post 17.02.2017, 22:19:03
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


W zerze będzie przy 25%, czyli trzeba opóźnić o 0.15.
Kod
animation: plemnik .6s ease ($i/10 - 0.15)+s infinite;
Tak?


--------------------
Go to the top of the page
+Quote Post
soliniak
post 17.02.2017, 22:24:39
Post #5





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 8.08.2009

Ostrzeżenie: (0%)
-----


Niestety nie działa prawidłowo. Nawet po wyłączeniu opóźnienia wszystkie punkty poruszając się równocześnie "zacinają" się w momencie przejścia 100% a 0%.
Efekt jest minimalny ale irytujący :/
Go to the top of the page
+Quote Post
trueblue
post 17.02.2017, 22:34:22
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


W Twoim przykładzie nadal ramki są na 0, 33, 66 i 100%.


--------------------
Go to the top of the page
+Quote Post
soliniak
post 17.02.2017, 22:43:08
Post #7





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 8.08.2009

Ostrzeżenie: (0%)
-----


Tak. link: http://codepen.io/anon/pen/jyoGOr
Go to the top of the page
+Quote Post
trueblue
post 17.02.2017, 22:46:45
Post #8





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Ale ja to wiem.
Zmień tak jak pisałem.


--------------------
Go to the top of the page
+Quote Post
soliniak
post 17.02.2017, 23:00:44
Post #9





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 8.08.2009

Ostrzeżenie: (0%)
-----


Chodzi Ci o to żeby kod wyglądał tak?
http://codepen.io/anon/pen/jyoGOr?editors=0110
Go to the top of the page
+Quote Post
trueblue
post 17.02.2017, 23:02:04
Post #10





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Tak.
Co jest nie tak?


--------------------
Go to the top of the page
+Quote Post
soliniak
post 17.02.2017, 23:19:37
Post #11





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 8.08.2009

Ostrzeżenie: (0%)
-----


Animacja nie zaczyna się od "punktu startowego" czyli na osi linii tylko punkty spadają jakby z góry, a niestety nie o to mi chodzi sad.gif
Chcę żeby animacja zaczynała się w miejscu "spoczynku" punktów na osi linii, a potem trwała nieprzerwanie i płynnie.
Chyba będę musiał zadowolić się linear'em jako animation-timing-function :/

Ten post edytował soliniak 17.02.2017, 23:21:05
Go to the top of the page
+Quote Post
trueblue
post 18.02.2017, 10:13:45
Post #12





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


http://codepen.io/anon/pen/RKmJqP?editors=0110


--------------------
Go to the top of the page
+Quote Post
soliniak
post 18.02.2017, 12:14:12
Post #13





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 8.08.2009

Ostrzeżenie: (0%)
-----


Wciąż się zacina...
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:32