Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

div rotare

T

Teixeira

macrumors newbie
Original poster
Nov 7, 2015
4
0
My page code below does not work IE. What I might add.
Thank you.

Code: 
<!DOCTYPE html>

<html lang="pt-br">
<head>
   <title></title>
   <meta charset="utf-8">
   <style>
   @-webkit-keyframes rodaroda {
     0% {
       -webkit-transform:rotate(0deg);
     }

     50% {
       background:red;
       -webkit-transform:rotate(180deg);
     }
     100% {
       background:blue;
       -webkit-transform:rotate(360deg);
     }
   }

   @-moz-keyframes rodaroda {
     0% {
       -moz-transform:rotate(0deg);
     }
     50% {
       background:red;
       -moz-transform:rotate(180deg);
     }
     100% {
       -moz-transform:rotate(360deg);
     }
   }


.giragira {
   width:3px; /**aqui está 50px vou mudar para 10px**/
   height:3px;/**aqui está 50px vou mudar para 10px**/
   margin:15px 0 0 15px;

   -webkit-animation: rodaroda 1s linear alternate 3;
   -moz-animation: rodaroda 0.5s linear infinite;
   -o-animation: rodaroda 0.5s linear infinite;
   animation: rodaroda 0.5s linear infinite;
   background-color: #66FF99; /**Aqui está black vou mudar para verde**/

}
  </style>
</head>
<body>

<div class="giragira"></div>

</body>
</html>
 
Last edited by a moderator:
Try using something like JSFiddle for code presentation. It makes it easier for us to read and understand what you are attempting to accomplish.

For example:
https://jsfiddle.net/q6ehhb2j/

A quick glance shows you are missing the IE vendor prefixes for transform and keyframes.
What version of IE are you attempting to work with? Keyframes is supported in IE10 and better.
 
Sorry, the way I'm posting.
Mine is IE 11 does not work, or is not running.
What I need is a small circle or rectangle to be running non-stop and in the same place can be red and green.
Please note that it is a small point by turning it looks like it's flashing. I do not know if you get the idea.
I managed to make a div girarando without stopping but with problem in IE 11. In Mozilla Firefox is working.
 
Teixeira said:
Sorry, the way I'm posting.
Mine is IE 11 does not work, or is not running.
Click to expand...
Try moving ALL keyframes to the very top. Add vendor prefixes. Add meta tag something like:
Code: 
<metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">
I do not write code for IE, I display a message stating your browser sucks, please switch. Okay, that's not really true, but I sure wish I could. I generally include simple fallbacks. I'm certainly not the best help for IE, sorry. IE just has too many quirks and I hate spending hours fixing something just for IE.
 
Thank you very much for your attention. I understand their placements. But I'm not making this div rotate only for IE11.
If I put on my site this div rotate spinning round and round in the same place and a user opens my page in IE11 will not work. Hence my concern to bring something to work on all browser or at least the most used.
 
I'm sorry for not knowing explain.It worked as its guidelines in Mozilla Firefox perfectly but the IE11 div to get stuck and not worked.
I do not know the post code as their excuse guidelines. I will put right here:

Code: 
<!DOCTYPE html>
<html lang="pt-br">
<head>
   <title>rotate div</title>
   <meta charset="utf-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">
 
   <style>
   @-webkit-keyframes rodaroda {
     0% {
       -webkit-transform:rotate(0deg);
     }

     50% {
       background:red;
       -webkit-transform:rotate(180deg);
     }
     100% {
       background:blue;
       -webkit-transform:rotate(360deg);
     }
   }

 
   @-moz-keyframes rodaroda {
     0% {
       -moz-transform:rotate(0deg);
     }
     50% {
       background:red;
       -moz-transform:rotate(180deg);
     }
     100% {
       -moz-transform:rotate(360deg);
     }
   }


.giragira {
   width:3px; /**aqui está 50px vou mudar para 10px**/
   height:3px;/**aqui está 50px vou mudar para 10px**/
   margin:15px 0 0 15px;

   -webkit-animation: rodaroda 1s linear alternate 3;
   -moz-animation: rodaroda 0.5s linear infinite;
   -o-animation: rodaroda 0.5s linear infinite;
   animation: rodaroda 0.5s linear infinite;
   background-color: #66FF99; /**Aqui está black vou mudar para verde**/

}
 
  </style>
</head>
<body>

<div class="giragira"></div>

</body>
</html>
 
Last edited by a moderator:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back