How to Activate a CSS3 (Webkit) Animation Using JavaScript

How to activate a CSS3 (webkit) animation using javascript?

You're missing the duration and you have a trailing space in the name you assign:

function colorchange( test )
{
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed
    test.style.webkitAnimationDuration = '4s';
}

Some more infos on @-webkit-keyframes:

http://webkit.org/blog/324/css-animation-2/

update

Some working code.

<html>
    <head>
    <style>
    @-webkit-keyframes colorchange {
     0% {
       background-color: red;
       opacity: 1.0;
       -webkit-transform: scale(1.0) rotate(0deg);
     }
     33% {
       background-color: blue;
       opacity: 0.75;
       -webkit-transform: scale(1.1) rotate(-5deg);
     }
     67% {
       background-color: green;
       opacity: 0.5;
       -webkit-transform: scale(1.1) rotate(5deg);
     }
     100% {
       background-color: red;
       opacity: 1.0;
       -webkit-transform: scale(1.0) rotate(0deg);
     }
    }
    </style>

    <script>
    function colorchange(e) {
        if (e.style.webkitAnimationName !== 'colorchange') {
            e.style.webkitAnimationName = 'colorchange';
            e.style.webkitAnimationDuration = '4s';

            // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect
            setTimeout(function() {
                e.style.webkitAnimationName = '';
            }, 4000);
        }
    }
    </script>
    </head>

    <body>
        <div onclick="colorchange(this)">Hello World!</div>
    </body>
</html>

Trigger CSS Animations in JavaScript

The simplest method to trigger CSS animations is by adding or removing a class - how to do this with pure Javascript you can read here:

How do I add a class to a given element?

If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass / removeClass.

All you have to do then is set a transition to a given element like this:

.el {
    width:10px;
    transition: all 2s;
}

And then change its state if the element has a class:

.el.addedclass {
    width:20px;
}

Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.

There is a similar question here: Trigger a CSS keyframe animation via scroll

How do I re-trigger a WebKit CSS animation via JavaScript?

I found the answer based on the source code and examples at the CSS3 transition tests github page.

Basically, CSS animations have an animationEnd event that is fired when the animation completes.

For webkit browsers this event is named “webkitAnimationEnd”. So, in order to reset an animation after it has been called you need to add an event-listener to the element for the animationEnd event.

In plain vanilla javascript:

var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // you'll probably want to preventDefault here.
};

and with jQuery:

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // you'll probably want to preventDefault here.
});

The source code for CSS3 transition tests (mentioned above) has the following support object which may be helpful for cross-browser CSS transitions, transforms, and animations.

Here is the support code (re-formatted):

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style,
        // you'll probably be better off using a `switch` instead of theses ternary ops
        support = {
            transition:
                divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :
                // Will ms add a prefix to the transitionend event?
                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :
                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :
                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :
                false)))),
            transform:
                divStyle.MozTransform     === '' ? 'MozTransform'    :
                (divStyle.MsTransform     === '' ? 'MsTransform'     :
                (divStyle.WebkitTransform === '' ? 'WebkitTransform' : 
                (divStyle.OTransform      === '' ? 'OTransform'      :
                (divStyle.transform       === '' ? 'transform'       :
                false))))
            //, animation: ...
        };
    support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase();
    return support;
}());

I have not added the code to detect “animation” properties for each browser. I’ve made this answer “community wiki” and leave that to you. :-)

How to trigger a CSS animation?

Your attempt 2 works - just cleaned up your code a bit to remove the webkit prefixes (which are a few years outdated). I'm setting the animationName to 'none' inline, and then removing that so the element goes back to using its original CSS animation name.

Also, having multiple from and tos in a keyframe animation won't work, so I formatted it to work with percentages.

var btn = document.getElementById("button");var text = document.getElementById("balance-desktop");
function turngreen() {  text.style.animationName = 'none';  setTimeout(function() {    text.style.animationName = null;  }, 0);}
btn.addEventListener('click', turngreen);

#balance-desktop {  color: black;  animation: gogreen 2s;}
@keyframes gogreen {  0%, 100% { color: black; }  50% { color: limegreen; }}

<h3 id="balance-desktop">Heading</h3>
<button id="button">Turn Green</button>

CSS Animation onClick

