CODEWITHSUNDEEP
htmlcsscss-animations
Paul
Paul

Reputation: 39

CSS3 animation unintended shaking

I'm trying to animate rectangular div positioned diagonally roughly -33deg using transform: rotate(-33deg) then animate this to move position diagonally, lets say 200px to the left and 100px down.

What happens is, it moves as intended but it moves as if it were moving left then down left then down infinitely instead of moving diagonally which makes the box look shaking and change its sizes roughly about 1px as it moves if you look at the box closely.

Is there way to stop this unintended shaking effect?

JSfiddle Demo

<body>
    <div id="wrapper">
        <div class="banner bner_01">
            <div class="box2">
                <div class="text"> JSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLE</div>
            </div>
        </div>
    </div>
</body>

body{
    background: black;
    overflow: hidden;
}

#wrapper{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding-bottom: 56.25%;
    background: white;
    overflow: hidden;
}
.banner {
    overflow: hidden;
    position: absolute;
    height: 16.7%;
    width: 300%;
    background: rgb(247, 209, 11);
    box-shadow: 0px 13px 4px rgba(0, 0, 0, 0.4);
    color:black;
}
.bner_01 {
    left: -15%;
    top: 49%;
    transform: rotate(-5.9deg);
    animation: bner_01 5s infinite linear;
}
@keyframes bner_01 {
    0% {
        left: -15%;
        top:49%;
    }
    100% {
        left: -126.87%;
        top: 69.6%;
    }
}
.text{
    width:100%;
    height: 100%;
    vertical-align: middle;
    display: flex;
    align-items: center;
    overflow: hidden;
}

Upvotes: 0

Views: 3009

Answers (1)

Marcelo
Marcelo

Reputation: 4425

You can animate the elements using transforms instead. If you rotate first, then translate the animation will move along the axis smoothly.

Here is a rough example using your fiddle as the base: https://jsfiddle.net/mbotcayh/1/

Relevant animation code:

@keyframes bner_01 {
    0% {
        transform: rotate(-5.9deg) translateX(0%);
    }
    100% {
        transform: rotate(-5.9deg) translateX(-50%);
    }
}

Upvotes: 1

Related Questions