Forum PHP.pl > [CSS]Animacja ikonki

Pomoc - Szukaj - Użytkownicy - Kalendarz

david8213

28.03.2020, 08:38:56

Zrobiłem animację jak poniżej. Jak zrobic żeby się ta animacja powtarzała
Co wpisać zamiast 100 powtorzeń ?

[XML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 300px;
  background: white;
  position: relative;
  animation: myfirst 5s 100;
  animation-direction: alternate;
}
 
@keyframes myfirst {
  0%    { left: 10px; top: 10px; transform: scale(0.5); background-image: url("telefon.png");}
  50%   { left: 10px; top: 10px;transform: scale(0.7);background-image: url("telefon.png");}
  100%  { left: 10px; top: 10px;transform: scale(0.5);background-image: url("telefon.png");}
}
</style>
</head>
<body>
 
<div></div>
 
</body>
</html>
[XML] pobierz, plaintext

viking

28.03.2020, 09:11:11

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

trueblue

28.03.2020, 09:28:20

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

david8213

28.03.2020, 09:38:45

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

Juz jest OK. Dzięki

[XML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 300px;
  background: white;
  position: relative;
  animation: myfirst 2s infinite;
  animation-direction: alternate;
  text-decoration: none;
  border-style: none;
  border-style: hidden;
}
 
@keyframes myfirst {
  0%    { transform: scale(0.5); background-image: url("telefon.png");}
  50%   { transform: scale(0.7);background-image: url("telefon.png");}
  100%  { transform: scale(0.5);background-image: url("telefon.png");}
}
</style>
</head>
<body>
 
<a href="tel:+48111222333"><div></div></a>
 
</body>
</html>
[XML] pobierz, plaintext

trueblue

28.03.2020, 09:42:27

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.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.