Are you sure you only display your page on webkit? Here is the code, passed on safari.
The image (id='img') will rotate after button click.

function ani() {
  document.getElementById('img').className = 'classname';
}

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}

<input name="" type="button" onclick="ani()" value="Click">
<img id="img" src="https://i.stack.imgur.com/vghKS.png" width="328" height="328" />

How to trigger a css animation with vanilla javascript

I think adding class is a healthy way to do it.

Check the example here: https://codepen.io/yasgo/pen/zYBgjXN

document.getElementById('box').classList.add('active-animation');

.box {
  width: 50px;
  height: 50px;
  background-color: black;
}

.box.active-animation {
  animation: party 5s infinite;
}

@keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

<div id="box" class="box"></di>

Activate CSS Animation when visible

You could put the animation in a separate class, and add this class when the element is scrolled into view.

This can be done with jQuery by adding a custom function that detects when the element is in view, and trigger this function every time the user scrolls.

// function to detect if an element is scrolled into view
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
};

// listen for scroll event
$(window).scroll(function () {
  // check if element is scrolled into view
  if (isScrolledIntoView($('#animated_text'))) {
    // element is scrolled into view, add animation class
    $('#animated_text').addClass('animation');
  }
});

.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pcb-text p {
  font-size: 35px;
 
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
}

