Using CSS3 Transitions and keyframes in JQuery .css()

Question

I'm trying to get CSS3 transitions to work in JQuery .css()

Something simple like

.someDiv { opacity: 1; background: #fff; transition: width 2s; }

formats into

$( ".box" ).one( "click", function() {
$(this).css({ "opacity": "1", "background": "#fff", "transition": "width 2s" });
});

I know that much.
But how do you format CSS3 transitions that have nested keyframes to work with JQuery?

.fadeInDown {
 -webkit-animation-name: fadeInDown;  
 animation-name: fadeInDown;  }

@keyframes fadeInDown {

0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
    }

100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

Why aren't you just using a CSS file for this?

APAD1
– APAD1

2017-06-19 16:56:02 +00:00
Commented Jun 19, 2017 at 16:56 — APAD1
– APAD1, Commented Jun 19, 2017 at 16:56

I haz kode · Accepted Answer · 2017-06-19 17:23:00Z

2

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'
  }
}]);

answered Jun 19, 2017 at 17:23

I haz kode

1,6353 gold badges22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

APAD1 · Accepted Answer · 2017-06-19 17:18:37Z

1

Not sure why you would want to add keyframes using jQuery, but you can add CSS to the head like this:

$(function() {
  var keyframes = '.fadeInDown {' +
                     '-webkit-animation-name: fadeInDown;' +
                     'animation-name: fadeInDown; }' +

                    '@keyframes fadeInDown {' +

                    '0% {' +
                        'opacity: 0;' +
                        '-webkit-transform: translate3d(0, -100%, 0);' +
                        'transform: translate3d(0, -100%, 0);' +
                        '}' +

                    '100% {' +
                            'opacity: 1;' +
                            '-webkit-transform: none;' +
                            'transform: none;' +
                        '}' +
                    '}';
  $('<style type="text/css">' + keyframes + '</style>').appendTo($('head'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Jun 19, 2017 at 17:18

APAD1

13.7k8 gold badges47 silver badges72 bronze badges

1 Comment

lStoilov Over a year ago

Much easier and 100% solution!

Collectives™ on Stack Overflow

Using CSS3 Transitions and keyframes in JQuery .css()

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related