A breathing forest

August 18, 2016

.tree {
  transform-origin: 50% 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.tree1 {
  animation: treeBreatheOne 5s linear infinite;
}
.tree2 {
  animation: treeBreatheTwo 4s linear infinite;
}
.tree3 {
  animation: treeBreatheThree 8s linear infinite;
}

@keyframes treeBreatheOne {
  0% { transform: scale(1, 1); }
  50% { transform: scale(1.5, 1.5); }
  100% { transform: scale(1, 1); }
}

@keyframes treeBreatheTwo {
  0% { transform: scale(1.5, 1.5); }
  50% { transform: scale(1.2, 1.2); }
  100% { transform: scale(1.5, 1.5); }
}

@keyframes treeBreatheThree {
  0% { transform: scale(1.2, 1.2); }
  50% { transform: scale(1.4, 1.4); }
  100% { transform: scale(1.2, 1.2); }
}

Run the above through postcss autoprefixer to get browser-specific prefixes. Thanks Vincent De Oliveira for the tip!

⤎ back to posts