I've create a svg image, now the problem is i'm trying to animate that image with css3 animations
#keyframes animate {
from {transform: scale(1);}
to {transform: scale(10);}
}
but the image is blurring during the animation, and immediately become fine after the animation.
Is there any solution for not blur the image during the animation?
This happens with all elements regardless of whether or not they're SVG. The browser doesn't recalculate the dimensions and such until the element is done animating.
You can try forcing the GPU to render it by adding translate3d(0,0,0) or translateZ(1px), but I am unsure if this will actually help the rendering.
As such, you should set the initial value to the smaller one and animate to scale(1) instead. In your case the smaller value would be scale(.1)
You can try animating width and height instead of transform.
#keyframes zoomSize {
from { width: 30px; height: 30px; }
to {width: 300px; height: 300px; }
}
Here's a running example.
Related
I am using css transitions to lay out a bunch of divs on top of each other. At any point, one of the divs may collapse. And all of the divs below it are supposed to move up to fill its spot.
Here is a codepen that describes the situation.
The css I am using is the following:
div {
height: 100px;
width: 100px;
margin: 15px;
}
.top {
background-color: red;
transform-origin: top;
animation: move 2s infinite;
}
.bottom {
background-color: blue;
}
#keyframes move {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
With this, the top div will expand and contract. I want the divs below it to move up as the top one collapses.
If I switch transform for height, like this:
#keyframes move {
0% {
height 0;
}
50% {
height: 100px;
}
}
The bottom divs do move, but this is not a good solution for me because in the actual application, each div has a dynamically calculated size.
How can the bottom divs move smoothly with the top div?
With transform you won't be able to do that, as when an element is transformed, the surrounding elements won't see any change in the DOM, as DOM-wise nothing have happened.
What you can do to optimize it all, is to prepare the browser that the height will change, with the property will-change: height
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
This new CSS property aim's to do what transform does, make smoother and more optimized animations.
Do note though:
will-change is intended to be used as a last resort, in
order to try to deal with existing performance problems. It should not
be used to anticipate performance problems.
Another possible solution (read hack), is to trick the browser to use GPU instead of CPU, shown in this answer (see its p.1):
CSS `will-change` - how to use it, how it works
Updated
In case of the height is auto, or similar, this will work with the max-height trick, and here is a couple of answers of mine, showing how-to:
CSS Animation on max-height change
Can't use the same animation in reverse for class toggle
CSS transition auto width
And the last resort, if none of the above is applicable, is to use a small script and either create a styles dynamically (links below), or set them inline.
Dynamically styling pseudo-elements using jQuery or Javascript
How to prevent css from getting converted to inline css
This is a chrome only question. I'm using chrome 56 on OSX, but I also tested this on Windows 8 using chrome 57.
I have an animation that is gpu accelerated, using will-change: transform and a keyframe animation using transform: translateY(...) to move an element around the screen.
.block {
height: 20vh;
width: 20vh;
background-color: black;
animation: move 5s linear infinite;
will-change: transform;
}
#keyframes move {
0% { transform: translateY(0%); }
50% { transform: translateY(400%); }
100% { transform: translateY(0%); }
}
Example on codepen: http://codepen.io/nicokoenig/full/PmYaOZ/
The animation itself is handled on the chromes compositor thread and is therefor not affected if the main thread is blocked.
When I record a timeline, I still see that there is a style calculation for each frame.
Why does chrome need to recalculate styles, even if the animation is handled on the compositor thread?
UPDATE
I reviewed my code and added three types of animations.
the first animtion is using a fixed viewport unit (vh) to translate the box.
the second animation is using a fixed pixel value to translate the box.
the third animation is using a percentage value to translate the box.
I also added button to block the main thread - if I hit the button:
the first and second animation will still move around the screen, the third one freezes.
I think that is the answer - an animatoin using translate with percentage values needs to recalculate styles during the whole animation.
The behavior is a known chrome bug.
https://bugs.chromium.org/p/chromium/issues/detail?id=711645
https://bugs.chromium.org/p/chromium/issues/detail?id=389359
What's wrong with my CSS3 newbie animation? It won't go all the way across the screen even when I set it to from 0px, to 100%.
https://jsfiddle.net/VCUgrad08/38grd6co/
Unfortunately the image won't show up but you can see the fallback text moving to get the gist of what's wrong.
<object id="pandaMove" data="http://svgshare.com/i/gY.svg" type="image/svg+xml">This is an image</object>
to {transform: translateX(100%);} in the keyframe rules makes the svg container move by 100% of it's own width, not that of the parent element...
If you know the width of the svg element, you can use this type of rule (in my example the width would be 320px):
#keyframes pandaRight {
from {left: 0px;}
to {left: calc(100% - 320px);}
}
https://jsfiddle.net/7t6gcfr0/
I was creating a custom photo gallery, and suddenly faced this problem. If you create a #keyframes animation it can't be played the reverse way.
For example: You have an animation, which enlarges the square through scale(). If you hover it the square smoothly enlarges, but if you move the mouse out, your square will bounce back without animation.
Is there a way to reverse the animation on the back route? Transitions aren't working properly in my case. Thanks.
if you want to enlarge and image, you don't need to make an animation using #keyframes. you just make the image scales when hovering over it and make it scales slowly using CSS transition, for example:
img:hover {
transform: scale(2);
}
img {
transition: all 1s;
}
.image{
margin:400px;
padding-top:5px;
overflow:hidden;
transition-duration:0.9s;
transition-property:transform;
}
.image:hover{
transform:scale(2.5);
}
<img class="image" src="download.jpg" alt="a" />
I am trying to animate background of an element that is 100% wide and tall. It is a simple CSS3 animation using steps to go through the sprite image.
The animation looks like this:
.play-intro{animation: play 2s steps(6);}
#keyframes play {
from { background-position: 0 0 ; }
to { background-position: -7800px 0 }
}
The issue is that I am seeing each sprite change, it is not working as it should be. I don't know, but I believe it is maybe due to background-size:cover property. Any advice on this?
I created a fiddle to recreate the issue:
http://jsfiddle.net/QKwjM/1/
And this is the fiddle in fullscreen, the issue is best seen there.
http://jsfiddle.net/QKwjM/1/embedded/result/
If you set
background-size: cover;
the background-size is variable (adjusts to the space) and that breaks the animation.
Since your last keyframe is -7800px, the background-size-x must be exactly that
background-size: 7800px 701px;