• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Prosta animacja CSS

Hosting forpsi easy 1 pln
0 głosów
105 wizyt
pytanie zadane 12 kwietnia 2019 w Offtop przez Maty Nowicjusz (190 p.)
Chce by container byl wyrownany i obracal sie w miejscu. POMOCY

#container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100px;
    height:100px;
    background:lime;
    border-radius:50%;
    animation:animation 5s infinite;
}
span{
    position:absolute;
    width:15px;
    height:15px;
    border-radius:50%;
    background:white;
}
span:nth-child(1){
    top:50%;
    left:20%;
    transform: translate(-50%, -50%);
}
span:nth-child(2){
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
span:nth-child(3){
    top:50%;
    left:80%;
    transform: translate(-50%, -50%);
}

@keyframes animation{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

1 odpowiedź

0 głosów
odpowiedź 12 kwietnia 2019 przez bartekDSAXN Użytkownik (560 p.)
Ale co nie działa? wrzuć to może do jsfiddle, albo innego online compilera i pokaż.
komentarz 12 kwietnia 2019 przez Maty Nowicjusz (190 p.)

Chodzi o to że gdy animacja jest podpięta do diva to on traci swój translate i ucieka na bok i do dołu.

Tu masz całość i rezultat

https://jsfiddle.net/matikster1/42arthLs/6/

komentarz 12 kwietnia 2019 przez bartekDSAXN Użytkownik (560 p.)
Nie wiem o Ci chodzi, a jaki ma być finalny efekt? Obraca się o 360stopni
komentarz 13 kwietnia 2019 przez Maty Nowicjusz (190 p.)
Obracać się obraca ale w "xd" jest zapisane transform:translate(-50%,-50%) a przez animacje to zanika i w całokształcie nie jest na środku
komentarz 13 kwietnia 2019 przez bartekDSAXN Użytkownik (560 p.)

@bartekDSAXN, to nie mam pojęcia o co Ci chodzi, jak chcesz coś przzesunąć, to możesz też użyć position: relative

Podobne pytania

0 głosów
0 odpowiedzi 301 wizyt
pytanie zadane 30 lipca 2018 w HTML i CSS przez atub Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 143 wizyt
pytanie zadane 30 stycznia 2021 w HTML i CSS przez x_000 Obywatel (1,460 p.)
0 głosów
1 odpowiedź 314 wizyt

92,105 zapytań

140,763 odpowiedzi

317,744 komentarzy

61,424 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 590p. - Łukasz Eckert
  2. 584p. - Dawid128
  3. 575p. - CC PL
  4. 571p. - TheLukaszNs
  5. 552p. - nidomika
  6. 546p. - Michal Drewniak
  7. 544p. - Mikbac
  8. 539p. - Eryk Andrzejewski
  9. 537p. - 13NOONE37
  10. 536p. - Arkadiusz Waluk
  11. 533p. - Henry Saele
  12. 525p. - sefirek
  13. 522p. - adrian17
  14. 514p. - rucin93
  15. 505p. - Adrian Wieprzkowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...