Animation css

pytanie zadane 19 maja 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 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 19 maja 2017 przez niezalogowany

Jak łączysz kliknięcie z animacją? JS? Można kod poprosić?

komentarz 19 maja 2017 przez Vorex444 Dyskutant (9,610 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 19 maja 2017 przez niezalogowany

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 19 maja 2017 przez Vorex444 Dyskutant (9,610 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 19 maja 2017 przez imklau Nałogowiec (42,090 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 19 maja 2017 przez Vorex444 Dyskutant (9,610 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 19 maja 2017 przez imklau Nałogowiec (42,090 p.) tutaj jest dosyć jasno wyjaśnione o co chodzi z animacjami w CSS i są też podane rozwiązania Twojego problemu ;)