Using Jquery to Set CSS Keyframe

Using JQuery to set CSS Keyframe

The SyntaxError is being caused by your semicolon-delimited javascript objects here:

'0%':   {top:$("#test").innerHeight()*-1; left:0px},
'50%':  {top:100%;  left:0px},
'100%': {top:$("#test").innerHeight()*-1; left:0px}

Replace your semicolons with commas inside the objects:

'0%':   {top:$("#test").innerHeight()*-1, left:0},
'50%':  {top:"100%",  left:0},
'100%': {top:$("#test").innerHeight()*-1, left:0}

That will fix the syntax error.

EDIT: In addition, your values for left need to be changed from 0px to 0 or "0px", as 0px by itself is not valid syntax.

EDIT 2: I played around a bit with this http://jsfiddle.net/7P9yY/2/ and got it to work close to what I believe you're asking.

The keyframe is defined as:

$.keyframe.define([{
    name: 'myfirst',
    '0%':   {top:"0px"},
    '50%': {top:$("#testcontainer").innerHeight() + "px"},
    '100%': {top:"0px"}
}]);

This keyframe defines a motion starting at the top of the page (you can change this to be the top of the div if you need), down to the bottom, and back up to the top. Fire the animation with:

$("#test").playKeyframe({
    name: 'myfirst',
    duration: 2000
});

HTML (example):

<div id="testcontainer">
    <div id="test">hello</div>
</div>

CSS (example):

#test {
    position: absolute;
}

#testcontainer {
    position: relative;
    background: pink;
    width: 300px;
    height: 300px;
}

Hopefully that helps a little bit.

Changing CSS keyframes through Javascript

Animating KeyFrame using jQuery is possbile using jQuery.Keyframes

var supportedFlag = $.keyframe.isSupported();
$.keyframe.define([{
    name: 'roll-clockwise',
    '0%': {
        'color' : 'green'
    },
    '100%': {
        'color' : 'yellow'
    }
    }
]);

$("p").playKeyframe({
    name: 'changeColor',
    duration: 2000
});

For more info please see this link.
https://github.com/Keyframes/jQuery.Keyframes

Change the keyframes value of css with jQuery

You could use a CSS variable and change that:

setTimeout(() => {  console.log("changing");  document.getElementById("fizz").style.setProperty("--foo", "green");}, 2000);

:root {  --foo: blue;}
@keyframes hello {  from {    background-color: yellow;  }  to {    background-color: var(--foo);  }}
#fizz {  height: 1em;  animation: 1s infinite alternate hello;}

<div id="fizz">  <div>

Using CSS3 Transitions and keyframes in JQuery .css()

Don't hold me up on any of this.

It's not so simple. Consider the following:

jQuery has a very nice built in $(selector).animate() function which allows for easy setup of these animations. However, jQuery's animate() does not support multiple keyframes

With that being said, you can include the jQuery.Keyframes library which would assit you in achieving what you want.

Just using the code you provided, you would be able to introduce the animation via jQuery -given that you add jQuery.Keyframes - with something like this:

$.keyframe.define([{  name: 'animation-name',  '0%': {    'opacity': '0',    'transform': 'translate3d(0, -100%, 0)'  },  '100%': {    'opacity': '1',    'transform': 'none'  }}]);

Executing keyframes animation in JS or jQuery

This is a toggling animation using transition and jquery, without using .animate()

$(document).ready(function() {  $('button').click(function() {    var box = $('.box')    box.removeClass("show")    setTimeout(function(){        box.addClass("trans").addClass("show")        setTimeout(function(){            box.removeClass("trans")        },100)    },200)  });});

.box {  background: red;  height: 50px;  width: 50px;  position: absolute;  margin-top: 50px;  margin-left: 50px;  opacity: 0;  transform: translate(0, -20%);}
.box.trans {  transition: all 0.7s;}
.box.show {  opacity: 1;  transform: translate(0, 0);}

<button>Test</button><div class="box show"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Trigger css3 keyframes using jquery

I found the problem. It was a query conflict problem.
I used the following code and it worked.

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(".commencer").click(function(){
        jQuery("#box").addClass("cubebox");
    });
});

</script>

---

Related Topics