'Circle that transforms to a box

i was wondering how to make a circle that transforms into a wider box in html/css. I have tried this but it does not transform properly

If you guys have any ideas on how to make this, i would really appreaciate it very much thank you!

.circle{
    width: 700px;
    height:700px;
    margin:0 auto;
    background-color: #14b1e7;
    animation-name: stretch;
    animation-duration:6s;
    animation-timing-function:ease-out;
    animation-delay:0s;
    animation-duration:alternate;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: running;
    opacity: 100%;
    text-align: center;
    text-shadow: 5px;
    font-size: 60px;
    font-weight: bold;
    border-radius: 30px;
}




@keyframes stretch {
    0%{
        transform: scale(.1);
        background-color:#14b1e7;
        border-radius: 100%;
    }

    50%{
        background-color: #14b1e7;

    }

    100%{
        transform:scale(.7);
        background-color: #14b1e7;
    }
}
javascripthtmlcss


Solution 1:[1]

Here's a live example: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css

.circle {
  width: 100px;
  border-radius: 50%;
  transition: all 1s;
}

.circle:hover {
  border-radius: 0;
  width: 200px;
}

In the example, the circle initially has 50% border-radius and 100px width. On hover, border-radius is set to 0 and width to 200px. Because of the transition property, the change is animated.

The transition: all 1s property makes every property change gradually and last for 1 second. Check the docs for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Solution 2:[2]

You can simply change border-radius according to the keyframes.

.animation {
  margin: 0 auto;
  margin-top: 20px;
  width: 100px;
  height: 100px;
  background-color: black;
  border: 1px solid #337ab7;
  border-radius: 100% 100% 100% 100%;
  animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
 
@keyframes circle-to-square {
  0%  {
     border-radius:100% 100% 100% 100%;
    background:black;
   
  }
  25%  {
    border-radius:75% 75% 75% 75%;
    background:black;
   
  }
  50%  {
    border-radius:50% 50% 50% 50%;
    background:black;
   
  }
  75%  { 
  border-radius:25% 25% 25% 25%;
    background:black;
    
  }
  100% {  
    border-radius:0 0 0 0;
    background:black;
   
  }
<div class="container animated zoomIn">
  <div class="row">
<div class="animation"></div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 madzong
Solution 2

Related Questions