On loading state I have a #keyframes animation running.
#keyframes graph-line-loading {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
When I stop the animation graph__line jumps to translateY() value (set inline).
However the background-color does nicely animate.
I would expect transition property working on transform as well.
.graph__line {
transition-property: transform, background-color;
}
If the background-color is included in #keyframes animation it doesn't get transitioned on state change either.
Seems like whatever property is animated in #keyframes gets ignored by transition property even though #keyframes is added via different class.
Plz check the fiddle.
https://jsfiddle.net/LukaG/m4bzk6e3/
Any ideas?
Related
How to create this kind of css animation where element fades in from the bottom but appears like clipped with overflow:
http://fr.creasenso.com/ (see the breadcrumb text)
I've tried all the basics but not going anywhere with translateY. Do I need to go to libraries or is it achievable with css only?
The wording of your question could use some improvement. But besides that, I think this is what you are looking for:
https://jsfiddle.net/5ws33c8s/
You need a parent element which has a overflow: hidden. Followed by the childs which are moved out using translate: translateY().
I then used css keyframes to move it back in:
animation: fadeInText 300ms 0ms forwards;
#keyframes fadeInText {
from {
transform: translateY(30px);
opacity: 0;
} to {
transform: translateY(0);
opacity: 1;
}
}
This animation is set up as follows; fadeInText is the keyframes name, 300ms is the duration of the animation, 0ms is the delay of said animation and forwards remembers the final state of the animation, and leaves the element as such. Without it, the element would jump back to its original values.
I then used a delay on each child element.
span:nth-child(2) {
animation-delay: 150ms;
}
Why does the following clipPath animate in Chrome but not Firefox?
http://jsfiddle.net/H8S3k/67/
.graph {
transform: translateY(150px);
animation: 2s ease-out 0s normal none infinite popup;
}
#keyframes popup {
0% {
transform: translateY(50px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(50px);
}
}
In SVG 1.1, only certain attributes were deemed to be stylable with CSS. These particular set of attributes were called "properties". You can see the list of designated properties here:
https://www.w3.org/TR/SVG/propidx.html
transform is not one of those, so it cannot be styled with CSS.
However in SVG 2, which is not yet finalised, all SVG attributes will probably be made stylable. Chrome has begun implementing this, however Firefox has not yet. That is why your example works in Chrome but not Firefox.
Question: Why does my CPU register ~30% when blur is applied versus ~6% when no blur is applied to an animated object?
Details:
I have a set of randomly generated items on a page that have a CSS animation assigned (in a CSS file) and randomly generated values for width, height, and importantly, blur, applied inline.
CSS file styles looks like:
animation-name: rise;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translateZ(0);
width, height and blur are applied inline via style attribute.
<div class="foo" style="width:99px;height:99px;
filter:blur(2px);
-webkit-filter:blur(2px) opacity(0.918866247870028);
-moz-filter:blur(2px) opacity(0.918866247870028);
-o-filter:blur(2px) opacity(0.918866247870028);
-ms-filter:blur(2px) opacity(0.918866247870028);"></div>
With the blur enabled my CPU usage is ~30%. When I disable the blur, CPU usage goes down to ~6%.
What's happening here? Is chrome only able to GPU accelerate when no blur is applied? If so, why?
Update 1:
The animation rise looks as follows:
#keyframes rise {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-1000px);
}
}
I don’t think the blur is actually causing your issues, it just seems to make it more noticeable than before. The problem is that the transform: translateY in your animation is overwriting the transform: translateZ(0) you’re using to force GPU acceleration.
This is a timeline recording for the the code you’re running right now, notice how there’s all this activity on the main and raster threads:
Now compare this to a recording where I applied will-change: transform to the .foo:
No activity on the main and raster whatsoever.
There’s two steps to applying this fix:
Apply will-change: transform to .foo. This will let the browser know you intend to change that property and have it render that element on the GPU to account for this.
No versions of Edge and IE support will-change at the moment. Therefore we’ll use transform: translate3d(0, -1000px, 0); in the animation to force GPU acceleration. Note this is a hack, so we’ll detect support for will-change and use transform: translateY in browsers that support it.
Final code:
#keyframes rise {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, 1000px, 0);
}
}
#supports (will-change: transform) {
#keyframes rise {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(1000px);
}
}
}
div {
width: 100px;
height: 100px;
background: #f00;
animation: rise forwards 2s linear infinite;
will-change: transform;
}
See here for a working version: http://jsbin.com/mosuvikoto/edit?html,css,output
Don't blur it in inline styles. Put your blur in the style file.
I am trying to have an element scale up from 0 on page load, but that element needs to be rotated. Seems like a simple thing, but it seems to apply the rotation after the animation finishes:
#-webkit-keyframes scale{
0%{-webkit-transform: scale(0);}
100%{-webkit-transform: scale(1);}
}
div{
-webkit-transform: rotate(30deg);
-webkit-animation: scale 2s;
}
http://jsfiddle.net/mildfuzz/wnpVp/
You need to use the transform shorthand within the #keyframes rule, as your rotate() function is outside the rule and thus not animating like you expected.
http://jsfiddle.net/wnpVp/3
I have a simple animation like this:
.elem:hover {
-webkit-transform: scale(1.3);
-webkit-transition: all .4s;
}
When I hover, it scales correctly. But just when it was about to finish, it suddenly pops back to the former size and then snaps to the completed scaled up version.
How do I fix this?
You have it a little bit wrong, you have to set the attributes a little differently:
.elem { -webkit-transition: all .4s ease-in-out; }
.elem:hover { -webkit-transform: scale(1.3); }
You need to set the animation attributes on the element itself, and then the action on the hover :)
Working example (Webkit browsers only).