I followed the explanations on this jsFiddle page http://jsfiddle.net/gionaf/Ugc5g/ to spin an image on my page http://www.prezzio.net/ but it does not work: the image is not spinning.
To be clear, here is the image to spin:
Here is the original code:
.spin {
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); } }
<img class="spin" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
Any idea ? Thanks.
The culprit lies in your main_style.css line 369.
Add these lines,
#-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); } }
And it should spin as you expect.
Try this, here is Demo with all Vendor prefixes
img {
animation: 2s spin infinite linear;
}
#keyframes spin {
to {transform: rotate(360deg);}
}
<img src="http://www.prezzio.net/files/theme/spin.png" alt="">
Related
I have one SVG image and I have added animation on it using CSS it works fine in Chrome and Mozilla, and also on Android but not working on iOS both Chrome and Safari.
The problem is that I can see the image displayed but the animation spinning is not working.
I have the following animation applied to my simple SVG:
<img class="img-sth"src="/img/image.svg">
The css code:
.img-sth {
position: absolute;
height: 80px;
top: -3px;
left: 16px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Below see snippet where I added the 0% {} to each #keyframes definition. Your code did not work for me on macOS Safari (desktop) either when I initially tested it so I thought it may have been an issue with how the #keyframes animation was defined. See MDN docs for more info.
I used a placeholder image for the demo and tweaked the positioning so it was all in the viewport.
.img-sth {
position: absolute;
height: 80px;
top: 20px;
left: 20px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster {
0% {}
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
<img class="img-sth"src="https://via.placeholder.com/80x80">
This question already has answers here:
CSS3 Rotate Animation
(7 answers)
Closed 6 months ago.
So I wonder how to rotate a image in HTML, normal speed and using a simple trick.
Somebody could help me?
\*Dont know how to do it*\
<img src="https://google.com/favicon.ico"
You can rotate a img using transform css property
You can try this
img {
transform: rotate(0deg);
animation: rotate 1s infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<img src="https://google.com/favicon.ico" />
im not sure if this what you ask for !
.rotate {
animation: rotation 3s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<img class="rotate" width="100" height="100" src="https://google.com/favicon.ico" />
img {
position: absolute;
width: 100%;
-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); } }
<img src="https://www.google.com/favicon.ico">
No worries, found it out!
Source: https://stackoverflow.com/a/46085346/17699715
I Need to create Loader GIF, but the loader is made with HTML + CSS animation(png extension image), and I want to convert the web loader to GIF image, Any tool available to convert HTML to GIF.
Here is the link: https://jsfiddle.net/6uedrb89/6/
Here's the demo:
Anyone please help me to solve this issue
Thanks in advance
<div class="tc-play-animated-loading">
<img src="https://s27138.pcdn.co/wp-content/uploads/2018/09/favIcon.png" alt="play" class="tc-play-animated">
</div>
<style>
div.tc-play-animated-loading {
position: absolute;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
left: 50%;
top: 50%;
transform: translate(-50%,-50% );
}
img.tc-play-animated {
-webkit-animation: play-filter-animation 8s linear infinite;
-moz-animation: play-filter-animation 8s linear infinite;
-o-animation: play-filter-animation 8s linear infinite;
-ms-animation: play-filter-animation 8s linear infinite;
animation: play-filter-animation 8s linear infinite;
}
#-webkit-keyframes play-filter-animation{
from{
-webkit-filter:hue-rotate(-360deg)
}
to{
-webkit-filter:hue-rotate(360deg)
}
}
#-o-keyframes play-filter-animation{
from{
-o-filter:hue-rotate(-360deg)
}
to{
-o-filter:hue-rotate(360deg)
}
}
#-moz-keyframes play-filter-animation{
from{
-moz-filter:hue-rotate(-360deg)
}
to{
-moz-filter:hue-rotate(360deg)
}
}
#-ms-keyframes play-filter-animation{
from{
-ms-filter:hue-rotate(-360deg)
}
to{
-ms-filter:hue-rotate(360deg)
}
}
#keyframes play-filter-animation{
0%{
filter:hue-rotate(-360deg)
}
50%{
filter:hue-rotate(360deg)
}
100%{
filter:hue-rotate(0)
}
}
</style>
Changes filter:hue to transform
#-webkit-keyframes play-filter-animation{
0%{-webkit-transform: rotate(0deg)}
100%{-webkit-transform: rotate(360deg)}
}
#keyframes play-filter-animation{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
https://jsfiddle.net/lalji1051/u7fw4jd5/6/
How can I rotate gif image when mouse hover on it using css3
#tiger:hover{
-webkit-transform:rotateX(180deg)
}
Use transform: rotate(90deg)
img:hover {
transform: rotate(90deg)
}
<img src="http://placehold.it/150/f00" alt="image">
try this :
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
}
.image:hover{
-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); } }
<img class="image" src="http://placehold.it/350x150" alt="" width="120" height="120">
I am using this spinner on my site.
For those unfamiliar with brackets live preview I believe that the editor serves up the site from a temporary http server and updates whenever there is a change in the code.
Whenever I check the site through this feature the spinner works. the same goes for if I go to my website at www.tylererickson.com within Brackets' custom Google Chrome window, however if opened in a normal Chrome window the spinner doesn't animate.
Any help is aprreciated, thanks in advance.
Code:
HTML
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
CSS
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
I think you will need to add browser vendor prefix for chrome in order to work. If you take a look the current chrome for animation to support need to have -webkit in front of keyframes. Take a look here: http://caniuse.com/#feat=css-animation
At the end you will have something like this:
#-webkit-keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
And then will use it like this:
.inner.two {
right: 0%;
top: 0%;
-webkit-animation: rotate-two 1s linear infinite;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
You will need to make this for all others animation also. I just give example for one of them
The reason in Codepen the animation works without the prefixes is because Codepen uses Prefixfree and it automatically applies the needed prefixes for the browser.
You need to add the prefixes either manually or add the Prefixfree jQuery plugin to your page.
I recommend set the prefixes for the loader manually and not with the plugin, the reason is the loading animation should be the first to be loaded in your page and using the prefix plugin means the user has to wait for the jQuery and the prefix plugin to be loaded first, and that will cause a delay in loading the animation.
So add the following prefixes and it will work as expected.
.inner.one {
-webkit-animation: rotate-one 1s linear infinite;
-moz-animation: rotate-one 1s linear infinite;
animation: rotate-one 1s linear infinite;
}
.inner.two {
-webkit-animation: rotate-two 1s linear infinite;
-moz-animation: rotate-two 1s linear infinite;
animation: rotate-two 1s linear infinite;
}
.inner.three {
-webkit-animation: rotate-three 1s linear infinite;
-moz-animation: rotate-three 1s linear infinite;
animation: rotate-three 1s linear infinite;
}
And for the #keyfames:
/*Spinner Styles*/
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#-moz-keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#-webkit-keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#-moz-keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#-webkit-keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#-moz-keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#-webkit-keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}