css3 3D transform doesn't animate smoothly -
i found css3 3d animation : animation ; , i'm trying replicate : replica ; can see animation jumps without being smooth @ other is.
my html looks :
<div class="pole-container"> <div class="pole"> <div class="stripes-wrapper"> <span class="stripe-01"></span> <span class="stripe-02"></span> <span class="stripe-03"></span> <span class="stripe-04"></span> <span class="stripe-05"></span> <span class="stripe-06"></span> <span class="stripe-07"></span> <span class="stripe-08"></span> <span class="stripe-09"></span> <span class="stripe-10"></span> <span class="stripe-11"></span> <span class="stripe-12"></span> </div> </div> </div> and css :
.preloader-container { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: #ffffff; z-index: 5; opacity: 1; -webkit-transition: 500ms ease-out; -moz-transition: 500ms ease-out; -o-transition: 500ms ease-out; transition: 500ms ease-out; } .preloader-container.hidden { display: block !important; visibility: visible; opacity: 0; z-index: 0; pointer-events: none; } .pole-container { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -20px; white-space: nowrap; overflow: hidden; -webkit-transform: rotate(-90deg); -moz-transform: rotatex902deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .pole-container::after { position: absolute; display: block; content: ""; } .stripes-wrapper { white-space: nowrap; -webkit-animation: webkit-bp .5s linear infinite; -moz-animation: moz-bp .5s linear infinite; -ms-animation: ms-bp .5s linear infinite; -o-animation: o-bp .5s linear infinite; animation: bp .5s linear infinite; } .stripes-wrapper span { margin: 0; display: inline-block; margin-left: 10px; width: 10px; height: 40px; background: #9fcbda; -webkit-transform: skew(32deg); -moz-transform: skewx(32deg); -ms-transform: skew(32deg); -o-transform: skew(32deg); transform: skew(32deg); } can point reason why animation isn't acting in same manner, appreciate ?
here's answer:
.preloader-container { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: #ffffff; z-index: 5; opacity: 1; -webkit-transition: 500ms ease-out; -moz-transition: 500ms ease-out; -o-transition: 500ms ease-out; transition: 500ms ease-out; } .preloader-container.hidden { display: block !important; visibility: visible; opacity: 0; z-index: 0; pointer-events: none; } .pole-container { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -20px; white-space: nowrap; overflow: hidden; -webkit-transform: rotate(-90deg); -moz-transform: rotatex902deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .pole-container::after { position: absolute; display: block; content: ""; } .stripes-wrapper { white-space: nowrap; -webkit-animation: webkit-bp .5s linear infinite; -moz-animation: moz-bp .5s linear infinite; -ms-animation: ms-bp .5s linear infinite; -o-animation: o-bp .5s linear infinite; animation: bp .5s linear infinite; } .stripes-wrapper span { margin: 0; display: inline-block; margin-left: 10px; width: 10px; height: 40px; background: #9fcbda; -webkit-transform: skew(32deg); -moz-transform: skewx(32deg); -ms-transform: skew(32deg); -o-transform: skew(32deg); transform: skew(32deg); } span.stripe-01 { background-color: rgba(217, 007, 045, 1); } span.stripe-02 { background-color: rgba(217, 007, 045, 1); } span.stripe-03 { background-color: rgba(217, 007, 045, 1); } span.stripe-04 { background-color: rgba(217, 007, 045, 1); } span.stripe-05 { background-color: rgba(217, 007, 045, 1); } span.stripe-06 { background-color: rgba(217, 007, 045, 1); } span.stripe-07 { background-color: rgba(217, 007, 045, 1); } span.stripe-08 { background-color: rgba(217, 007, 045, 1); } span.stripe-09 { background-color: rgba(217, 007, 045, 1); } span.stripe-10 { background-color: rgba(217, 007, 045, 1); } span.stripe-11 { background-color: rgba(217, 007, 045, 1); } span.stripe-12 { background-color: rgba(217, 007, 045, 1); } @-webkit-keyframes webkit-bp { 0% { -webkit-transform: translate3d(-30px, 0, 0); } 100% { -webkit-transform: translate3d(-6px, 0, 0); } } @-moz-keyframes moz-bp { 0% { -moz-transform: translatex(-30px); } 100% { -moz-transform: translatex(-6px); } } @-ms-keyframes ms-bp { 0% { -ms-transform: translatex(-30px); } 100% { -ms-transform: translatex(-6px); } } @-o-keyframes o-bp { 0% { -o-transform: translatex(-30px); } 100% { -o-transform: translatex(-6px); } } @keyframes bp { 0% { transform: translatex(-30px); } 100% { transform: translatex(-6px); } } now, there 2 reasons why animation 'jumps'. 1 'animation' has 1 colour stripe, blue one, 'replica' has 2 colour stripes, red , blue. key frames work tricking eye thinking seeing same 1 stripe travelling way across bar. works when remains same colour!
though jsfiddle work 2 colours, effect it's same stripe travelling across bar, alternating between red , blue travels. not intrinsically bad effect, that's why replica doesn't work animation. code supports 1 colour. 2 colours fine, it'll require trial , error find out distance stripes must travel, number, width , distance between them.
the second reason key frames weren't syncronised properly.
"animation" moves stripes 20 pixels along before looping, , that's fine, because distance between stripes , number of stripes , width of stripes means distance succesfully tricks eye thinking seeing same stripe moving way across bar.
0% { -webkit-transform: translate3d(-30px,0,0); } 100% { -webkit-transform: translate3d(-10px,0,0); } with "replica", though number of stripes same, distance between them different, resulting in jarring effect bars seem 'jump'. in reality, animation looping soon, , bars aren't moving across required distance animation fool eye. due this, bit of trial error, found distance of 24px smoothest distance:
@-webkit-keyframes webkit-bp { 0% { -webkit-transform: translate3d(-30px, 0, 0); } 100% { -webkit-transform: translate3d(-6px, 0, 0); } }
Comments
Post a Comment