body { background: #303030; } #logo { position: absolute; left: 50%; top: 50%; margin-top: -80px; margin-left: -80px; background: #444; border-radius: 50%; box-shadow: #666 0 0 20px; transform: rotate(0deg); transform-origin: center center; transition: transform 1s, -webkit-transform 1s, box-shadow 1s, background 2s; -webkit-transform: rotate(0deg); -webkit-transform-origin: center center; path { fill: rgba(0, 0, 0, 0); stroke: tomato; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1s linear; } &:hover { box-shadow: #666 0 0 0px; background: none; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); path { stroke-dashoffset: 0; } } }