I am trying to create a css transform for dropdown menu, but it does not work in firefox,
from other posts, I tried this:
...
-moz-animation: flipInX 3s;
...
but it doesn't work in firefox.
this is the test test page:
http://leamratech.com/test/test/test.html
In your animation CSS alongside #-webkit-keyframes flipInX {} you need to add #-moz-keyframes flipInX {} as well. that should resolve your issue.
Take a look at this website HERE ,
It shows you the code, and it works in chrome and firefox (I tested it)
it uses #keyframes
Related
i'm trying to apply a css animation to the root element of a page and it's behaving strangely. you can see it here: http://dinakelberman.com/bucket/circle-test.html
html {
display:block;
transition-duration:1.5s;
background:#E3DCB1;
background-image:url(http://vignette.wikia.nocookie.net/leapfrog/images/b/be/Yellow_Circle.png/revision/latest?cb=20180115233859);
background-size:100%;
animation:rotate 0.5s linear infinite;
}
#keyframes rotate {
0% {transform:rotateY(0deg) rotateX(0deg);}
100% {transform:rotateY(360deg) rotateX(360deg);}
}
in chrome & opera the animation progresses only when the mouse moves
in safari it animates on its own as expected
in firefox it doesn't animate at all
i don't need a solution as to how to make this animation visible by using other elements, i know this is a weird and wrong way to do things.
i'm doing some experimental work where i'm trying to deal exclusively with the root element. i don't really dislike the behaviors but ideally i'd like the results to be the same across browsers so i'm curious about how they're handling this differently.
I created a path in illustrator and then used some CSS in order to animate it. The svg animation works just fine in Chrome and Firefox, However, for a strange reason in safari it's animated backwards! The site is http://www.rw.limdez.eu and is located on the very top banner of the website. You can see it as soon as you click the link! You can only see this on desktop since for mobile it redirects you to the mobile version of the page! This is the CSS I used:
.smallline
{
stroke-dasharray:692;
stroke-dashoffset:-692;
animation-delay: 1s!important;
animation: draw-smallline 8s 1 forwards;
}
#-webkit-keyframes draw-smallline
{
0%{
stroke-dashoffset: -692;
}
100%
{
stroke-dashoffset:0;
}
}
Note1: I also tried it without #-webkit- but i have the exact same results!
Note2: I have seen other very similar questions to mine in stack-overflow but none of them were answered. Not in a way that solves my problem at least! Thank you.
Negative works fine in Safari.
Instead of:
stroke-dasharray:692;
You should use:
stroke-dasharray:692 692;
This was fixed by changing the 0% dashoffset from -692 to 692! If i am not mistaken this occurred because safari does not deal efficiently with negative values!
Assuming this css works ONLY on chrome (i've tested on chrome beta 41.* and actually on 40.0.2214.111 m)
Consider a simple box and a css ":hover" fires a pulse (scale) animation on it.
Here the code
.box{
background-color:black;
width:100px;
height:100px;
position:absolute;
top:25px;
left:25px;
}
.box:hover{
-webkit-animation-name: pulse;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:ease;
}
#-webkit-keyframes pulse{
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
}
}
(jsfiddle here: livedemo)
As you can see this works without iusse on Chrome... but my point is to repeat this animation only 1 time and not infinite.
So lets change the -webkit-animation-iteration-count: infinite; into -webkit-animation-iteration-count: 1; (try it on jsfiddle live demo previosly posted) and the iusse cames out!
Basically if i dont set -webkit-animation-iteration-count to infinite the animation will fired too FAST even apart from explicit number setted!
Any advice is appreciated!
...and just to let u know...
1. I've searched it on chrome bugtrack without results.
2. I've serched here without results except for this post without answere Webkit animation-iteration-count bug in Chrome
3. This code works until last month (i dont remember the exact day when it starts to fail)
4. If i restart my pc this iusse will NOT appear for 1 or 2 times .. but after a few page-refresh i cant able to play animation witn interaction count != infinite!
EDIT: Tested on Chrome Canary Version 42.0.2298.0 canary (64-bit) and it WORKS perfectly... so i guess this error will disappear after a few Chrome standatd updates.
PS: sorry for my poor english!
I have animated some of the elements on my page that I am currently working on, and I have assigned an animation-delay for it, so it can show a bit later on. In chrome everything is okay, it gets the assigned value of 1s. But in all other browsers it is being delayed for 2.5 to 3 seconds. How can I fix this?
Here is a reduced case fiddle:
http://jsfiddle.net/sqnkov/E22ZK/
.delayed {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
P.S>
I have read the MDN post about it being a experimental thingy, but stil - is there a workaround for this issue?
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
The 5seconds comes from .fadeIn which only affects other browsers than Chrome and Safari because you didn't specified a delay for -webkit-
So if what happens on Chrome is what you want, just remove animation-delay: 5s
http://jsfiddle.net/E22ZK/2/
I am trying to loop the divs A, B, C, D continuously and in order using the z-index but I am unable to get the timing right.
I have a codepen here
Any help would be greatly appreciated.
Thanks
I wasn't able to get the timing right for the alternate animation, but here's a working loop that works perfectly, but without alternating:
http://codepen.io/anon/pen/wtqLA
Changes:
animation: move 4s linear infinite; -> animation: move 16s linear infinite;
.block-b {animation-delay: 4s;} -> `.block-b {animation-delay: 8s;}
.block-c {animation-delay: 8s;} -> `.block-b {animation-delay: 12s;}
.block-d {animation-delay: 12s;} -> `.block-b {animation-delay: 16s;}
Also I've added an extra keyframe so that the animation only starts changing z-index at the end of the animation, for better timing:
#keyframes move {
0% { z-index: 0; }
50% { z-index: 0; }
100% { z-index: 10; }
}
I hope this is good enough for you. I couldn't get it to work properly with alternating directions
CSS3 animations are not yet out of the "experimental" phase in some browsers. As you can see here, WebKit browsers (including Opera) still need a prefix to work properly. I am assuming you're testing it in one of the browsers that require the -webkit- prefix. It works perfectly when I open that page in Firefox.
I've added the prefixes that make the animation work in all browsers here.
I realise this is not an answer to your question, but it is a very serious problem if you would want to publish it anywhere.