I want to spin the below image to 360 degree and below css applied on that image:
<img src="" alt="" />
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
It's working on desktop well but not on mobile? If I have done anything wrong?
This works for me both on mobile and desktop.
.loader {
position: absolute;
width: 120px;
height: 120px;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
-webkit-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Your spin code might be not working because you haven't coded that correctly. There are some issues in the #keyframes animation.
SEE THE EXAMPLE
Related
I have looked at the previously answered topics on the site. I could not adjust. Although I've set the size and location in the css file. The big visual is right in the middle and it becomes suitable for the screen. Imaged1 class I have given a small visual display in different places and different sizes. Can the codes help?enter image description here
.imaged1 {
position: absolute;
top: 80px;
left: 240px;
width: 65px;
height: 65px;
margin: 0 auto;
-webkit-animation: spin 15s linear infinite;
-moz-animation: spin 15s linear infinite;
animation: spin 15s linear infinite;
bottom: auto;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
<img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
<img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
enter image description here
enter image description here
Following code may help you:
<div style="text-align: center;position: relative;width:50%;">
<img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
<img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
</div>
.imaged1 {
position: absolute;
top: 36%;
left: 40%;
width: 19%;
margin: 0 auto;
-webkit-animation: spin 15s linear infinite;
-moz-animation: spin 15s linear infinite;
animation: spin 15s linear infinite;
bottom: auto;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
display: block;
width: 100%;
}
Please check this fiddle for my best guess what you require
And here is the previously asked question
I have an image that I want to "walk across" a div then at the end flip around horizontally and head back the other way. I have created a codepen here: https://codepen.io/jessiemele/pen/rGQWWE. The tinyWalk animation gets very bouncy towards the end, right before it turns and heads back to the start, I'm assuming it is form the image hitting the top of the div. I'm wondering if there is a way to combine these 2 animations to just run them on the image so I don't have to run tinyWalk on the div. My code is here:
<div class="catapillarBox">
<img src="https://i.imgur.com/0XPhWfE.jpg" class="caterpillar"
alt="caterpillar drawing" />
</div>
</div>
<div class="blueBox">
<h5>I'm your box</h5>
</div>
CSS:
.blueBox {
background-color: #1d88eb;
width: 875px;
height: 400px;
margin-top: 125px;
padding-bottom: 70px;
margin-top: 150px;
z-index: 2;
}
img.caterpillar {
position: absolute;
top: 125px;
left:0;
-webkit-animation: walk 20s forwards infinite linear;
animation: walk 20s forwards infinite linear;
z-index: 3;
}
#keyframes walk{
0% { left: 0; transform: rotateY(0deg);}
49% {transform: rotateY(0deg);}
50% {left: 700px; transform: rotateY(180deg);}
99% {transform: rotateY(180deg);}
100% {left: 0; transform: rotateY(0deg);
}
.catapillarBox {
width: 200px;
height: 100px;
-webkit-animation: tinywalk 500ms linear alternate infinite;
animation: tinywalk 500ms linear alternate infinite;
}
#keyframes tinywalk {
0%{ transform: rotate(0);}
25%{ transform: rotate(-1deg);}
50%{ transform: rotate(1deg);}
75%{ transform: rotate(-1deg);}
100%{ transform: rotate(0);}
}
Jessica, I created a codepen here that should solve your problem. It looks like your rotation of your image is just too drastic for your liking. I edited it to a 0.2 degree rotation. Try the following CSS:
.blueBox {
background-color: #1d88eb;
width: 875px;
height: 400px;
margin-top: 125px;
padding-bottom: 70px;
margin-top: 150px;
z-index: 2;
}
.catapillarBox {
width: 200px;
height: 100px;
-webkit-animation: tinywalk 500ms linear alternate infinite;
animation: tinywalk 500ms linear alternate infinite;
}
#keyframes tinywalk {
0%{ transform: rotate(0);}
25%{ transform: rotate(-0.2deg);}
50%{ transform: rotate(0.2deg);}
75%{ transform: rotate(-0.2deg);}
100%{ transform: rotate(0);}
}
img.caterpillar {
position: absolute;
top: 125px;
left:0;
-webkit-animation: walk 20s forwards infinite linear;
animation: walk 20s forwards infinite linear;
z-index: 3;
}
#keyframes walk{
0% { left: 0; transform: rotateY(0deg);}
49% {transform: rotateY(0deg);}
50% {left: 700px; transform: rotateY(180deg);}
99% {transform: rotateY(180deg);}
100% {left: 0; transform: rotateY(0deg);
}
I have a loading page while the website is loading. It works fine in Chrome but I need to fix it on Safari because it's not working. Here's my code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}
.loading {
top: 30%;
right: 45%;
position: fixed;
-webkit-animation: spinHorizontal 4s linear infinite;
-moz-animation: spinHorizontal 4s linear infinite;
animation: spinHorizontal 4s linear infinite;
}
#keyframes spinHorizontal {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png">
</div>
It appears it has to do with the position: fixed on the .se-pre-con element. Try using absolute positioning or positioning it in another way.
.se-pre-con {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffff;
}
.loading {
width: 279px;
height: 279px;
top: 30%;
right: 45%;
position: fixed;
-webkit-backface-visibility: visible;
-webkit-animation: spinHorizontal 2s linear infinite;
-moz-animation: spinHorizontal 2s linear infinite;
animation: spinHorizontal 2s linear infinite;
background-color: transparent;
}
#keyframes spinHorizontal {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png" />
</div>
</div>
I want to rotate the image and animate accordingly, can someone help me out, below is the link for the gif image
https://drive.google.com/file/d/0B92S5c2PO_OIeUZJU0g2dnY3S3c/view?usp=sharing
Here is a solution
http://jsfiddle.net/aquadk/m23sadrz/
CSS
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
HTML
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo