Break apart animation similar to the 🎊 emoji using CSS styling

I am attempting to create an animation of a circle splitting open on two sides, similar to the 🎊 emoji flipped upside down. I have positioned two half-circle elements next to each other. However, my attempts to animate one side are not producing the desired effect - I want the split to pivot at the bottom of the semi-circle rather than in the middle. When I rotate one of the halves, they end up overlapping due to their proximity, and I have yet to find a solution for this issue (I considered moving one to the left or right during the animation, but I'm unsure...).

  .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>

That's the current state of the project! I hope my explanation is clear enough as it can be quite tricky to describe...

htmlcsscss-animations

Answer â„–1

If you need guidance on transform-origin, this snippet may be helpful:

.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>

Answer â„–2

Whenever using transforms, the default pivot point will be at the center of the div. However, if you need to pivot from where two circles meet at the bottom, you can achieve this by utilizing the transform-origin property:

  .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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively: When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it. Additionally, when I drag the butt ...

javascriptjqueryhtmlcssjquery-ui

What could be causing my title (titulo) to be misaligned? Why aren't justify and align functions fixing the issue?

My attempt to center my title "Scream" is not working as expected. Here is how it looks: Visit this link for visualization. I have tried using justify, align, and text-align properties in my CSS code but the title (titulo) remains misaligned. Surprisingly ...

htmlcssresponsive-design

Troubleshooting border problems with Bootstrap 3 tables

Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table: <table class="table table-bordered table-hover"> ... </table> Upon inspecting the table vi ...

htmltwitter-bootstrapcss

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

javascripthtml

The jQuery plugin functions smoothly when running on localhost, but it causes issues with the background image when deployed on the web

I created a compact plugin to show a cookie message. While testing it on my local machine, everything functioned smoothly without affecting any web pages. However, once I transferred the files to the server, I encountered issues such as: A background ima ...

javascriptjqueryhtmlcss

Validation of user input using jQuery

Trying to ensure that the form inputs are not empty has been a challenge. Despite using jQuery for input validation, it seems that the inputs are not being properly checked. Strangely, the submit button still allows the form to be submitted: <form id=" ...

javascripthtmlformsinput

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

htmlcssfocus

Icons will be displayed when hovered over

Is it possible to display icons on hover in a div and hide them otherwise using just CSS? Or do I need to use javascript for this function? Thanks in advance! Example: HTML: <div id="text_entry"> <p>Some text here</p> <span ...

jqueryhtmlcss

Issue with div not resizing as content is added

HTML Code <div class="container"> <div class="tip_text">A</div> <div class="tip_content">text example</div> </div> <br /><br /><br /> <div class="container"> <div class="tip_text ...

csshtml

Using the <object> tag in AngularJS partials for improved functionality

Trying to incorporate the <\object> tag or <\iframe> within a partial HTML file and then include that HTML in another page using ng-include. Here is my attempt: <div class="container"> <!-- This section doesn't displ ...

javascripthtmlangularjsiframepartials

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

cssangularwebkendo-ui

Accumulation of style from various directives in AngularJS on a single element

Currently, I am working on developing a component framework and find myself in need of a method to apply styles from multiple directives to an element in a way that they can accumulate. The priority of the styles should be determined by the directive creat ...

cssangularjsangularjs-directive

Panel of numerous buttons (bootstrap)

Currently, I am working on incorporating a panel of buttons using Bootstrap. My goal is to have these buttons arranged in a grid format on desktop view and collapse into a single column on mobile devices. I envision that when button (X) is clicked, the co ...

htmlbootstrap-5mdbootstrap

Steps for assigning a default attribute to all elements

Let's take a look at this code snippet: <form> <input type="text" required="true"> <input type="text" required="true"> <button type="submit">Click</button> </form> Do you think there is a way to assign a def ...

html

Is it necessary to properly close meta and link tags in HTML documents?

As I inspected someone's HTML, I noticed that they didn't close the meta and link tags in the head section. Surprisingly, the code still worked perfectly fine; does this mean closing these tags is purely optional? I always believed that leaving ...

htmlxhtml

Using jQuery to select the next table cell vertically

Is there a way to utilize jQuery to access the cell (td) directly below a given cell in a traditional grid-layout HTML table (where each cell spans only one row and column)? I understand that the code below will assign nextCell to the cell immediately to ...

javascriptjqueryhtml

The parent's height remains unaffected by the margins of its child element

My code snippet is concise: .parent{ box-sizing: border-box; } .child{ height: 100px; margin: 20px; background: red; } .a1{ background: green; } <!DOCTYPE html> <html> <head> </head> <body> ...

htmlcss

Create a responsive design for a webpage that adjusts font size based on the dynamic type settings in iOS

Is there a way to ensure that my website's font size dynamically adjusts for iOS users? For example, if a user changes the font size in their iPhone settings (Settings > General > Accessibility > Larger Text), I want the webpage font size to ...

htmlcssfontswebkitaccessibility

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

ruby-on-railshtmlcssruby-on-rails-2wicked-pdf

Bootstrap for a more streamlined container

https://i.sstatic.net/fJ8nt.png My Bootstrap setup includes a container-fluid with multiple cards inside. I want to adjust the container layout to stack the cards more closely together in a vertical direction, instead of being displayed in a grid format. ...

html