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

What are the steps to create offline documentation for sails.js?

Ways to modify the attribute of an element in an ImmutableList({}) nested within Immutable.Map({})

How do I reduce the size of a WinJS image file

What is the reason that selection disappears when right-clicking on highlighted text to bring up the context menu?

Interactive AJAX div click functionality

Delete the content on a webpage using an Ajax jQuery request to transfer it elsewhere

Is the term 'Literal' in Javascript Arrays simply referring to its dynamic nature, allowing it to be modified at any time?

There was an issue stating that valLists is not defined when paginating table rows with AngularJS and AJAX

Looking for assistance with implementing a jQuery function for an onClick event on

Utilizing jQuery's POST Method to Fetch JSON Data on a Website

Troubleshooting the issue of jQuery Ajax failing to deliver a PDF

Discover the name of a color using its HEX code or RGB values

Prevent any unauthorized modifications to the ID within the URL by implementing appropriate security measures

Tips on displaying an array of elements as a <Dialog> within a <List>

Utilize the Google Maps API to align an SVG symbol with the direction of an aircraft's

Looking to set up a layout with two columns in the first row and one column in the second row, then combine the two columns using HTML and CSS

Inconsistent CSS3 transitions behavior in Firefox 4

Is there a method to automatically create .stories.ts files in Angular Storybook?

Utilizing jQuery to Trigger a Click Event on an Element Without a Class

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off