I have an svg-diagram that works properly in Chrome, but not in Firefox. I read some tasks about similar problems on this site, but the solution did not found. As i know latest Firefox browsers dont need vendor prefixes neither keyframe or transition. So i stuck a little.
Also i tried to add -moz prefixes but it doesnt help
#keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
Here is my code http://codepen.io/tvsjke/pen/OpVjON
I would be very grateful if you could point to the root of the problem.
Related
I have a set of boxes where each box has an animation:
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(0); }
100% { transform: scale(1); }
}
In order to create a waving flag effect, I use the animation-delay CSS property:
.pulsate1 {
-webkit-animation-delay: 2s;
}
.pulsate2 {
-webkit-animation-delay: 2.05s;
}
/* And so on up to pulsate20 */
These pulsateN classes are wrapped around each row of boxes.
There is some occasional flickering using this method, as seen in this fiddle. Is there another better solution?
The flickering occurs because CSS doesn't know what to do with scale of 0. Change it to something low like 0.001 and enjoy your smoothly-waving flag :)
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0.001) translateZ(0) }
100% { transform: scale(1) translateZ(0) }
}
(As mentioned by skyline You can add translateZ(0) to take advantage of the GPU)
scale() is a 2D transformation style. Try adding translateZ(0) or translate3d(0,0,0) to the animation. This will trick the browser into thinking it's doing 3D transformations and will offload the work to the GPU if available. I'm not seeing any flickering on Chrome 49.
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0) translateZ(0); }
100% { transform: scale(1) translateZ(0); }
}
Here's an article explaining the performance benefits of translate3d: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
I am having an issue getting keyframe animations to work on either desktop or mobile safari.
My Code.
#keyframes bounce {
0% {
transform: scale(1, 1) translateY(0);
}
50% {
transform: scale(1.25, .85) translateY(27px);
}
100% {
transform: scale(1, 1) translateY(0);
}
}
#-webkit-keyframes bounce {
0% {
transform: scale(1, 1) translateY(0);
}
50% {
transform: scale(1.25, .85) translateY(27px);
}
100% {
transform: scale(1, 1) translateY(0);
}
}
.my-animation {
animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite
}
I have tried setting the animation longhand as well. Works fine in chrome but not working in safari desktop or mobile.
You need to add -webkit- to transform as well, so it'll be like:
transform: scale(1, 1) translateY(0);
-webkit-transform: scale(1, 1) translateY(0);
use -webkit-transform in case of #-webkit-keyframes
Check here http://caniuse.com/#feat=transforms2d
Ok. I tried to search for this question. and it's very simple. I have a css swing animation working good in firefox but not in chrome. Of course, I added the webkit prefix. but still no luck. I changed the iteration count to infinite and finally it is working, but no I don't want it to run infinitely. Is this really a bug? does anybody find a solution? here's the link to the code I made in jsfiddle .. http://jsfiddle.net/7t1uvyup/2/ and here's the actual code.
.x{
height:50px;
width:50px;
background:#000;
position:fixed;
}
.x:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
/* change webkit iteration count to infinite and it will work on chrome but of course with infinite animation */
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<div class="x"></div>
I did some research.. CSS is Hardware-Accelerated..
So this is not just a weird random bug.
I ran into this problem just now. To me it seems that the animation takes place in very short period of time and many times it is not noticable to human eyes; i.e. Chrome does not respect animation duration parameter when webkit-animation-iteration-count is not infinite.
To me it doesn't seem to be a random bug. It is reliably reproducible.
Try visiting http://www.w3schools.com/css/css3_animations.asp with different browsers. Chrome shows the worst performance; CSS3 animation box does not animate; it just stays.
is it possible to combine all browser compatible tags like -webkit, -moz, -ms, -o for one styling? So for example:
#-webkit-keyframes pulsate,
#-moz-keyframes pulsate,
#-ms-keyframes pulsate,
#-o-keyframes pulsate,
keyframes pulsate {
from {opacity: 1 }
to { -webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
opacity: 0 }
}
If it's not. Is there any document about that to read?
No, it's not possible. However, you can write just the unprefixed version and then use something like -prefix-free or Autoprefixer to add the prefixes for you. Or you can use a preprocessor. You can read a bit more about your options in this article.
If you do want to write everything by hand, the good news is that you don't need the -ms- prefix for animations. IE10 supports them unprefixed, while IE9 doesn't support them at all. So you only need to write this:
#-webkit-keyframes { to { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } }
#-moz-keyframes { to { -moz-transform: scale(1.5); opacity: 0; } }
#-o-keyframes { to { -o-transform: scale(1.5); opacity: 0; } }
#keyframes { to { transform: scale(1.5); opacity: 0; } }
You don't necessarily need the from keyframe either. If it's missing it gets automatically generated from the default values or those already specified outside the keyframes.
Here's the fiddle: http://jsfiddle.net/joplomacedo/mnj8n/
#-webkit-keyframes half-flip {
0% { -webkit-transform: rotateX(0deg); }
100% { -webkit-transform: rotateX(90deg); }
}
.half-flip-out {
-webkit-animation: half-flip 1s;
-webkit-transform: rotateX(90deg);
}
.half-flip-in {
-webkit-animation: half-flip 1s reverse;
-webkit-transform: rotateX(0deg);
}
I'm toggling the classes with jQuery. For some reason, .half-flip-in is doing exactly the same as .half-lip-out. I can't figure out why.
The problem does not lie in animation-direction. I'll explain more later so let's just dive into it for now.
Your CSS3 keyframes animation declarations should look like this instead:
#-webkit-keyframes half-flip {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(90deg);
}
}
#-webkit-keyframes half-flip02 {
0% {
-webkit-transform: rotateX(90deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
.half-flip-out {
-webkit-animation: half-flip 1s;
}
.half-flip-in {
-webkit-animation: half-flip02 1s;
}
As you can see in the above, there are 2 #-webkit-keyframes declarations - each being the direct opposite of the other. Note also that I removed -webkit-transform: rotateX(0deg); and -webkit-transform: rotateX(90deg); from both .half-flip-out and .half-flip-in. The reason is simple: It is already defined in the keyframes animation at 0%, which is the 1st frame, and at 100%, which is the last frame.
Next, you should clear up your jQuery. It is not necessary to use a counter to decide which class to add or remove from the DIV. Also, shorter codes in jQuery equates to faster execution. Always optimize your codes.
This is how your jQuery looks like:
var folding_img_wrap = $('.folding_img_wrap'),
toggle_count = 0;
$('.toggle').on('click', function() {
if (toggle_count % 2 === 0) {
folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
} else {
folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
}
toggle_count++;
});
And this is how I recommend it should be:
var folding_img_wrap = $('.folding_img_wrap'),
$(".toggle").toggle(function(){
folding_img_wrap.addClass('half-flip-in').removeClass('half-flip-out');
},function(){
folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
});
You can view my solution here.
Remember also to use the -moz- prefixes for your CSS3 declarations otherwise, this is only gonna be working on Chrome & Safari. Also note that keyframes isn't supported in IE9 or in Opera.