Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Animacja ikonki
david8213
post 28.03.2020, 08:38:56
Post #1





Grupa: Zarejestrowani
Postów: 279
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Zrobiłem animację jak poniżej. Jak zrobic żeby się ta animacja powtarzała
Co wpisać zamiast 100 powtorzeń ?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 300px;
  8. background: white;
  9. position: relative;
  10. animation: myfirst 5s 100;
  11. animation-direction: alternate;
  12. }
  13.  
  14. @keyframes myfirst {
  15. 0% { left: 10px; top: 10px; transform: scale(0.5); background-image: url("telefon.png");}
  16. 50% { left: 10px; top: 10px;transform: scale(0.7);background-image: url("telefon.png");}
  17. 100% { left: 10px; top: 10px;transform: scale(0.5);background-image: url("telefon.png");}
  18. }
  19. </style>
  20. </head>
  21. <body>
  22.  
  23. <div></div>
  24.  
  25. </body>
  26. </html>


Ten post edytował david8213 28.03.2020, 08:46:31
Go to the top of the page
+Quote Post
viking
post 28.03.2020, 09:11:11
Post #2





Grupa: Zarejestrowani
Postów: 5 650
Pomógł: 961
Dołączył: 30.08.2006

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


Patrzyłeś w dokumentację?
https://developer.mozilla.org/en-US/docs/We...iteration-count


--------------------
Go to the top of the page
+Quote Post
trueblue
post 28.03.2020, 09:28:20
Post #3





Grupa: Zarejestrowani
Postów: 5 850
Pomógł: 1608
Dołączył: 11.03.2014

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


W jakim celu animujesz left, top i background-image, skoro nie zmieniają wartości?


--------------------
Go to the top of the page
+Quote Post
david8213
post 28.03.2020, 09:38:45
Post #4





Grupa: Zarejestrowani
Postów: 279
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


nie usunałem tego bo wczesniej miałem inną animację

Juz jest OK. Dzięki

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 300px;
  8. background: white;
  9. position: relative;
  10. animation: myfirst 2s infinite;
  11. animation-direction: alternate;
  12. text-decoration: none;
  13. border-style: none;
  14. border-style: hidden;
  15. }
  16.  
  17. @keyframes myfirst {
  18. 0% { transform: scale(0.5); background-image: url("telefon.png");}
  19. 50% { transform: scale(0.7);background-image: url("telefon.png");}
  20. 100% { transform: scale(0.5);background-image: url("telefon.png");}
  21. }
  22. </style>
  23. </head>
  24. <body>
  25.  
  26. <a href="tel:+48111222333"><div></div></a>
  27.  
  28. </body>
  29. </html>


Ten post edytował david8213 28.03.2020, 09:41:41
Go to the top of the page
+Quote Post
trueblue
post 28.03.2020, 09:42:27
Post #5





Grupa: Zarejestrowani
Postów: 5 850
Pomógł: 1608
Dołączył: 11.03.2014

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


Przy takich wartościach scale wystarczy zdefiniowanie jednej klatki animacji: https://kawalekkodu.pl/kulturysta-czyli-ani...-z-jedna-klatka

background-image nadal nie jest potrzebne.

Ten post edytował trueblue 28.03.2020, 09:42:54


--------------------
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: 31.05.2020 - 15:28