JS: Looking to add animation with a button click?

Question

JS: Looking to add animation with a button click?

Looking for feedback on my code to animate/colorify the div when clicking the 'Animate' button. Any suggestions or additional code are welcome!

This is how my code currently looks:

.anime {
  animation: coloranimate 5s;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="anime">
</div>
<button>Animate</button>

My goal is to add animation and color changes to the div by simply clicking the 'Animate' button.

javascript jquery html css

Answer 1

Answer №1

To trigger an animation, you can use the .addClass() method on a button click event. Once the class containing the animation properties is added, the animation will automatically start.

Check out the code snippet below:

$('button').click(function() {
  $('#anime').addClass("anime");
});

#anime {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

.anime {
  animation: coloranimate 5s;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime">
</div>
<button>Animate</button>

Answer 2

To trigger an animation, you can use the .addClass() method on a button click event. Once the class containing the animation properties is added, the animation will automatically start.

Check out the code snippet below:

$('button').click(function() {
  $('#anime').addClass("anime");
});

#anime {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

.anime {
  animation: coloranimate 5s;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime">
</div>
<button>Animate</button>

Answer 3

Answer №2

Trigger a class addition upon clicking via javascript on the #anime element, resulting in an animated effect ...

$('.myButton').on('click', function(){
    $('#anime').addClass('animate-now');
});

.anime {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

.anime.animate-now {
  animation: coloranimate 5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="anime">
</div>
<button class="myButton">Animate</button>

Answer 4

Trigger a class addition upon clicking via javascript on the #anime element, resulting in an animated effect ...

$('.myButton').on('click', function(){
    $('#anime').addClass('animate-now');
});

.anime {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

.anime.animate-now {
  animation: coloranimate 5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="anime">
</div>
<button class="myButton">Animate</button>

Answer 5

Answer №3

If you want to achieve your requirement, make sure to incorporate jQuery.

Feel free to test out the following code as it might be helpful for you.

Edit

This snippet focuses on utilizing plain javascript.

function addAnime() {
var classadd = document.getElementById('anime');
classadd.className = 'anime';
}

.anime {
  animation: coloranimate 5s;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="">
</div>
<button onclick="addAnime()">Animate</button>

Answer 6

If you want to achieve your requirement, make sure to incorporate jQuery.

Feel free to test out the following code as it might be helpful for you.

Edit

This snippet focuses on utilizing plain javascript.

function addAnime() {
var classadd = document.getElementById('anime');
classadd.className = 'anime';
}

.anime {
  animation: coloranimate 5s;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="">
</div>
<button onclick="addAnime()">Animate</button>

JS: Looking to add animation with a button click?

Answer №1

Answer №2

Answer №3

Similar questions

Setting up angular-cli project for rc5- Step by step guide

It is not possible to dynamically change the value of a checkbox using jQuery when it is checked or

Exploring the functions of `map` and `filter` in the world of

Is there a way to return two separate functions within a single function that can be rendered as two distinct components in a React application without one function overriding the other?

What is the best way to align an image underneath text?

Accessing React Context globally using the useContext hook

Solving template strings in a future context

@media query not functioning properly with certain rules

What is the best way to eliminate the header and side navigation in a master page design?

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

Using Python to extract the audio URL (specifically in mp3 format) from a web player

Font sizes may vary depending on whether the site is accessed with or without the "www" prefix

Trouble assigning the 'data' attribute to the 'Object' tag using jQuery. [Limited to IE8]

What is the best way to programmatically select a checkbox that was created dynamically using jQuery?

Escaping the setTimeout loop

Frames of Animation

Tips for implementing an 'exclude' feature in TypeScript without encountering any error notifications

Using PHP to insert data from a form with multiple checkbox selections into a MySQL database

The jquery ajax call only seems to function properly when executed on a local

Failed to fetch JSON file using jQuery