CODEWITHSUNDEEP
htmlcss
Thomas More
Thomas More

Reputation: 418

CSS animation keeps repeating

SOLVED

I wanted to slide an image to the top of the web page when I clicked on it, but that kept repeating. With the help of jdwallace12 and CSS-Tricks I solved my question by adding the jQuery code below and -webkit-animation-iteration-count: 1;

Here's my code:

HTML

<img id="slideFromBottom" src="..." alt="image">

CSS

#footer a:active img {
    animation-name: slideFromBottom;
    -webkit-animation-name: slideFromBottom;animation-duration: 1s;
    -webkit-animation-duration: 1s;animation-timing-function: ease;
    -webkit-animation-timing-function: ease;visibility: visible !important;
    -webkit-animation-iteration-count: 1;
}

@keyframes slideFromBottom {
    0% {-webkit-transform: translateY(0%);}
    100% {-webkit-transform: translateY(-1800%);}
}

@-webkit-keyframes slideFromBottom {
    0% {-webkit-transform: translateY(0%);}
    100% {-webkit-transform: translateY(-1800%);}
}

JQUERY

$("#slideFromBottom").click(function() {
    this.style.webkitAnimationPlayState = "running";

    $(this).on('webkitAnimationEnd', function() {
        this.style.webkitAnimationPlayState = "paused";
    });

});

Thank you!

Upvotes: 1

Views: 587

Answers (3)

amol
amol

Reputation: 1555

You can use jQuery for that, make a class for animation and add it to your image like

   .myClass{
      animation-name: slideFromBottom;
      -webkit-animation-name: slideFromBottom;animation-duration: 1s;
      -webkit-animation-duration: 1s;animation-timing-function: ease;
      -webkit-animation-timing-function: ease;visibility: visible !important;
    }

    $(".myClass").click(function() {          
       var el = $(this),  
       newone = el.clone(true); 
       el.before(newone);
       $("." + el.attr("class") + ":last").remove();
    });

Check this Demo

Upvotes: 1

jdwallace12
jdwallace12

Reputation: 127

have you tried

animation-iteration-count: 1;

or try

$(function() {
  $("#name_of_id").click(function() {
    var el = $(this);

    el.before( el.clone(true) ).remove();
  });
});

Upvotes: 0

s_ferdie
s_ferdie

Reputation: 56

You can use jQuery for that or perhaps a hover state which requires no jQuery

.animate-img {
  animation-name: slideFromBottom;
  -webkit-animation-name: slideFromBottom;animation-duration: 1s;
  -webkit-animation-duration: 1s;animation-timing-function: ease;
  -webkit-animation-timing-function: ease;visibility: visible !important;
}

$('img').on('click', function() {
  $(this).toggleClass('animate-img');       
}

Upvotes: 0

Related Questions