div rotare

Discussion in 'Web Design and Development' started by Teixeira, Nov 7, 2015.

  1. Teixeira, Nov 7, 2015
    Last edited by a moderator: Nov 16, 2015

    Teixeira macrumors newbie

    Joined:
    Nov 7, 2015
    #1
    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>
     
  2. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    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.
     
  3. Teixeira thread starter macrumors newbie

    Joined:
    Nov 7, 2015
    #3
    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.
     
  4. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #4
    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.
     
  5. Teixeira thread starter macrumors newbie

    Joined:
    Nov 7, 2015
    #5
    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.
     
  6. Teixeira, Nov 7, 2015
    Last edited by a moderator: Nov 16, 2015

    Teixeira thread starter macrumors newbie

    Joined:
    Nov 7, 2015
    #6
    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>
     

Share This Page