Css3 animation - how to keep animation roating in exact place - html

I am working on some basic cog animation using css3,
The problem I have is the cogs are moving around slightly and not staying in one exact spot.
Is it possible to fix the images in one spot so they dont move.
Amy help would be great !!!
Please see Fiddle
.container{
background:black;
}
#cog-animation{
height: 200px;
margin: 0 auto;
max-width: 380px;
position: relative;
margin-top: 30px;
}
/* CSS3 keyframes */
#-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
/* gears */
.gear {
float: none;
position: absolute;
text-align: center;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#gear1 {
background: url('http://paulobriendesign.co.uk/images/g1.png') no-repeat 0 0;
height: 58px;
width: 58px;
left: 81px;
top: 25px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear2 {
background: url('http://paulobriendesign.co.uk/images/g2.png') no-repeat 0 0;
height: 85px;
left: 143px;
top: 36px;
width: 85px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear3 {
background: url('http://paulobriendesign.co.uk/images/g3.png') no-repeat 0 0;
height: 45px;
width: 45px;
left: 218px;
top: 11px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}

The background images are off center.
Try adding:
background-position:center;

The images aren't perfectly square - g1 is 54x53; g2 is 80x79; g3 is 39x38.
The bigger issue is your divs are bigger than your background images. #gear1 is 58x58, but the image is only 54x53, so there is some extra space which makes it look like the gear is moving when the div rotates.

Related

CSS rotate text from center center

I want to use a rotating/spinning letter as my loader on a website. I want it to rotate through the center.
I have used transform-origin: center center; as mentioned here. But no help.
Can some fix this? Thanks!
Also, Is this the right approach? Please mention if there is any better of achieving this?
(I don't want to go with the svg.)
CSS
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 2rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
Do this. First, centralize the letter both vertically and horizontally to the center of the page. Then apply rotation animation to the letter. It should work. Don't add any sort of width to the text. Otherwise, the text will left align itself in that width and the animation will look weird.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
animation: Rotate infinite 1s;
font-size: 50px;
}
#keyframes Rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p>M</p>
Change the display from block to inline-block and remove the width:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
display: inline-block;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
width is set to 2 rem, which makes the letter to go outside the container, around whose center it rotates (the letter needs more space). Set width to 5rem and you are set:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 5rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>

Animation issues with internet explorer

I'm trying to make waves with continuously floating animation. I have put the code below that I have tried and it's working fine in all browsers except internet explorer.
Is there anything to do with this code to make it work in explorer? Please help.
If you need anything else please let me know. Thanks.
.inf-waveWrapperInner {
position: absolute;
top: auto;
right: 0;
bottom: 25px;
left: 0;
overflow: visible;
margin: auto;
}
.inf-bgTop {
height: 188px;
bottom: 130px;
overflow: visible;
}
.inf-bgMiddle {
height: 255px;
bottom: 5px;
overflow: visible;
}
.inf-bgBottom {
height: 170px;
}
.inf-wave {
width: 500%;
height: 100%;
background-repeat: repeat no-repeat !important;
background-position: 0 top;
transform-origin: center top;
}
.inf-wave.inf-waveTop {
animation: move_wave 25s linear infinite;
-webkit-animation: move_wave 25s linear infinite;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
.inf-wave.inf-waveMiddle {
animation: move_wave 25s linear infinite;
-webkit-animation: move_wave 25s linear infinite;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
.inf-wave.inf-waveBottom {
animation: move_wave 25s linear infinite;
-webkit-animation: move_wave 25s linear infinite;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
&::after {
content: '';
display: block;
background: #0B5268;
width: 100%;
height: 700px;
position: absolute;
top: 100px;
left: 0;
right: 0;
}
}
#-webkit-keyframes move_wave {
0% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0);
}
50% {
transform: translateX(-25%) translateZ(0);
-webkit-transform: translateX(-25%) translateZ(0)
}
100% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0)
}
}
#keyframes move_wave {
0% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0);
}
50% {
transform: translateX(-25%) translateZ(0);
-webkit-transform: translateX(-25%) translateZ(0)
}
100% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0)
}
}
<div class="inf-waveWrapperInner inf-bgTop">
<div class="inf-wave inf-waveTop" style="background:url(images/inf-wave-one.svg);"></div>
</div>
<div class="inf-waveWrapperInner inf-bgMiddle">
<div class="inf-wave inf-waveMiddle" style="background:url(images/inf-wave-two.svg);"></div>
</div>
<div class="inf-waveWrapperInner inf-bgBottom">
<div class="inf-wave inf-waveBottom" style="background:url(images/inf-wave-three.svg);"></div>
</div>

cant make a smooth rotation in rotate css

