Having trouble getting CSS3 Keyframes to function properly?

Question

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet:

.startanimation {
    height: 100px;
    width: 100px;
    background: yellow;
    -webkit-animation: animate 1s infinite;
}

@-webkit-keyframes animate {
    100% {
        width: 300px;
        height: 300px;
    }
}

When applying the "startanimation" class directly in HTML, the animation works fine. However, when using the "addClass" method to add the same class to another element dynamically, the animation fails to work. Any suggestions on how to resolve this issue?

javascript jquery css animation css-animations

Answer 1

Answer №1

Check out this demonstration - http://example.com/demo

$('#play').on('click', function() {
  $('#element').addClass('animate')
})
$('#pause').on('click', function() {
  $('#element').removeClass('animate')
})

#element {
  background: blue;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 100px;
}
.animate {
  height: 150px;
  width: 150px;
  background: red;
  animation: play 2s infinite;
}
@keyframes play {
  100% {
    width: 250px;
    height: 250px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="play">Play</button>
<button id="pause">Pause</button>
<br>
<br>
<div id="element"></div>

Answer 2

Check out this demonstration - http://example.com/demo

$('#play').on('click', function() {
  $('#element').addClass('animate')
})
$('#pause').on('click', function() {
  $('#element').removeClass('animate')
})

#element {
  background: blue;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 100px;
}
.animate {
  height: 150px;
  width: 150px;
  background: red;
  animation: play 2s infinite;
}
@keyframes play {
  100% {
    width: 250px;
    height: 250px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="play">Play</button>
<button id="pause">Pause</button>
<br>
<br>
<div id="element"></div>

Having trouble getting CSS3 Keyframes to function properly?

Answer №1

Similar questions

Puzzled by the unexpected error I encountered while using Node.js (require.js)

Utilize Bootstrap and Flat UI to enhance the design of a div, or duplicate the styles to apply to the navbar

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

What is the process for adding submitted data to an already-existing local JSON file?

What is the best way to choose a key from a discriminated union type?

The button fails to trigger the AJAX request

When the Model popup is activated, it is essential for elements to have an adequate color contrast

Optimal method for parsing URLs using ES6

Encountering a TypeError when attempting to read the property 'name' of undefined while submitting a form in node.js

Do matrix filters in IE7 take into account white space sensitivity?

Exploring High-Density Mobile Devices with Bootstrap 3 Landscape Mode

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

What is the best way to invoke a Rest API within a Vue component?

The error message UnhandledPromiseRejectionWarning is triggered due to a TypeError stating that the function authenticate is

Exploring JavaScript Regular Expressions in Internet Explorer 11

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

Obtaining the most recent commit date through the Github API

Python program that creates a spinning equilateral triangle

Exploring the efficiency of AngularJS when binding to deeply nested object properties

JavaScript closures and the misinterpretation of returning values