Trying to make a css animation that fades in on an image from the center by using two centered divs with the same background image [svg], and animating their width and background position. The problem is, on chrome, there's a terrible jitter problem (Maybe from chrome cycling through the animation steps, instead of doing them simultaneously?)
Here's the jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/, where you can see the jitter problem on the left one (which has simultaneous width animation and background-position animation).
Relevant Code (sorry for some leftover stuff from the site it's in)
HTML:
<div class="underheader-wrapper uhw-title">
<div class="underheader uhleft undertitle"> </div>
<div class="underheader uhright undertitle"> </div>
</div>
And CSS:
.undertitle {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
background-image:url(http://cereusbright.com/newsite/presskit/images/underheader.svg);
}
.underheader-wrapper {
position: relative;
margin: auto;
width:320px;
height:100px;
}
.underheader {
-webkit-backface-visibility: hidden;
position:absolute;
width: 0px;
height:100px;
opacity: 0;
background-size: 320px 60px;
background-repeat: no-repeat;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part1; -webkit-animation-name:part1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}
.uhleft {
background-position: -160px 40px;
right: 160px;
-webkit-backface-visibility: hidden;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part2; -webkit-animation-name:part2;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}
.uhright {
background-position: -160px 40px;
left: 160px;}
@-webkit-keyframes part1 {
from {
width: 0px;
opacity: 0;
}
to {
width: 160px;
opacity: 1;
}}
@-webkit-keyframes part2 {
from {
background-position:-160px 40px;
width: 0px;
opacity: 0;
}
to {
width: 160px;
background-position: 0px 40px;
opacity: 1;
}}
@-moz-keyframes part1 {
from {
width: 0px;
opacity: 0;
}
to {
width: 160px;
opacity: 1;
}}
@-moz-keyframes part2 {
from {
background-position:-160px 40px;
width: 0px;
opacity: 0;
}
to {
background-position: 0px 40px;
width: 160px;
opacity: 1;
}}
Am I stuck with this jitter? I already did a JQuery version, and found people saying that CSS was cleaner/smoother, but the jitter still happens.
TL;DR # Take care that your animations don't cause performance issues; ensure that you know the impact of animating a given CSS property. Animating properties that change the geometry of the page (layout) or cause painting are particularly expensive. Where you can, stick to changing transforms and opacity.
CSS Animation element is supported by all Microsoft Edge browser.
Okay, didn't find a way to use dual divs to achieve this goal. Instead, I did something like this.
<div class="outer">
<div class="middle">
<div class"inner">
 
</div>
</div>
</div>
and then styled them
.outer {
position: relative;
width:321px;
height:100px;
padding: 15px;
}
.middle {
text-align: center;
position: absolute;
left: 160px;
margin:auto;
background-image:url(images/underheader.svg);
background-position:center center;
background-size: 320px 70px;
background-repeat: no-repeat;
/*all the animation stuff */
}
.inner {
position: relative;
display: inline-block;
width: 0px;
height: 100px;
/* all the animation stuff */
}
I then animated the middle div from left:160px
to left: 0px
and the inner div from width: 0px
to width: 320px.
I used CSS animation, though it could easily be done with jquery or CSS transitions.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With