Logo CSS animation

HTML
<div class="logo-wrap"> <div class="triangle-1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.7 187.1"><path d="M160.3 93.5L106.9 0 53.4 93.5 0 187.1h213.8l-53.5-93.6zm-12.2 71.4h-30.6c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h30.6c1.4 0 2.5 1.1 2.5 2.5s-1.2 2.5-2.5 2.5zm9.8-5.2c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.7 3.6-3.6 3.6zm11.2 0c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6-1.6 3.6-3.6 3.6z"/></svg> </div> <div class="triangle-2"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.7 187.1"><path d="M160.3 93.5L106.9 0 53.4 93.5 0 187.1h213.8l-53.5-93.6zm-12.2 71.4h-30.6c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h30.6c1.4 0 2.5 1.1 2.5 2.5s-1.2 2.5-2.5 2.5zm9.8-5.2c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.7 3.6-3.6 3.6zm11.2 0c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6-1.6 3.6-3.6 3.6z"/></svg> </div> <div class="logo-main"></div> </div>
SCSS
@-webkit-keyframes rotation1 { from { -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @-moz-keyframes rotation1 { from { -moz-transform: rotate(0deg) translateX(10px) rotate(0deg); } to { -moz-transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @keyframes rotation1 { from { transform: rotate(0deg) translateX(10px) rotate(0deg); } to { transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @-webkit-keyframes rotation2 { from { -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg); } to { -webkit-transform: rotate(-360deg) translateX(10px) rotate(360deg); } } @-moz-keyframes rotation2 { from { -moz-transform: rotate(0deg) translateX(10px) rotate(0deg); } to { -moz-transform: rotate(-360deg) translateX(10px) rotate(360deg); } } @keyframes rotation2 { from { transform: rotate(0deg) translateX(10px) rotate(0deg); } to { transform: rotate(-360deg) translateX(10px) rotate(360deg); } } .logo-wrap, .triangle-1, .triangle-2, .logo-main { width: 200px; height: 200px; svg { width: 100%; } } .logo-wrap { position: relative; overflow: visible; margin: 50px auto 0; } .triangle-1, .triangle-2 { position: absolute; z-index: 5; } .triangle-1 { -webkit-animation: rotation1 6s linear infinite; -moz-animation: rotation1 6s linear infinite; animation: rotation1 6s linear infinite; } .triangle-1 svg { fill: #00CC9E; } .triangle-2 { -webkit-animation: rotation2 4s linear infinite; -moz-animation: rotation2 4s linear infinite; animation: rotation2 4s linear infinite; } .triangle-2 svg { fill: white; stroke: #00CC9E; stroke-width: 1px; } .logo-main { position: relative; z-index: 10; background: url(http://dandvoracek.com/images/svg/logo.svg) no-repeat; background-position: center top; margin: 0 auto; }
JAVASCRIPT
Expand for more options Login