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

Animation css

0 głosów
65 wizyt
pytanie zadane 6 dni temu w HTML i CSS przez Vorex444 Gaduła (4,600 p.)
Cześć, uczę sie js'a i css'a i robie pewną stronkę. Ogólnie chodzi mi o to, że po kliknięciu wybieram, pokazuje się na dole postać, która pojawia się z animacją. Ale mam pewien problem gdy ustawie w animation: ifninite to cały czas ta animacja sie wykonuje, a chce zrobić coś takiego, że gdy kliknę wybieram to ta animacja się wykona raz i po ponownym kliknieciu znowu sie wykona ale też raz.
Po prostu klikam wykonuje się raz, po ponownym kliknieciu znowu sie wykonuje raz.

Gdy robię takie coś:

animation: 1s bounceInLeft infinite linear; - nie działa poprawnie,

 animation: 1s bounceInLeft 1 linear; - nie działa poprawnie, raz się wykona, a gdy znowu klikam wybieram to juz sie animacja nie wykonuje.
komentarz 6 dni temu przez Karol Jankiewicz Mądrala (5,780 p.)
Jak łączysz kliknięcie z animacją? JS? Można kod poprosić?
komentarz 6 dni temu przez Vorex444 Gaduła (4,600 p.)
Po prostu divowi przypisałem animację i gdy kliknę button to wtedy pokazuje się na nim zdjęcie i w tym czasie wjezdza animacja,

function first()
{
    var answer = document.getElementById('answerr');
    answer.innerHTML = 'wybrales spider <br> <img src="spider.png"/>';
}

A div w ktorym pojawia się zdjecie wygląda tak

.answer
{
    display: inline-block;
    margin-top: 45px;
    margin-right: 20px;
    color: green;
    animation: 2s bounceInLeft 1 linear;
}
komentarz 6 dni temu przez Karol Jankiewicz Mądrala (5,780 p.)

Nie zgadzają się tu dwie rzeczy.

1.  JS używasz getElementById - czyli szukasz elementu o takim id a w CSS stylujesz klasę, czy faktycznie masz diva o id answer? 

Jeśli chcesz znaleźć element w js po klasie to używamy getElementsByClassName()

<div id="answer"></div> <- div z id answer

<div class="answer"></div>  <- div z klasą answer

 

2. Literówka document.getElementById('answerr');

komentarz 6 dni temu przez Vorex444 Gaduła (4,600 p.)
Tam jest celowo podane answerr kolego :D

Mam <div id="answerr" class="answer"></div>

Nie wiem czy rozumiesz, moje pytanie, wszystko działa, tylko chce zeby animacja sie raz wykonała po każdym kliknieciu, jak dam animation: 1s nazwa 1 linear;

to wtedy mi się raz wykona, ale gdy kliknie ponownie to już nie, dopiero po odswiezeniu strony.
1
komentarz 6 dni temu przez Noemi Pasjonat (18,000 p.)
to w takim razie nie ma sensu dawać dodatkowo id="answer", bo możesz pobrać element za pomocą klasy ;)
pokaż kod tej animacji
komentarz 6 dni temu przez Vorex444 Gaduła (4,600 p.)

Dobra mniejsza o to id nie drążmy, zajmijmy się tym o co pytałem :D hahah

Animacja:

 

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

 

1
komentarz 6 dni temu przez Noemi Pasjonat (18,000 p.)

tutaj jest dosyć jasno wyjaśnione o co chodzi z animacjami w CSS i są też podane rozwiązania Twojego problemu ;)
 

komentarz 6 dni temu przez Vorex444 Gaduła (4,600 p.)
dzieki :)

1 odpowiedź

+1 głos
odpowiedź 6 dni temu przez Lu Kiss Gaduła (4,400 p.)
taka ciekawostka

prefixy są już praktycznie standardem i można te wszystkie -webkit -moz itp wywalić, mniej kodu

http://caniuse.com/#search=transform

Podobne pytania

0 głosów
0 odpowiedzi 25 wizyt
pytanie zadane 6 listopada 2016 w OpenGL, Unity przez CzikaCarry Nałogowiec (43,320 p.)
0 głosów
1 odpowiedź 72 wizyt
pytanie zadane 14 listopada 2016 w HTML i CSS przez tarnasm Gaduła (3,010 p.)
0 głosów
1 odpowiedź 57 wizyt
pytanie zadane 25 sierpnia 2016 w HTML i CSS przez Alwox Gaduła (3,100 p.)
...