Drag and Drop Animation Animate the CDK Drag and Drop events with CSS transitions

.cdk-drag-placeholder {
  opacity: 0.2;
  width: 350px;
  border: 5px dashed gray;
  margin: 0 10px;
}


.cdk-drag-animating {
  transition: transform 300ms ease;
}

.cdk-drop-list-dragging .cdk-drag {
  transition: transform 300ms ease;
}

.cdk-drag-placeholder {
  opacity: 0.5;
}

.cdk-drag-animating {
  transition: transform 300ms ease;
}

.cdk-drop-list-dragging .cdk-drag {
  transition: transform 300ms ease;
}

.blue { background: #71deff; color: black; }
.green { background: #36e9b6; color: black;  }
.yellow { background: #ffcf44; color: black; }
.purple { background: #b15cff; }
.red { background: #e74a4a; }
.gray { background: gray; text-decoration: line-through; }