Is there any way to implement a box animation in CSS?

Question

While doing a project, I need to draw a box which plays animation within 2 second and will move one corner to another.How can I do It in a easy way?

Answer 1

There are several ways of doing animations and it will be worth reading up on both CSS transition and CSS animation.

Just to start off here is a very simple example. A red square sits in a container whose dimensions are known. The square has a transition of 2s set on all - which means on any animatable CSS property.

When you click the button it has a class added or removed (using toggle) and in this the square is translated to the bottom of the container (or back to its initial position when the class is removed).

.container {
  border: solid 1px;
  width: 250px;
  height: 100px;
}

.box {
  width: 10px;
  height: 10px;
  background: red;
  position: absolute;
  transition: all 2s;
  display: inline-block;
}

.box.move {
  transform: translate(240px, 90px)
}

<div class="container">
  <div class="box"></div>
</div>
<button onclick="document.querySelector('.box').classList.toggle('move');">click me</button>`enter code here`