Ok, so, I made a code, and what I am looking for is to have an image, rotating forever and it is working, but only in firefox, it isn't working in chrome, can anybody help?
Code:
<div align="left" class="header">
<img src="http://files.enjin.com/177852/SD/PortalHeaderContinuous1.png" class="header2" style="position:fixed; z-index:50; margin-left:-120px; margin-top:20px;">
</div>
<style>
.header2{
animation: rotate 5s linear 0s infinite;
-webkit-animation: rotate 1s linear 0s infinite;
}
#keyframes rotate
{
0% {}
100% {-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);}
}
</style>
Change your CSS to:
.header2{
-webkit-animation:rotate 4s linear infinite;
-moz-animation:rotate 4s linear infinite;
animation:rotate 4s linear infinite;
}
#-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Like this fiddle
CSS
div{
display:inline-block;
}
.parent{
border:1px solid grey;
}
.child{
height:100px;
width:100px;
border-radius:9px;
background:blue;
margin:10px;
}
.rotate {
-webkit-animation:rotate 4s linear infinite;
-moz-animation:rotate 4s linear infinite;
animation:rotate 4s linear infinite;
}
#-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
HTML
<div class='parent'>
<div class='child'>
</div>
</div>
<a id='rotate' href='#'>Rotate</a>
jQuery
$('#rotate').click(function(){
$('.child').addClass('rotate');
});
You need the prefix for the Keyframes too so change your CSS to this :
#keyframes rotate
{
0% {}
100% {transform: rotate(-360deg);}
}
#-webkit-keyframes rotate
{
0% {}
100% {-webkit-transform: rotate(-360deg);}
}
The demo http://jsfiddle.net/phk24/2/
Related
I have a gear image rotating using keyframe spin of CSS. but I want to resize the width of the image less than the height like in the image (see gear image below).
Demo gear rotating
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-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="gear" src="https://i.imgur.com/v1eydp4.png">
You can make use of the ScaleX transform value at various keyframe steps. It resizes at the last step to show you the difference in the size of it.
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-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 {
0% {
transform: scaleX(0.5) rotate(360deg);
}
50% {
transform: scaleX(0.5) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
#m4n0's answer works well. An alternate approach to timing rotations is to simply wrap .gear with another element, and transform the containing element:
<div class="gear__wrapper">
<img class="gear" />
</div>
.gear__wrapper {
transform: scaleX(0.5);
}
It might be handy but if you are expecting something else, you might need to time the rotations and all.
I have only added the simple, please other prefixes.
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin linear 4s 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) scaleX(1);
}
50%{ transform: rotate(180deg) scaleX(0.5);
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
I have a WordPress site: http://powersmart.tech/wordpress/
I want my webiste logo to rotate like this: https://www.dropbox.com/s/b2h29c8zdpfmuvi/video-1477647190.mp4?dl=0
I have made my logo to rotate in a circle using following code:
#Top_bar #logo img {
-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); } }
Please guide me.
Thanks
You're using the wrong transformation type, this is achieved using scaleX rather then rotate. I've made a small demo how this should work:
#logo {
margin: 50px;
width: 50px;
height: 50px;
background-color: red;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
#-moz-keyframes spin {
50% {
-moz-transform: scaleX(0.1);
}
}
#-webkit-keyframes spin {
50% {
-webkit-transform: scaleX(0.1);
}
}
#keyframes spin {
50% {
-webkit-transform: scaleX(0.1));
transform: scaleX(0.1);
}
}
<div id="logo"> hi </div>
I can't seem to find a solution for this problem.
There's a sprite animation that I've put into a div.
Now I want 2 different movements on that containing div.
should bring the div into view
should move the div from left to right in an infinite loop
It works perfectly in FF & IE, but the 2nd animation in the chain does not play in webkit browsers....
The funny thing is that if you open the inspector in Chrome and hover over the divs in the html code, you can actually see the container and the sprite div moving, but the sprite itself doesn't. Weird...
Here's the code http://codepen.io/anon/pen/yyGJGX?editors=110
Thx in advance.
The html
<body>
<section class="center">
<div class="movingBox">
<div class="counter"></div>
</div>
</section>
</body>
The CSS
.center {
width:600px;
height:400px;
position:absolute;
z-index: 0;
left:50%;
top:50%;
margin:-200px 0 0 -325px;
text-align:center;
overflow: hidden;
}
.movingBox {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 50;
-webkit-animation-name: box, box-move;
-webkit-animation-delay: 0s, 4s;
-webkit-animation-duration: 4s, 6s;
-webkit-animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards, none;
-webkit-animation-direction: normal, alternate;
animation-name: box, box-move;
animation-delay: 0s, 4s;
animation-duration: 4s, 6s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
animation-direction: normal, alternate;
}
.counter {
position: absolute;
bottom: 0;
left: 150px;
width:160px;
height:160px;
display:block;
background:transparent url(../img/test.png) 0 0 no-repeat;
z-index: 20;
-webkit-animation: teller 4s steps(4) infinite;
animation: teller 4s steps(4) infinite;
}
#-webkit-keyframes teller {
0% {background-position: 0 0; }
100% {background-position: 0 -640px; }
}
#-webkit-keyframes box {
0% {-webkit-transform: translateX(-600px); }
100% {-webkit-transform: translateX(0px); }
}
#-webkit-keyframes box-move {
0% {-webkit-transform: translateX(0px); }
33% {-webkit-transform: translateX(100px); }
66% {-webkit-transform: translateX(50px); }
100% {-webkit-transform: translateX(350px); }
}
#keyframes teller {
0% {background-position: 0 0; }
100% {background-position: 0 -640px; }
}
#keyframes box {
0% {transform: translateX(-600px); }
100% {transform: translateX(0px); }
}
#keyframes box-move {
0% {transform: translateX(0px); }
33% {transform: translateX(100px); }
66% {transform: translateX(50px); }
100% {transform: translateX(350px); }
}
CSS Solution
After playing around, I found out, that the issue is if you try combining two keyframe animations with the same CSS properties (-webkit-transform: translateX()) the first one will interfere with the second one.
A working solution is to just animate the left-value in your first keyframe animation and afterwards use -webkit-transform: translateX.
#-webkit-keyframes box {
0% { left: -600px; }
100% { left: 0; }
}
#-webkit-keyframes boxMovePlease {
0% {-webkit-transform: translateX(0px); }
33% {-webkit-transform: translateX(100px); }
66% {-webkit-transform: translateX(50px); }
100% {-webkit-transform: translateX(350px); }
}
I'm creating a CSS keyframe animation to have an element appear as if it is casually/slowly floating around a bit. It's nested in parents, one which uses translateX() to slowly move it left and right, and one which uses translateY() to slowly and independently move it up and down.
Chrome and Safari render this perfectly, giving it a gradual swaying movement. It smooths the animation (perhaps using sub-pixel smoothing?) so that everything appears very smooth. Firefox however, animates it pixel by pixel, so rather than smoothly swaying about, you can see it jump at every pixel.
View the JSFiddle in Chrome and FireFox to view the difference: http://jsfiddle.net/gonygdfz/6/
Is there any way to make FireFox render this smoothly rather than having it jumping pixel by pixel? It's extremely noticeable in the actual application for this.
The Markup:
<div id="parent">
<div id="move-x">
<div id="move-y">
<div id="child"></div>
</div>
</div>
</div>
The CSS:
#parent {
width: 400px;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
animation: range-y 10s infinite ease;
}
#move-x {
animation: range-x 10s infinite ease;
-webkit-animation: range-x 10s infinite ease;
}
#move-y {
animation: range-y 15s infinite ease;
-webkit-animation: range-y 15s infinite ease;
}
#keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
#-webkit-keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
It appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
ALL IS NOT LOST
I have modified your answer and rendered a smoother version next to your original. This should appear softer when viewed in Firefox.
CLICK FOR COMPARISON
Techniques used for this effect:
Linear transitions instead of ease.
Box-shadow on animated object. (Softened edge helps create fake AA effect).
Rotate object. Adding the smallest rotate helps to better utilised the rendering engine.
CSS
#parent {
width: 50%;
float:left;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
box-shadow:0 0 1px rgba(0,0,0,0.7);
animation: range-y 10s infinite linear;
-webkit-animation: range-y 10s infinite linear;
}
#move-x {
animation: range-x 10s infinite linear;
-webkit-animation: range-x 10s infinite linear;
}
#move-y {
animation: range-y 15s infinite linear;
-webkit-animation: range-y 15s infinite linear;
}
#keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
#-webkit-keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#-webkit-keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
FINAL WORD
You can still tweak the effects a little either way to fit your requirements.
It's not perfect but I hope it helps soften the end effect for your actual animation.
Use a small amount of rotation with the transformation. This forces Firefox to avoid the optimization and resample the image on every frame.
#keyframes optimized {
0%{
transform: translateX(0%);
}
100%{
transform: translateX(200px);
}
}
#keyframes subpixel {
0%{
transform: translateX(0%) rotate(0.1deg);
}
100%{
transform: translateX(200px) rotate(0.1deg);
}
}
div{
width:5px;
height:50px;
background-color: red;
animation-duration:30s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-timing-function:linear;
}
.optimized{
animation-name: optimized;
margin-bottom:1px;
}
.subpixel{
animation-name: subpixel;
}
<div class="optimized">
</div>
<div class="subpixel">
</div>
I want to make a rotation of my loading icon by CSS.
I have an icon and the following code:
<style>
#test {
width: 32px;
height: 32px;
background: url('refresh.png');
}
.rotating {
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-webkit-transition-delay: now;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>
<div id='test' class='rotating'></div>
But it doesn't work. How can the icon be rotated using CSS?
#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>
Working nice:
#test {
width: 11px;
height: 14px;
background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
}
<div id='test' class='rotating'></div>
Infinite rotation animation in CSS
/* ENDLESS ROTATE */
.rotate{
animation: rotate 1.5s linear infinite;
}
#keyframes rotate{
to{ transform: rotate(360deg); }
}
/* SPINNER JUST FOR DEMO */
.spinner{
display:inline-block; width: 50px; height: 50px;
border-radius: 50%;
box-shadow: inset -2px 0 0 2px #0bf;
}
<span class="spinner rotate"></span>
MDN - Web CSS Animation
Without any prefixes, e.g. at it's simplest:
.loading-spinner {
animation: rotate 1.5s linear infinite;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
Works in all modern browsers
.rotate{
animation: loading 3s linear infinite;
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
}
#keyframes rotate {
100% {
transform: rotate(1turn);
}
}
div{
animation: rotate 4s linear infinite;
}
Simply Try This. Works fine
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#loading {
width: 16px;
height: 16px;
-webkit-animation: loading 2s linear infinite;
-moz-animation: loading 2s linear infinite;
}
<div class="loading-test">
<svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>
Rotation on add class .active
.myClassName.active {
-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);
}
}
<style>
div
{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>
the easiest way to do it is using font awesome icons by adding the "fa-spin" class. for example:
<i class="fas fa-spinner fa-3x fa-spin"></i>
you can save some lines of code but of course you are limited to the icons from font awesome. I always use it for loading spinners
here you have the documentation from font awesome:
https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use