I have an element with a background image that simply moves up and down using css transitions. At some points in the animation the image goes slightly blurry. The graphic is more pixel art so it's really noticeable.
Is there any way I can have a smooth animation without the edges going blurry?
Additionally, is there any way to make Firefox animations smoother?
UPDATE (ignore code below): http://codepen.io/anon/pen/gpMvzb
#elem {
width: 152px;
height: 68px;
-webkit-animation-name: Floating;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-webkit-transform: translateZ(0);
}
#-webkit-keyframes Floating {
from {-webkit-transform:translateY(0); }
50% {-webkit-transform:translateY(2px);}
to {-webkit-transform: translateY(0);}
}
#-moz-keyframes Floating {
from {-moz-transform:translateY(0);}
50% {-moz-transform:translateY(2px);}
to {-moz-transform: translateY(0);}
}
Related
I have a question that might sound stupid, but here it goes anyways.
For starters, here is the website I'm creating.
www.redshedproductionsllc.com
I have an animation running on an h1 element on my website that fades in after a delay. The problem was is that the text showed before the animation started, so it kind of had a glitchy start. I found a workaround that works flawlessly on chrome, but not on any other browser. The element simply stays hidden. Here is my CSS.
#fading1 {
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
}
#fading2 {
visibility: hidden;
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein -4s; /* Opera */
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
-moz-animation-fill-mode: forwards; /*FF 5+*/
-webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
-o-animation-fill-mode: forwards; /*Not implemented yet*/
-ms-animation-fill-mode: forwards; /*IE 10+*/
animation-fill-mode: forwards; /*when the spec is finished*/
}
Check it out on chrome, then check it out on firefox or safari. Chrome fades in flawlessly, while the other two stay hidden. Please help!!!
First of all, there is no such thing as moz-prefixed animation-delay. Having -moz-animation-delay: 2s is unneccessary. I'm not sure why it is working in chrome and not Firefox, but I have a feeling that the animation of visibility doesn't work well in all browsers.
It would make more sense to me to fade it in from opacity: 0 to opacity: 1 over three seconds, but make the first two seconds the delay, keeping the opacity at 0.
#keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
}
#-webkit-keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
}
.fade{
opacity: 1;
-moz-animation: fadein 3s;
animation: fadein 3s;
width: 100px;
height: 100px;
background: blue;
}
JSFiddle
I am not very sure but you have to use something like this:
So the thing is, you have to specify certain functions of CSS for each and every browser, so you should do like this:
#-webkit-keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
-moz-boxshadow
Read MDN guides for these prefixes.
Hope it helps! :)
I've just set up a few css animations and everything is running smoothly in Chrome and Safari however Firefox doesn't appear to be playing nice.
The following code:
#clock-animation .hour {
-webkit-animation: anti-spin 30s infinite;
animation: anti-spin 30s infinte;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
Appears to be displaying as:
#clock-animation .hour {
transform-origin: 50% 50% 0;
}
When viewed in Firebug and consequently the animation isn't playing.
I'm a tad confused as to why this is and nothing appears to be fixing it.
Here are the keyframes used too:
#-webkit-keyframes anti-spin {
100% {
-webkit-transform: rotate(-360deg);
}
}
#keyframes anti-spin {
100% {
transform: rotate(-360deg);
}
}
According to http://shouldiprefix.com/ the -moz prefix isn't needed for keyframes, animation or transform. Nor is the -webkit which is only needed for Chrome and Safari. Any help would be great.
Edit: Just to mention that the IDs and classes are part of an inline SVG file. I'm not sure if that is relevant or not?
Edit: Heres a link to a demo https://jsfiddle.net/0Lha6dfg/ (Works fine in Chrome / Safari but not in FF (36.0.1))
Make sure to write out your animation shorthand property in full, do not skip properties. Shorthand format from w3 specs:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Becomes:
div {
animation: example 5s linear 2s infinite alternate;
}
So in your example add the animation-delay:
animation: anti-spin 30s linear infinite;
Should be:
animation: anti-spin 30s linear 0s infinite;
Also watch out for typos, in some places you have "infinte" instead of "infinite".
I'm trying to animate an image so that it keeps spinning infinitely, because it shall represent a loading process. The image is this one if you cannot imagine what I mean:
The problem is that after the animation has run it always stops for a moment. What can I do about it? Is there any way to make the transition fluent?
Here's the jsfiddle, where I replaced the image with a div
And the CSS seperately:
.load { /* load is a little div in this case */
height: 20px;
width: 20px;
border: 2px solid black;
animation-name: myAni;
animation-timing: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0;
-webkit-animation-name: myAni;
-webkit-animation-timing: linear;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
}
#keyframes myAni {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes myAni {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
The problem is that animation-timing should be animation-timing-function, otherwise you get the default ease that causes the slow start and end. It was marked red in your JSFiddle.
I have chained two animations in a loop. After a lot of tweaking the images scroll in and out without overlapping. The problem is once the animations have finished there is a 3-4 second delay before they restart. I have not set any delays in my code so think there's a problem with the keyframes but when I play around with the values the images start to overlap.
I have made a pen here. Only chrome keyframes at the moment, the animation staggers in codepen but displays fine in chrome :
http://codepen.io/Nullbreaker/pen/gnkbq
<div class="rightleftloop">
<img src="http://myshoedream.com/dzinehub/Shoefever/LL10173A-BLACK-4.jpg" class="imgformat1" alt="slide" />
</div>
<div class="rightleftloop2">
<img src="http://myshoedream.com/dzinehub/Shoefever/LL10173BJ-IVORY-4.jpg" class="imgformat1" alt="slide" />
</div>
.rightleftloop {
position: absolute;
-webkit-animation:rightleftloop;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
-moz-animation:rightleftloop;
-moz-animation-duration: 3.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in 0.3s;
-moz-animation-fill-mode: both;
animation:rightleftloop;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in 0.3s;
animation-fill-mode: both;
}
.rightleftloop2 {
position: absolute;
-webkit-animation:rightleftloop2;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
-moz-animation:rightleftloop;
-moz-animation-duration: 3.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in 0.3s;
-moz-animation-fill-mode: both;
animation:rightleftloop;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in 0.3s;
animation-fill-mode: both;
}
#-webkit-keyframes rightleftloop {
0% {right:0%;-webkit-transform: translateX(-2000px);}
10% {right:20%;}
20% {right:20%;}
30% {right:20%;-webkit-transform: translateX(-10px);}
40% {right:20%;-webkit-transform: translateX(-10px);}
60% {right:20%;-webkit-transform: translateX(-2000px);}
100% {right:100%;}
}
#-webkit-keyframes rightleftloop2 {
60% {right:0%;-webkit-transform: translateX(-2000px);}
61% {right:20%;}
63% {right:20%;}
64% {right:20%;}
65% {right:20%;}
65% {right:20%;}
66% {right:20%;}
67% {right:20%;}
68% {right:20%;-webkit-transform: translateX(-2000px);}
69% {right:20%;-webkit-transform: translateX(-1000px);}
}
Your animation keyframes were not right. I've simplified your CSS as well. You can paste this css in your pen and see the results for yourself.
body {
background:#ffffff;
font-family:'Economica', Arial, sans-serif;
font-size:30px;
font-style: normal;
font-weight: 400;
color:#000000;
}
/* as properties for both required images are the same, we are using them as one group */
.rightleftloop, .rightleftloop2 {
position: absolute;
-webkit-animation:rightleftloop;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
}
/* the second image animation will start with a delay of the half time as the original animation time as we set our images out of the frame from 50%-100% in the keyframes - this animation delay only comes up once before the start of the original animation */
.rightleftloop2 {
-webkit-animation-delay: 4250ms;
}
/* one animation with pre-defined delay from 50%-100% of the time as content hidden so what ever animation we need will be done between 0%-50% */
#-webkit-keyframes rightleftloop {
0% {
-webkit-transform: translateX(-500px);
}
15% {
-webkit-transform: translateX(20px);
}
35% {
-webkit-transform: translateX(20px);
}
50% {
-webkit-transform: translateX(-500px);
}
100% {
-webkit-transform: translateX(-500px);
}
}
I found a nice tutorial on css3 transitions by richard bradshaw which can be found at
http://css3.bradshawenterprises.com/cfimg/
I am trying to set up my Master Page (ASP.Net 4) with a div that has 3 images transitioning
Visual Studio 2010 doesn't like the following keyframes directives AT ALL why? I am set on html5 and css3.
#-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
Here is the animation code;
.logotransitions img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 18s;
-moz-animation-direction: alternate;
}
Those are just the animation definitions... you still need to declare that your targeted elements use that animation :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite;
-moz-animation : cf3FadeInOut 1s ease infinite;
animation : cf3FadeInOut 1s ease infinite;
}
By the way, unless you're targeting only webkit & mozilla browsers, you should update your code (definitions & declarations) to include all the browser vendors :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite; /*webkit*/
-o-animation : cf3FadeInOut 1s ease infinite; /*opera*/
-moz-animation : cf3FadeInOut 1s ease infinite; /*mozzila*/
-ms-animation : cf3FadeInOut 1s ease infinite; /*ie*/
animation : cf3FadeInOut 1s ease infinite; /*no vendor*/
}
/*...*/
#-o-keyframes cf3FadeInOut {/*...*/}
/* ... and so on*/