A breathing forest
2016-08-18
.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!