-1

I'm working on getting better with CSS animations and transitions. What I'm trying to do is make the transition from a square to a circle and vice versa smoother. I know that I need to use the transition method in CSS to control this.

2 questions:

  1. Why is the transition method not working in the below code snippet?
  2. How do I go about making different transition properties for each changing value? i.e. 1 transition timing for changing the border radius, 1 transition timing for moving the circle to where the square is, etc. 

.container-flex {
  display: flex;
  width: 500px;
  height: 250px;
  border: 1px solid black;
  background-color: rgb(0,0,255);
  }

.circle {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,0.5);
  border-radius: 100px;
  transition: all 1s alternate;
  }
  
.circle:hover {
  border-radius: 0;
  }
  
.square {
  width: 200px;
  height: 200px;
  background-color: rgba(0,255,0,0.5);
  transition: all 1s alternate;
  }
  
.square:hover {
  border-radius: 100px;
  }
<html>
<body>
<div class="container-flex">
  <div class="circle"></div>
  <div class="square"></div>
</div>
</body>
</html>
Jeremy Corbello
  • 150
  • 2
  • 9

1 Answers1

2

.container-flex {
  display: flex;
  width: 500px;
  height: 250px;
  border: 1px solid black;
  background-color: rgb(0,0,255);
  }

.circle {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,0.5);
  border-radius: 100px;
  transition: all 1s ease;
  }
  
.circle:hover {
  border-radius: 0;
  }
  
.square {
  width: 200px;
  height: 200px;
  background-color: rgba(0,255,0,0.5);
  transition: all 1s ease;
  }
  
.square:hover {
  border-radius: 100px;
  }
<html>
<body>
<div class="container-flex">
  <div class="circle"></div>
  <div class="square"></div>
</div>
</body>
</html>
scaff
  • 330
  • 1
  • 8
  • Oh, so simple! Thanks! As to my 2nd question, how do you designate different transition values for different style changes? – Jeremy Corbello Mar 20 '19 at 17:05
  • 1
    @JeremyCorbello use multiple transitions? https://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element – Chris Li Mar 20 '19 at 17:16
  • Oh, so I just specify the element within transition. I thought that was just for @keyframes. That's awesome, thanks! – Jeremy Corbello Mar 20 '19 at 17:43