CSS animation better performance

Question

Is it possible to change something to get better performance of CSS animation: translate and opacity png file?

.chmura2 {
    top: 0px;
    left: -100%;
    animation: chmura2a ease-in-out 13s normal;
    -webkit-animation: chmura2a ease-in-out 13s normal;
    -webkit-transform: translateZ(0);
    background-image:url(chmura_pomar.png);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes chmura2a {
    0% {
        transform: translate(0px, 0);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: opacity(100%);
        filter: alpha(opacity = 100);
    }
    30% {
        transform: translate(100%, 0);       
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: opacity(100%);
        filter: alpha(opacity = 100);
    }
    56% {
        transform: translate(100%, 0);       
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: opacity(0);
        filter: alpha(opacity = 0);
    }
    100% {
        transform: translate(250%, 0);       
        opacity: 0;
        filter: opacity(0);
        filter: alpha(opacity = 0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}
@-webkit-keyframes chmura2a {
    0% {
        -webkit-transform: translate(0px, 0);
        -webkit-opacity: 1;
        opacity: 1;
        filter: opacity(100%);
        filter: alpha(opacity = 100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    }


..........................................
    }

I know that there is little mix with -webkit- and normal keyframe, but Internet Explorer sometimes is reading from -webkit sometimes from normal keyframe so I dubeled some commands.

You should be able to just use opacity (and not the filter versions) as all the latest browsers should support it — Pete
– Pete, Commented Jan 7, 2016 at 9:57
You have also missed your closing bracket before your first keyframes: jsfiddle.net/0bmpfL0u — Pete
– Pete, Commented Jan 7, 2016 at 10:04
I've missed it at paste here. Thanks for Your answer. Should I use -webkit-keyframes too? — p0mian
– p0mian, Commented Jan 7, 2016 at 10:11

Todd Moore · Accepted Answer · 2016-01-07 10:54:37Z

1

you could try adding will-change: opacity; to .chmura2 for hardware acceleration, although it's not supported by IE (yet).

Another option, although it's technically a hack, is to use a 3D transform, i.e. transform3d(0,0,0).

answered Jan 7, 2016 at 10:54

Todd Moore

4302 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

p0mian Over a year ago

Is there a different between transform3d(0,0,0) and transform: translateZ(0);?

p0mian Over a year ago

I think that 'will-change: transform, opacity;' worked for chrome

Todd Moore Over a year ago

You want to use a 3D transform as they're hardware accelerated. translateZ isn't I don't believe.

Collectives™ on Stack Overflow

CSS animation better performance

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related