CODEWITHSUNDEEP
htmlcss
Finn Eggers
Finn Eggers

Reputation: 945

CSS weird artifacts when using clip path in conjuction with custom animation

I am currently working on a small website. Since I am not familiar with html / css, I am mostly just trying out a few things. I wanted to get a small rocket flying through space animated using css.

I quickly copied the relevant part of my code to JSFiddle. Basically I have a somewhat straight forward setup. I have a .rocket-div which simply contains my rocket and will eventually also contain other elements like stars. Within that, I have my .rocket which has a shake animation. Within the .rocket, I have 3 body elements as well as a small window.

.rocket-div{
    position: relative;
}

.rocket{
    position: absolute;
    animation: shake 1s infinite;
}

.rocket-element{
    position: absolute;
    background-color: white;
}

.rocket-body-1{
    width: 30px;
    height: 80px;
    left: 0px;
    top: 10px;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}

.rocket-body-2{
    width: 30px;
    height: 100px;
    left: 40px;
}

.rocket-body-3{
    width: 160px;
    height: 100px;
    left: 80px;
    border-top-right-radius: 80px 50px;
    border-bottom-right-radius: 80px 50px;
}

.rocket-window{
    width: 52px;
    height: 52px;
    left: 160px;
    top: 24px;
    border-radius: 26px;
    /*border-width: 5px;*/
    border: black solid 8px;
    /*border-color: black;*/
    background-color: white;
}

@keyframes shake {
    0%  { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

As you can see, I have defined the shape of the first rocket-body-1 as:

    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);

This leads to weirdly looking artifacts together with the shaking animation.

enter image description here

What solution would there be for my problem? I am very happy for any help.

Upvotes: 0

Views: 142

Answers (1)

Boguz
Boguz

Reputation: 1823

Like mentioned on the comments, i think this has something to do with the browser. I can't see the problem on Chrome, but i can see it on firefox.

I have created a small example for you, where i have added border: 1px solid black to the .rocket.body.1 element. This seems to fix the problem also on firefox

:root body {
  background-color: #000000;
}

.rocket-div {
  position: relative;
}

.rocket {
  position: absolute;
  animation: shake 10s infinite;
}

.rocket-element {
  position: absolute;
  background-color: white;
}

.rocket-body-1 {
  width: 30px;
  height: 80px;
  left: 0px;
  top: 10px;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  border: 1px solid black;
}

.rocket-body-2 {
  width: 30px;
  height: 100px;
  left: 40px;
}

.rocket-body-3 {
  width: 160px;
  height: 100px;
  left: 80px;
  border-top-right-radius: 80px 50px;
  border-bottom-right-radius: 80px 50px;
}

.rocket-window {
  width: 52px;
  height: 52px;
  left: 160px;
  top: 24px;
  border-radius: 26px;
  background-color: black
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
<body>

  <div class="rocket-div" style="height: 200px; width: calc(min(500px, 100%));">
    <div class="rocket">
      <div class="rocket-element rocket-body-1"></div>
      <div class="rocket-element rocket-body-2"></div>
      <div class="rocket-element rocket-body-3"></div>
      <div class="rocket-element rocket-window"></div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions