.cmyeffect {
  font-size: 1em;
  text-align: center;
}

.cmyeffect-element {
  width: 100%;
  animation: cmyanimation 1s ease-in-out;
  mix-blend-mode: multiply;
  position: absolute;
}
.cmyeffect-element-blue {
  animation-name: cmyanimation-r2;
  animation-fill-mode: forwards;
  color: #10C0F0;
}
.cmyeffect-element-red {
  animation-name: cmyanimation-g2;
  animation-fill-mode: forwards;
  color: #F010C0;
}
.cmyeffect-element-yellow {
  animation-name: cmyanimation-b2;
  animation-fill-mode: forwards;
  color: #F0C010;
}

@keyframes cmyanimation-r2 {
0% { transform: translateX(30%); opacity: 0;}
33% { transform: translateX(-3%); opacity: 0.5;}
66% { transform: translateX(0.8%); opacity: 1;}
100% { transform: translateX(0%); opacity: 1;}
}

@keyframes cmyanimation-g2 {
0% { transform: translateX(-30%); opacity: 0;}
33% { transform: translateX(3%); opacity: 0.5;}
66% { transform: translateX(-1%); opacity: 1;}
100% { transform: translateX(0%); opacity: 1;}

}
@keyframes cmyanimation-b2 {
0% { transform: translateX(-30%); opacity: 0;}
33% { transform: translateX(4%); opacity: 0.5;}
66% { transform: translateX(-2%); opacity: 1;}
100% { transform: translateX(0%); opacity: 1;}
}