I'm trying to make a smooth landing with a rocket, but I'm not being able to do the rotation to make the position for landing in a smooth manner, could u guys please help me on this part of the code?
#keyframes rocket{
0%{
transform:translate(-10vw);
}
40%{
transform:translate(40vw);
}
70%{
transform:translate(70vw, -15vw) rotate(-90deg);
}
100%{
transform:translate(70vw, 0) rotate(-90deg);
}
}
.rocketA{
margin-top: 150px;
width: 80px;
height: 40px;
background-color: pink;
animation-name: rocket;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
<div class='rocketA'></div>
If anyone finds this helpful here it goes the solution I found to make it better, thank for all the help.
SOLUTION
#keyframes rocket {
0% {
transform: translate(-10vw);
}
52% {
transform: translate(45vw);
}
52% {
transform: translate(45vw, -0vw) rotate(-5deg);
}
54% {
transform: translate(48vw, -0.5vw) rotate(-10deg);
}
56% {
transform: translate(51vw, -1vw) rotate(-15deg);
}
58% {
transform: translate(54vw, -1.5vw) rotate(-20deg);
}
60% {
transform: translate(57vw, -2vw) rotate(-25deg);
}
62% {
transform: translate(60vw, -2.5vw) rotate(-30deg);
}
64% {
transform: translate(63vw, -3vw) rotate(-35deg);
}
66% {
transform: translate(66vw, -3.5vw) rotate(-40deg);
}
68% {
transform: translate(69vw, -4vw) rotate(-45deg);
}
70% {
transform: translate(72vw, -4.5vw) rotate(-50deg);
}
72% {
transform: translate(75vw, -5vw) rotate(-55deg);
}
74% {
transform: translate(78vw, -5.5vw) rotate(-60deg);
}
76% {
transform: translate(81vw, -6vw) rotate(-65deg);
}
78% {
transform: translate(83vw, -6.5vw) rotate(-70deg);
}
80% {
transform: translate(85vw, -7vw) rotate(-75deg);
}
82% {
transform: translate(88vw, -7.5vw) rotate(-80deg);
}
84% {
transform: translate(91vw, -8.5vw) rotate(-85deg);
}
86%, 96% {
transform: translate(94vw, -9vw) rotate(-90deg);
}
96%, 100% {
transform: translate(94vw, 0) rotate(-90deg);
}
}
.rocketA {
margin-top: 100px;
width: 80px;
height: 40px;
background-color: pink;
animation-name: rocket;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
<div class='rocketA'></div>
Use animation-timing-function: linear;
Demo
#keyframes rocket{
0%{
transform:translate(-10vw);
}
40%{
transform:translate(40vw);
}
70%{
transform:translate(70vw, -15vw) rotate(-90deg);
}
100%{
transform:translate(70vw, 5vw) rotate(-90deg);
}
}
.rocketA{
margin-top: 150px;
width: 80px;
height: 40px;
background-color: pink;
animation-name: rocket;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
<div class='rocketA'></div>

How do I animate a div with CSS3 to move and spin?

I am trying to animate a div to spin 360deg and move 400px to the right. How can I do this using CSS3? Do I need to use CSS3 keyframes?
<div id="spin"></div>
CSS:
#spin {
width:200px;
height:200px;
background-color:blue;
}
Yes, you need keyframes:
#spin {
width: 200px;
height: 200px;
background-color: blue;
-webkit-animation: myanimation 5s;
animation: myanimation 5s;
}
#-webkit-keyframes myanimation {
100% { margin-left: 400px; -webkit-transform: rotate(360deg); }
}
#keyframes myanimation {
100% { margin-left: 400px; transform: rotate(360deg); }
}
<div id="spin"></div>
add all the prefixes so it works on all modern browsers
-webkit-
-moz-
-ms-
-o-
Try this and adjust to your needs:
#spin {
position: absolute;
width: 200px;
height: 200px;
background: #00f;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
left: 0px;
}
to {
transform: rotate(360deg);
left: 400px;
}
}
<div id="spin"></div>

Spinning gears css not working in IE

I got some css for rotating gears and so far they work great in Firefox but do not work in IE. Can anyone provide a fix to this problem.
Here is my html to reference the classes:
<div class="gear" id="gear1"></div>
<div class="gear" id="gear2"></div>
<div class="gear" id="gear3"></div>
<div class="gear" id="gear4"></div>
<div class="gear" id="gear5"></div>
<div class="gear" id="gear6"></div>
<div class="gear" id="gear7"></div>
Here is my css:
/* CSS3 keyframes */
#-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* gears */
.gear {
float: none;
position: absolute;
text-align: center;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-o-animation-direction: normal;
-moz-animation-delay: 0;
-o-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#gear1 {
background: url('g1.png') no-repeat 0 0;
height: 85px;
left: 31px;
top: 45px;
width: 85px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}
#gear2 {
background: url('g2.png') no-repeat 0 0;
height: 125px;
left: 105px;
top: 10px;
width: 125px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 16.84s;
-o-animation-duration: 16.84s;
animation-duration: 16.84s;
}
#gear3 {
background: url('g3.png') no-repeat 0 0;
height: 103px;
left: 149px;
top: 118px;
width: 103px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 13.5s;
-o-animation-duration: 13.5s;
animation-duration: 13.5s;
}
#gear4 {
background: url('g4.png') no-repeat 0 0;
height: 144px;
left: 46px;
top: 173px;
width: 144px;
-moz-animation-name: cckw;
-moz-animation-duration: 20.2s;
-webkit-animation-name: cckw;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 20.2s;
-o-animation-duration: 20.2s;
animation-duration: 20.2s;
}
#gear5 {
background: url('g1.png') no-repeat 0 0;
height: 85px;
left: 127px;
top: 292px;
width: 85px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}
#gear6 {
background: url('g2.png') no-repeat 0 0;
height: 125px;
left: 200px;
top: 283px;
width: 125px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 16.84s;
-o-animation-duration: 16.84s;
animation-duration: 16.84s;
}
#gear7 {
background: url('g3.png') no-repeat 0 0;
height: 103px;
left: 277px;
top: 217px;
width: 103px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 13.5s;
-o-animation-duration: 13.5s;
animation-duration: 13.5s;
}
If you're using anything older than IE 10, keyframe animations are not going to work. See Caniuse for compatibility tables, and consider a JavaScript/jQuery alternative or polyfill if you need older browser support.
EDIT: It looks like some of your CSS (i.e., you .gear class) is missing the -ms prefix, which will give you somewhat broader compatibility.