css3 cross browser transforms not working

Question

I am trying following code for a client where an envelope opens and a card comes out. I am using pure CSS3 transforms and rotations. It is working perfectly in chrome and opera. In Mozilla it gives few glitches, but in safari and IE 10+ it is not working at all. I have used all vendor prefixes. Am I missing something? Can this be done in javascript for cross browser?

http://markroland.com/project/css-greeting-card/demo/index-webkit.html

*Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve).* — Hashem Qolami, Oct 11 '14 at 08:07
Try using the non vendor prefixed CSS properties. And like the other person said vendor prefixed properties do trigger vendor prefixed events. However you really should not need vendor prefixed for transitions and transforms as those are pretty standard these days. — Chris Love, Oct 11 '14 at 08:39

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Looking at your code I'm guessing that it could be the transitionend event that is your problem. different browsers throw different events. Se How do I normalize CSS3 Transition functions across browsers?

document.getElementById('').addEventListener('transitionend', function(event) {

edited May 23 '17 at 11:57

Community

1
1

answered Oct 11 '14 at 08:31

Anders Flink

81
6

I will try the solution in the link. Thanks! – rohitnaidu19 Oct 11 '14 at 08:53

css3 cross browser transforms not working

1 Answers1