AnsweredAssumed Answered

CSS Transitions Triggered by User Events Using JavaScript

Question asked by jnickerson@bscs.org on Jun 29, 2016
Latest reply on Jun 30, 2016 by jnickerson@bscs.org

Greetings. I am trying to use JavaScript to trigger CSS animations to liven up our course a bit. The JavaScript is firing on the appropriate event and adding the correct class, but the CSS transitions seem to not work. Does Canvas have some way of filtering/blocking CSS transitions from custom style sheets that are uploaded?

 

 

For example I want to make a button "bounce" when a student hovers over it:

 

 

My style sheet contains a class called rubberBand (from Animate.css):

 

  @-webkit-keyframes rubberBand {

  from {

    -webkit-transform: scale3d(1, 1, 1) !important;

    transform: scale3d(1, 1, 1) !important; }

  30% {

    -webkit-transform: scale3d(1.25, 0.75, 1) !important;

    transform: scale3d(1.25, 0.75, 1) !important; }

  40% {

    -webkit-transform: scale3d(0.75, 1.25, 1) !important;

    transform: scale3d(0.75, 1.25, 1) !important; }

  50% {

    -webkit-transform: scale3d(1.15, 0.85, 1) !important;

    transform: scale3d(1.15, 0.85, 1) !important; }

  65% {

    -webkit-transform: scale3d(0.95, 1.05, 1) !important;

    transform: scale3d(0.95, 1.05, 1) !important; }

  75% {

    -webkit-transform: scale3d(1.05, 0.95, 1) !important;

    transform: scale3d(1.05, 0.95, 1) !important; }

  to {

    -webkit-transform: scale3d(1, 1, 1) !important;

    transform: scale3d(1, 1, 1) !important; } }

@keyframes rubberBand {

  from {

    -webkit-transform: scale3d(1, 1, 1) !important;

    transform: scale3d(1, 1, 1) !important; }

  30% {

    -webkit-transform: scale3d(1.25, 0.75, 1) !important;

    transform: scale3d(1.25, 0.75, 1) !important; }

  40% {

    -webkit-transform: scale3d(0.75, 1.25, 1) !important;

    transform: scale3d(0.75, 1.25, 1) !important; }

  50% {

    -webkit-transform: scale3d(1.15, 0.85, 1) !important;

    transform: scale3d(1.15, 0.85, 1) !important; }

  65% {

    -webkit-transform: scale3d(0.95, 1.05, 1) !important;

    transform: scale3d(0.95, 1.05, 1) !important; }

  75% {

    -webkit-transform: scale3d(1.05, 0.95, 1) !important;

    transform: scale3d(1.05, 0.95, 1) !important; }

  to {

    -webkit-transform: scale3d(1, 1, 1) !important;

    transform: scale3d(1, 1, 1) !important; } }

.rubberBand {

  -webkit-animation-name: rubberBand !important;

  animation-name: rubberBand !important; }

 

 

 

I am using a JavaScript function to add that class to an element when a user mouses over said element:

 

function animationHover(element, animation){

  element = $(element);

  element.hover(

    function() {

      element.addClass('animated ' + animation);

    },

    function(){

      //wait for animation to finish before removing classes

      window.setTimeout( function(){

        element.removeClass('animated ' + animation);

      }, 2000);

    }

  );

}

 

animationHover('#animation-play','rubberBand')

 

I have tested this outside of Canvas LMS and it works fine.

 

Thanks in advance for any helpful feedback.

Outcomes