A Pen by CarterTsai.

Icon-animation.markdown

Icon animation

A Pen by CarterTsai on CodePen.

License.

index.html

<link rel="stylesheet" type="text/css" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">

<div class="box" tabindex="0">
  
  <div class="circle show"><i class="users icon"></i></div>
  <div class="circle"><i class="css3 icon"></i></div>
  <div class="circle"><i class="apple icon"></i></div>
  <div class="circle"><i class="google plus icon"></i></div>
  <div class="circle"><i class="html5 icon"></i></div>
</div>

style.scss

@import "compass";
body {
  background: #aa3939;
}

*:focus {
    outline: 0;
}

.box {
  position: absolute;
  top: 30%;
  left: 50%;
  
  div {
    background-color: #ac378f;
    width: 50px;
    height: 50px;
    border-radius: 50px;
  }
  
  .circle > i {
    font-size: 30px;
    margin-top:10px;
    margin-left:7px;
    color: #e6e6e6;
  }
  
  .circle {
    position: absolute;
    border: 2px solid rgb(86, 180, 239);
  }
  
  .circle:nth-child(1n+2) {  
     opacity: 0;
  }
}

.box:focus  {
  .circle:nth-child(1n+2) {  
    animation-duration: .5s;
    animation-name: mov;
    animation-fill-mode: forwards
  }
  .circle:nth-child(1) {
    border: 2px solid #c1bf47;
  }
  
  .circle:nth-child(2) {
    top:-100px;
  }

  .circle:nth-child(3) {
    top:100px;
  }

  .circle:nth-child(4) {
    left: 100px;
  }

  .circle:nth-child(5) {
    left: -100px;
  }
}

@keyframes mov {
  0% {
     opacity: 0;
     left: 0px;
     top: 0px;
  }

  100% {
    opacity: 1;
    transform: rotate(330deg);
  }
}