terrielung

Hi, I have been having some problem with transform and animations. The css codes are working with a svg image. Everything is working fine in Firefox, but transform does not work in IE11, transition animation does not work in Chrome, and everything falls apart in Mac OS X browsers.

I'm new at this and don't know where the problem is, please can anyone help me? Thank You.

These are the codes:

[id$=group] {

-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

transition: transform 0.5s ease-in-out, opcaity 0.5s ease-in-out; }

[id$=group] {

opacity: 0;

-webkit-transform: scale(0.35,0.35);

-moz-transform: scale(0.35,0.35);

-ms-transform: scale(0.35,0.35);

-o-transform: scale(0.35,0.35);

transform: scale(0.35,0.35); }

[id$=group]:hover {

opacity: 1;

-webkit-transform: scale(1,1);

-moz-transform: scale(1,1);

-ms-transform: scale(1,1);

-o-transform: scale(1,1);

transform: scale(1,1); }

@-webkit-keyframes translateX {

0% {transform: translateX(250px);

opacity: 0; }

100% {opacity: 1;}

100% {tranform: translateX(0px);}

#title_type {

-webkit-animation: translateX 3s;

-moz-animation: translateX 3s;

animation: translateX 3s; }