smooth rotating

[rernanded]

Hallo,
mit folgendem CSS habe ich das Problem, daß der rotate-Vorgang um 10deg abrupt erfolgt. Wie kann ich es erreichen daß er ganz smooth erfolgt?
MONI

.www {
position:fixed;
top: 13px;
right: 13px;
z-index:100;
border-style:solid;
border-width: 0px;
border-color:#ff5500;
border-radius: 20px;
box-shadow: 10px 20px 30px grey;

-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);

animation: moving 3s;           
}

@keyframes moving {
  100% {
    transform: translate(0px, 0px);
  }
  0% {
    transform: translate(0px, -300px);
  }
}
@-o-keyframes moving {
  100% {
    transform: translate(0px, 0px);  
  }
  0% {
    transform: translate(0px, -300px);
  }
}
@-ms-keyframes moving {
  100% {
    transform: translate(0px, 0px);  
  }
  0% {
    transform: translate(0px, -300px);
  }
}
@-webkit-keyframes moving {
  100% {
    transform: translate(0px, 0px);  
  }
  0% {
    transform: translate(0px, -300px);
  }
}
@-moz-keyframes moving {
  100% {
    transform: translate(0px, 0px);  
  }
  0% {
    transform: translate(0px, -300px);
  }
}
[/hlml]

 

[SpiceLab]

http://lmgtfy.com/?q=css+transform+rotate+smooth

1. Treffer: http://stackoverflow.com/questions/24071548/smooth-rotation-transition-css3

 

[rernanded]

@SpiceLab Danke soweit, aber den Link kannte ich bereits.

Habe auch alles mal probiert, aber nichts klappt so auch zB dies nicht:

transform: rotate(10deg) ;
  -moz-transform: rotate(10deg) ;
  -webkit-transform: rotate(10deg) ;
  -o-transform: rotate(10deg) ;
  -ms-transform: rotate(10deg) ;

transition: all 6s ease;
  -moz-transition: all 6s ease;
  -webkit-transition: all 6s ease;
  -o-transition: all 6s ease;
  -ms-transition: all 6s ease;

MONI

 

[SpiceLab]

@SpiceLab Danke soweit, aber den Link kannte ich bereits.

Entweder verstehst Du kein englisch, oder ...

Habe auch alles mal probiert, aber nichts klappt so auch zB dies nicht:

transform: rotate(10deg) ;
  -moz-transform: rotate(10deg) ;
  -webkit-transform: rotate(10deg) ;
  -o-transform: rotate(10deg) ;
  -ms-transform: rotate(10deg) ;

transition: all 6s ease;
  -moz-transition: all 6s ease;
  -webkit-transition: all 6s ease;
  -o-transition: all 6s ease;
  -ms-transition: all 6s ease;

change all your transition css property (replace ease with linear)

transition: 300ms ease all;

with

transition: 300ms linear all;

Du verwendest ease anstatt linear, und 6s steht für 6 Sekunden, empfohlen sind aber 300 Millisekunden.

 

[rernanded]

@SpiceLab
I`d an attempt with transition: 300ms linear all; but there's no significant change of the animation as before.
I wrote that I`d tried out many different ways that are suggested at the website you've recommended.

MONI

 

[SpiceLab]

Dann bette die Rotation besser in einen Keyframe ein, um die Schritte der Animationssequenz feiner justieren/kontrollieren zu können