CSS transform problems

[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; }

 

 

 

 

[Wolverine]

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; }

 

 

 

 

 

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; }

 

 

 

 

 

 

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; }

 

 

 

 

Well if you are using the same ID in three different places that might be part of the problem.

http://www.w3schools.com/css/css_selectors.aspThe id Selector The id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the id selector when you want to find a single, unique element. To find an element with a specific id, write a hash character, followed by the id of the element.Usually something like styling the A tag is used with a Class instead of an ID which is supposed to be unique.