CODEWITHSUNDEEP
htmlcss
Hudson Taylor
Hudson Taylor

Reputation: 1162

Weird Lines Between Divs with Animation

I am making a CSS pie that translates 1/4 of the pie and changes its color when it is hovered over. However, there are weird lines appearing between the pie pieces during the transition. At first these lines were appearing even when the animation was not occuring. But, I fixed that with will-change: transform. Any help is appreciated. Here's my code:

body, html {
  text-align: center;
  height: 100%;
  overflow: hidden;
}

.container {
  margin: 0 auto;
  height: 180px;
  width: 180px;
  will-change: transform;
  position: relative;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
} 

.clear {
  clear: both;
}

.circle {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #333;
  transition: 0.5s;
}

.circle:hover {
  background: #00AABB;
}

.circle-1:hover {
  transform: translate(-5px, -5px);
}

.circle-2:hover {
  transform: translate(5px, -5px);
}

.circle-3:hover {
  transform: translate(-5px, 5px);
}

.circle-4:hover {
  transform: translate(5px, 5px);
}

.circle-1 {
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 90px 0 0 0;
}

.circle-2 {
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 90px 0 0;
}

.circle-3 {
  top: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 0 90px;
}

.circle-4 {
  top: 90px;
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 90px 0;
}
<main class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-4"></div>
</main>

Upvotes: 0

Views: 120

Answers (1)

tao
tao

Reputation: 90217

Making each sector 1px larger than half the container will make them overlap slightly and you'll get rid of the artefacts.
If you think the remaining distance in hovered state is too small, increase the transition values by 1px as well:

body, html {
  text-align: center;
  height: 100%;
  overflow: hidden;
}

.container {
  margin: 0 auto;
  height: 180px;
  width: 180px;
  will-change: transform;
  position: relative;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
} 

.clear {
  clear: both;
}

.circle {
  position: absolute;
  width: 91px;
  height: 91px;
  background: #333;
  transition: 0.5s;
}

.circle:hover {
  background: #00AABB;
}

.circle-1:hover {
  transform: translate(-6px, -6px);
}

.circle-2:hover {
  transform: translate(6px, -6px);
}

.circle-3:hover {
  transform: translate(-6px, 6px);
}

.circle-4:hover {
  transform: translate(6px, 6px);
}

.circle-1 {
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 90px 0 0 0;
}

.circle-2 {
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 90px 0 0;
}

.circle-3 {
  top: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 0 90px;
}

.circle-4 {
  top: 90px;
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 90px 0;
}
<main class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-4"></div>
</main>

Upvotes: 1

Related Questions