Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]Animacja ikonki
david8213
post
Post #1





Grupa: Zarejestrowani
Postów: 308
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ń ?
[XML] pobierz, plaintext 
  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>
[XML] pobierz, plaintext


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





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
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
Post #3





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
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
Post #4





Grupa: Zarejestrowani
Postów: 308
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

[XML] pobierz, plaintext 
  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>
[XML] pobierz, plaintext


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





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
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
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 22:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn