How to overwrite CSS3 keyframes using jQuery

Question

I want to overwrite the values in Keyframes using JQuery

Here my Code:

.v5Container { 
    background: #ffffff; 
    position: relative;
    transform-origin: left top 0;
    z-index: 101; 
    animation: 2s linear 0s normal none 1 formAnimate;
}
 @keyframes formAnimate {
    0% {transform: rotateY(-90deg); opacity:0;}
    100% {transform: rotateY(0deg); opacity:1;}
}

I want to overwrite this rotateY() and opacity value using JQuery.

have a look at this http://stackoverflow.com/questions/22402603/test-browser-supports-the-style-or-not — Bhojendra Rauniyar, Jul 17 '14 at 07:02
@panther I don't know how to overwrite in JQuery, thatsy i asked — Ragavan, Jul 17 '14 at 07:07

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

There is this: Set Webkit Keyframes Values Using Javascript Variable In the fiddle included in his answer - you can see how to get the CSS-Keyframe and change it.

Maybe a better solution: programmatically changing webkit-transformation values in animation rules

edited May 23 '17 at 12:21

Community

1
1

answered Jul 17 '14 at 07:05

DominikAngerer

6,354
5
33
60

How to overwrite CSS3 keyframes using jQuery

1 Answers1