src/cobalt/demos/content/animations-demo/layer_fern.css

@keyframes top-animation {
  from {
    transform: translate(-50%, -34%) matrix(0.85, -0.04, 0.04, 0.85, 0, 0) translate(50%, 50%);
  }
  to {
    transform: translate(-50%, -34%) rotate(6deg) matrix(0.85, -0.04, 0.04, 0.85, 0, 0) translate(50%, 50%);
  }
}

.fern-top-node {
  position: absolute;
  width: 100%;
  height: 100%;

  animation: top-animation 4s infinite ease-in-out alternate;
  transform: translate(-50%, -34%) matrix(0.85, -0.04, 0.04, 0.85, 0, 0) translate(50%, 50%);
}

@keyframes left-animation {
  from {
    transform: translate(-51%, -34%) matrix(0.2, 0.23, -0.26, 0.22, 0, 0) translate(50%, 50%);
  }
  to {
    transform: translate(-51%, -34%) rotate(16deg) matrix(0.2, 0.23, -0.26, 0.22, 0, 0) translate(50%, 50%);
  }
}

.fern-left-node {
  position: absolute;
  left: 0.5%;
  width: 100%;
  height: 100%;

  animation: left-animation 3s infinite ease-in-out alternate;
  transform: translate(-50%, -34%) matrix(0.2, 0.23, -0.26, 0.22, 0, 0) translate(50%, 50%);
}

@keyframes right-animation {
  from {
    transform: translate(-50%, -45.6%) matrix(-0.15, 0.26, 0.28, 0.24, 0, 0) translate(50%, 50%);
  }
  to {
    transform: translate(-50%, -45.6%) rotate(20deg) matrix(-0.15, 0.26, 0.28, 0.24, 0, 0) translate(50%, 50%);
  }
}

.fern-right-node {
  position: absolute;
  width: 100%;
  height: 100%;

  animation: right-animation 2s infinite ease-in-out alternate;
  transform: translate(-50%, -45.6%) matrix(-0.15, 0.26, 0.28, 0.24, 0, 0) translate(50%, 50%);
}

.fern-stem {
  position: absolute;
  left: -0.5%;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  transform: translate(-50%, -50%) scale(0.01, 0.16) translate(50%, 50%);
}

.fern-stick {
  position: absolute;
  left: -0.5%;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  transform: translate(-50%, -50%) scale(0.01, 1.0) translate(50%, 50%);
}

.fern-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: matrix(1, 0, 0, -1, 0, 0);
}