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! :)
Related
#-webkit-keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
#-moz-keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
.animated-div {
-webkit-animation: fadein 4s 1 forwards;
-moz-animation: fadein 4s 1 forwards;
animation: fadein 4s 1 forwards;
}
<div class="animated-div">hello</div>
Keyframes does not work and item does not fadein on the page, how to be?
I tried different combinations of prefixes, does not help. In Chrome, Opera working fine.
Deleting opacity: 0!important really help,but i dont know how it was animate in Chrome and Opera even with opacity: 0!important. Thanks all.
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);}
}
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 create a beginner's CSS3 animation. It's working in Chrome, Opera and Safari but doesn't in Internet Explorer (11) and Firefox (34.0)
I'm using the -moz- prefix, but it isn't working… I don't know why.
body{
width:100%;
}
#center{
width:900px;
margin:0 auto;
height:800px;
display:block;
}
#center .box{
width:100px;
height:100px;
background-color:black;
margin:0 auto;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s; /*Explorer*/
-moz-animation: myfirst 5s; /*Mozilla*/
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst{
from{backgrond:black;}
to{background:yellow;}
}
#-moz-keyframes myfirst{
from{background:black;}
to{background: :yellow;}
}
#keyframes myfirst {
from{background:black;}
to{background: :yellow;}
}
JSFiddle
There are a few small tweaks required for your animation to work:
remove the double ::, as this isn't correct syntax
your non-prefixed animation should be placed below any prefixed animations.
LIVE DEMO
tested in Chrome 39, IE 11 and Firefox 33
You need to correct the typo : inside the keyframes
Check fiddle here
#center .box{
width:100px;
height:100px;
margin:0 auto;
background-color:black;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /*Végtelen újrajátszás */
-moz-animation: myfirst 5s; /*Mozilla*/
-moz-animation-iteration-count: infinite;
animation: myfirst 5s; /*Explorer*/
animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst{
from{background:black;}
to{background:yellow;}
}
#-moz-keyframes myfirst{
from{background:black;}
to{background:yellow;}
}
#keyframes myfirst {
from{background:black;}
to{background:yellow;}
}
Below i have corrected the keyframes don't use unwanted semi-colon
#-moz-keyframes myfirst{ /* firefox */
from{background:black;}
to{background: :yellow;}
}
#-ms-keyframes myfirst{ /* explorer */
from{background:black;}
to{background: yellow;}
}
and also and the box class
-ms-animation: myfirst 5s; /*Explorer*/
I'm playing with some css transitions and setting a different animation-delay for dynamic elements so the css animations are staggered on the page.
Here is the animation
-webkit-animation: bounceInLeft .5s ease-in 0s backwards;
-moz-animation: bounceInLeft .5s ease-in 0s backwards;
animation: bounceInLeft .5s ease-in 0s backwards;
The actual animation is working fine on both ff and chrome but on firefox the animations are correctly delayed in intervals whereas on chrome all the animations happen instantly.
Here is the inline code. This works correctly on firefox
style="animation-delay: 1s;"
This does not work on chrome
style="-webkit-animation-delay: 1s;"
I have specified a delay in the animation rule but I thought that placing one inline would override it, which it does on firefox. Any ideas? Thanks
I just created a jsfiddle replicating you situation and it seems to be honoring the inline delay in chrome for me. Perhaps there is an issue elsewhere. Check out this fiddle, maybe it will help illuminate a separate issue. http://jsfiddle.net/vFKuu/
HTML
<div id="some-div" style="animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;">Hi</div>
Javascript
#some-div
{
width:100px;
height:20px;
background:#f00;
font-family:Arial;
-webkit-animation: cssAnimation .5s ease-in 0s backwards;
-moz-animation: cssAnimation .5s ease-in 0s backwards;
-o-animation: cssAnimation .5s ease-in 0s backwards;
animation: cssAnimation .5s ease-in 0s backwards;
}
#keyframes cssAnimation {
from { transform: translate(50px); }
to { transform: translate(0px); }
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: translate(50px); }
to { -webkit-transform: translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform:translate(50px); }
to { -moz-transform: translate(0px); }
}
#-o-keyframes cssAnimation
{
from { -o-transform: translate(50px); }
to { -o-transform: translate(0px); }
}
I've found something weird. For some reason the only way the inline would override the style rule in chrome is if the animation-delay is a value that is not 0.
It works fine in firefox if the value is 0 just not chrome. I fixed it by changing the initial value of the delay to 1s then overriding it using inline styles.