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!
Related
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!
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
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.
I am trying some CSS3 keyframe animations in a web app I'm developing. I have tried both my own custom animations and some provided by animate.css. The result is the same: the animation works fine, but after a while, even if I leave the browser alone, the CPU usage goes up to around 100% and stays there. Killing that process kills the web app, removing the CSS animations gets rid of the problem, so there is no doubt what's causing it. I am mainly using Chrome, and that's where I have seen the problem so far.
Target platforms for the web app includes iOS and Android via Phonegap, Windows and OSX via node-webkit. The problems I describe do not seem to occur in mobile Safari, but what about other platforms? Is this a general problem with keyframe animations? Are there any tricks to avoid this?
EDIT: Added demo link, but unable to replicate the problem. In the full app I am using a number of libraries and frameworks, like AngularJS, Angular-UI, Angular-UI-router, Fastclick, Animate.css, etc. I guess they might interfere somehow? Hard to say, but removing my animations from the app also removed the delayed 100% CPU usage.
HTML:
<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>
Javascript:
document.getElementById('start').addEventListener('click', function(e) {
document.getElementById('ball').classList.add('remove');
});
document.getElementById('reset').addEventListener('click', function(e) {
document.getElementById('ball').classList.remove('remove');
});
CSS:
.ball {
width:100px;
height:100px;
border-radius:100px;
background-color:darkred;
position:absolute;
top:100px;
left:200px;
}
#-webkit-keyframes slide {
from { top:100px; left:200px; }
to { top:100px; left:-100px; }
}
.remove {
animation: slide 1s linear;
-webkit-animation: slide 1s linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
The cause of the 100% CPU usage is due to the -webkit-animation-fill-mode: forwards declaration, if my suspicion that you're doing your primary testing on Chrome is correct.
It looks like it's a current bug with Chrome (tested on version 30.0.1599.101), according to an article by Wercker and my own research:
For this animation we use animation keyframes and the
-webkit-animation-fill-mode: forwards; so that the sidebar retains its position from the last frame of the animation. An animation normally
would snap back to its original setting after it is finished playing.
This is great for us, but not for Chrome. The CSS animations using
-webkit-animation-fill-mode: forwards; are causing the 100% CPU load bug. It actually only occurs when the CSS animation ends and the tab
is inactive.
This seems to be corroborated by this issue on the Chromium project page.
As Lindsey Bateman says in the article, the bug is fixed in Chrome Beta and Chrome Canary (33.0.1706.0 canary), so we shouldn't be waiting for very long to get this into current Chrome.
If you're using 3d (eg even if not, some recommend tricking CSS into 3d to let the GPU help render), try this trick via mddw
translateZ(0) /* only needed if no CSS-3d commands are used to toggle GPU rendering */
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;
I got rid of the problem by disabling all extensions. It remains to be investigated which one was responsible. These are the suspects:
AngularJS Batarang 0.4.3
avast! Online Security 8.0.1500
ColorZilla 0.5.4
HootSuite Hootlet 4.0.10
iGetter 2.9.2
Intel® XDK 2.6.1
Ripple Emulator (Beta) 0.9.15
Xmarks Bookmark Sync