| @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); |
| } |