<link href='https://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>


<h1>
  CSS Animation
  <small>Try it</small>
</h1>

<div class="s3-module">
  <h2>Border <small>Dotted</small><span>Hover the borders</span></h2>
  <div class="s3-dotted"></div>
</div>
<div class="s3-module">
  <h2>Border <small>Dashed</small> <span>Hover the borders</span></h2>
  <div class="s3-dashed"></div>
</div>

@time: 5s; // set animation time here

h1{
  font-family: 'Sniglet', cursive;
  text-align:center;
  &:before{
    color:green;
    content:"//";
  }
  
  small{
    color:green;
    border-bottom:solid 1px #000;
    &:after{
      content:" !";
    }
  }
}

.s3-module{
  background-color:tomato;
  margin:2.5%;
  padding:2%;
  border:solid 1px #ccc;
  width:40%;
  float:left;
  h2{
    font-family: 'Orbitron', sans-serif;
    color:white;
    margin:0.5em 0.5em 1.5em 0.5em;
    padding:0.5em;
    background:black;
    position:relative;
    span{
      color:black;
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      font-size:80%;
      padding:0.8em;
      background:white;
    } // span close
  } // h2 close
} // .s3-module close


.s3-round{
  width:100px;
  height:100px;
  margin:auto;
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  -o-border-radius:100px;
  -ms-border-radius:100px;
  border-radius:100px;
} // .s3-round
.s3-hover{
  &:hover{
    .s3-transition;
    //-webkit-animation: s3-rotate @time infinite linear;
     animation:
      s3-rotate @time infinite linear,
      s3-opacity @time infinite;

    
  } // &:hover
} // .s3-hover

.s3-transition{
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

@-webkit-keyframes s3-rotate {
  from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@keyframes s3-opacity{
0%   {opacity:1;}
25%  {opacity:0.2;}
50%  {opacity:0.5;}
75%  {opacity:0.7;}
100% {opacity:0.1;}
}

.s3-dotted{
  .s3-round;
  .s3-hover;
  border:dotted 5px black;
  &:hover{
    border:dotted 5px white;
  }
} // .s3-dotted close

.s3-dashed{
  .s3-round;
  .s3-hover;
  border:dashed 5px black;
  &:hover{
    border:dashed 5px white;
  }
} // .s3-dashed close