How to Create a CSS3 Animated Circle that chages colors when clicked?

Question

How would you code in HTML5 and CSS3 a page that contains a couple of circles that move around (aimlessly) and change colors when clicked. The colors could be any or just a back and forth between two. I am try to do this purely as a learning example and in CSS - no JS.

Answer 1

For the circle create a square and set its border radius to 50%.

.circle{
   width:50px;
   height:50px;
   display:block;
   border-radius:50%;
}

to move it around set it position to absolute or fixed (depends where you want it constrained) and then animate it using keyframes.

You cannot make it move randomly without CSS, but you can define a complex path.

See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

---

Update

A small demo (without vendor prefixes)

.circle{
  width: 50px;
  height: 50px;
  border-radius:50%;
  position:fixed;
  background-color:red;
  
  /*center it*/
  margin-left: -25px;
  margin-top: -25px;
}

.move-1{
   animation: rombus 10s linear 0s infinite;
}

@keyframes rombus{
   0%{left:50%;top:0}
   25%{left:100%;top:50%}
   50%{left:50%;top:100%}
   75%{left:0;top:50%}
   100%{left:50%;top:0}
}

<div class="circle move-1"></div>

---

To add click handling it gets a bit more complicated as to handle state in html you only have checkboxes..

So changes are needed in both html and css. It might not be really applicable for real use.

.circle{
  width: 100%;
  height: 100%;
  border-radius:50%;
  display:block;
  background-color:red;
}
:checked + .circle{background-color:green;}


.animated-circle{
  position:fixed;
  display:block;
  border-radius:50%;
  width: 50px;
  height: 50px;  
  
  /*center it*/
  margin-left: -25px;
  margin-top: -25px;
  cursor:pointer;
}
.animated-circle input{display:none;}

.move-1{
   animation: rombus 20s linear 0s infinite;
}

@keyframes rombus{
   0%{left:50%;top:0}
   25%{left:100%;top:50%}
   50%{left:50%;top:100%}
   75%{left:0;top:50%}
   100%{left:50%;top:0}
}

<label class="animated-circle move-1"><input type="checkbox" /><div class="circle"></div></label>