Split Animation Like 🎊 Emoji CSS

penguinpowers
January 30, 2023
181 views
0 votes
2 Answers

i want to make a animation for a circle that splits open on two sides:
kind of like the 🎊 emoji flipped upside down. I have two half circle elments and i put them next to each other. I tryed to animate one of the sides but its not really what im going for, i wanted the split to pivot on the bottom of the semi-circle not in the middle. Since the circle is split and right next to each other in two when you rotate one of the halfs it overlaps, i didnt attempt to fix it yet (i was think move it to the left/right over the animation but i dont know…).

  .circlecontainer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .halfright {
    width: 150px;
    height: 300px;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
    background: orange;
  }

  .halfleft {
    width: 150px;
    height: 300px;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    background: orange;
    animation: splitleft 3s;
  }
  
  @keyframes splitleft {
    0% {
        transform: rotate(-0deg)
    }
    100% {
        transform: rotate(-90deg)
    }
  }

<div class="circlecontainer">
        <div class="halfleft"></div>
    <div class="halfright"></div>
  </div>

thats it! I hope this makes sense since its hard to explain…

Answers

You’re looking for transform-origin

.circlecontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.halfright {
  width: 150px;
  height: 300px;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 150px;
  background: orange;
  animation: splitright 3s;
  transform-origin: bottom left;
}

.halfleft {
  width: 150px;
  height: 300px;
  border-top-left-radius: 150px;
  border-bottom-left-radius: 150px;
  background: orange;
  animation: splitleft 3s;
  transform-origin: bottom right;
}

@keyframes splitleft {
  0% {
    transform: rotate(-0deg)
  }

  100% {
    transform: rotate(-90deg)
  }
}

@keyframes splitright {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(90deg)
  }
}

<div class="circlecontainer">
  <div class="halfleft"></div>
  <div class="halfright"></div>
</div>

Transforms will always rotate, scale, etc. from the center of the div (by default). In this case you want to pivot from where the circles meet at the bottom, use transform-origin to do this:

  .circlecontainer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .halfright {
    width: 150px;
    height: 300px;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
    background: orange;
    transform-origin: bottom left; /* THIS ONE!! */
    animation: splitright 3s forwards;
  }

  .halfleft {
    width: 150px;
    height: 300px;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    background: orange;
    transform-origin: bottom right; /* THIS ONE!! */
    animation: splitleft 3s forwards;
  }
  
  @keyframes splitleft {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-90deg);
    }
  }
  
    @keyframes splitright {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
  }

<div class="circlecontainer">
    <div class="halfleft"></div>
    <div class="halfright"></div>
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.