/* move animation to separate class */
.animation p {
  animation: typing 2s steps(45), 
             blink-caret 0.85s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 1000px"></div>
<div class="pcb-text" id="animated_text">
    <div class="text-center">
      <p>Some Text Here</p>
    </div>
</div>

Restart CSS3 animation using Javascript

You could check for the end of the animation by responding to the endanimation event (of which there are several browser-dependent variants), reloading the relevant nodes, and repeating the whole process. Note I applied a factor 10 to the speed of the animations so you can see the effect faster:

// Define a function that listens to all prefix variants of endanimation events:function whenAnimationEnd(element, callback) {    element.addEventListener('animationend', callback, false);    element.addEventListener('webkitAnimationEnd', callback, false);    element.addEventListener('oanimationend', callback, false);    element.addEventListener('MSAnimationEnd', callback, false);}
(function repeat() {  whenAnimationEnd(document.querySelector('.click_through2'), function(e) {    var container = document.querySelector('.ad_container');    var dupe = container.cloneNode(true);    container.parentNode.replaceChild(dupe, container);    repeat();  });}());

 .ad_container {     height: 250px;     position: relative;     width: 300px;     overflow: hidden; } .ad_container div, .ad_container a, .logo, .sfv2 {  position: absolute; } .title {     bottom: 45px;     left: 5px;     right: 5px; } .title h2 {     color: #fff;     font-family: Helvetica,arial,sans-serif;     font-size: 21px;     font-weight: 400;     line-height: 1;     margin: 0;     text-align: center; } .click_through {     background-color: #fff200;     border-radius: 5px;     bottom: 12px;     box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);     color: #ce1e25;     font-family: Helvetica,arial,sans-serif;     font-size: 14px;     font-weight: 700;     left: 0;     line-height: 1;     margin: 0 auto;     padding: 5px;     right: 0;     text-align: center;     width: 70px;     text-decoration: none; } .click_through1 {  animation: tbio 0.7s ease-out 0s both;  -moz-animation: tbio 0.7s ease-out 0s both;  -webkit-animation: tbio 0.7s ease-out 0s both;  -ms-animation: tbio 0.7s ease-out 0s both;  -o-animation: tbio 0.7s ease-out 0s both; } .click_through2 {  animation: tbio 0.7s ease-out 1s both;  -moz-tbio tbio 0.7s ease-out 1s both;  -webkit-tbio tbio 0.7s ease-out 1s both;  -ms-tbio tbio 0.7s ease-out 1s both;  -o-tbio tbio 0.7s ease-out 1s both;  width: 80px; } .logo {  top: 8px;  left: 8px; } .title1 {  animation: ltrio 0.6s ease 0s both;  -moz-animation: ltrio 0.6s ease 0s both;  -webkit-animation: ltrio 0.6s ease 0s both;  -ms-animation: ltrio 0.6s ease 0s both;  -o-animation: ltrio 0.6s ease 0s both; } .title2, .title3 {  opacity: 0; } .title2 {  animation: ltrio 0.6s ease 0.55s both;  -moz-animation: ltrio 0.6s ease 0.55s both;  -webkit-animation: ltrio 0.6s ease 0.55s both;  -ms-animation: ltrio 0.6s ease 0.55s both;  -o-animation: ltrio 0.6s ease 0.55s both; } .title3 {  animation: ltrio 0.6s ease 1s both;  -moz-nimation: ltrio 0.6s ease 1s both;  -webkit-nimation: ltrio 0.6s ease 1s both;  -ms-onimation: ltrio 0.6s ease 1s both;  -o-nimation: ltrio 0.6s ease 1s both; } .sfv2 {     right: 12px;     top: 34px;     animation: fio 0.6s ease 1.1s both;     -moz-animation: fio 0.6s ease 1.1s both;     -webkit-animation: fio 0.6s ease 1.1s both;     -ms-animation: fio 0.6s ease 1.1s both;     -o-animation: fio 0.6s ease 1.1s both; }  @keyframes ltrio {  0% {   opacity: 0;  }  20% {   opacity: 1;  }  50% {   opacity: 1;  }  80% {   opacity: 0;  }  100% {   opacity: 0;  } } @-moz-keyframes ltrio {  0% {   opacity: 0;  }  20% {   opacity: 1;  }  50% {   opacity: 1;  }  80% {   opacity: 0;  }  100% {   opacity: 0;  } }
 @-ms-keyframes ltrio {  0% {   -ms-transform: translateY(-350px);   opacity: 0;  }  25% {   -ms-transform: translateY(0);   opacity: 1;  }  75% {   -ms-transform: translateY(0);   opacity: 1;  }  100% {   -ms-transform: translateY(350px);   opacity: 0;  } } @-o-keyframes ltrio {  0% {   -o-transform: translateX(-350px);   opacity: 0;  }  25% {   -o-transform: translateX(0);   opacity: 1;  }  75% {   -o-transform: translateX(0);   opacity: 1;  }  100% {   -o-transform: translateX(350px);   opacity: 0;  } } @keyframes tbio {  0% {   transform: translateY(350px);   opacity: 0;  }  25% {   transform: translateY(0);   opacity: 1;  }  75% {   transform: translateY(0);   opacity: 1;  }  100% {   transform: translateY(350px);   opacity: 0;  } } @-moz-keyframes tbio {  0% {   -moz-transform: translateY(350px);   opacity: 0;  }  25% {   -moz-transform: translateY(0);   opacity: 1;  }  75% {   -moz-transform: translateY(0);   opacity: 1;  }  100% {   -moz-transform: translateY(350px);   opacity: 0;  } } @-webkit-keyframes tbio {  0% {   -webkit-transform: translateY(350px);   opacity: 0;  }  25% {   -webkit-transform: translateY(0);   opacity: 1;  }  75% {   -webkit-transform: translateY(0);   opacity: 1;  }  100% {   -webkit-transform: translateY(350px);   opacity: 0;  } } @-ms-keyframes tbio {  0% {   -ms-transform: translateY(350px);   opacity: 0;  }  25% {   -ms-transform: translateY(0);   opacity: 1;  }  75% {   -ms-transform: translateY(0);   opacity: 1;  }  100% {   -ms-transform: translateY(350px);   opacity: 0;  } } @-o-keyframes tbio {  0% {   -o-transform: translateY(350px);   opacity: 0;  }  25% {   -o-transform: translateY(0);   opacity: 1;  }  75% {   -o-transform: translateY(0);   opacity: 1;  }  100% {   -o-transform: translateY(350px);   opacity: 0;  } } @keyframes fio {  0% {   opacity: 0;  }  20% {   opacity: 1;  }  50% {   opacity: 1;  }  80% {   opacity: 0;  }  100% {   opacity: 0;  } }

<div class="ad_container"> <img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg"> <div class="title title1">  <h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2> </div> <div class="title title2">  <h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2> </div> <div class="title title3">  <h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2> </div> <a class="click_through click_through1" href="/">View here</a> <a class="click_through click_through2" href="/">Learn more</a></div>

How to play animation on div with javascript

Try to add 'animation' css property from js:

document.getElementById('test').style.animation = 'fading 2s infinite'

How to Activate a CSS3 (Webkit) Animation Using JavaScript