frontend-coder
2/15/2017 - 3:19 PM

Simple animate links

.second-block-link a {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  border: 3px solid #efa64d;
  padding:15px 35px; 
  color: #7cc15a;
  font-size: 20px;
   @include trans;
   animation: wave 5100ms linear infinite;
  text-decoration: none;
}
.second-block-link a:hover {
  border: 3px solid darken(#efa64d, 20%);
  color:darken(#7cc15a, 20%);
}


/* @keyframes wave {
0% { transform: scale(0.88); }
10% { transform: scale(0.90); }
20% { transform: scale(0.92); }
30% { transform: scale(0.94); }
40% { transform: scale(0.96); }
50% { transform: scale(1.00); }
60% { transform: scale(0.96); }
70% { transform: scale(0.94); }
80% { transform: scale(0.92); }
90% { transform: scale(0.90); }
100% { transform: scale(0.89); }
} */

/* @keyframes wave {
0%  {  opacity: 1; }
25% {  opacity: .75; }
50% {  opacity: .5; }
75% {  opacity: .75; }
100%  {  opacity: 1; }
} */


/*  @keyframes wave {
0% { transform: scale(0.88); opacity: .75; }
10% { transform: scale(0.90); opacity: .80; }
20% { transform: scale(0.92); opacity: .85; }
30% { transform: scale(0.94); opacity: .90; }
40% { transform: scale(0.96); opacity: .95; }
50% { transform: scale(1.00);  opacity: 1; }
60% { transform: scale(0.96); opacity: .95; }
70% { transform: scale(0.94); opacity: .90; }
80% { transform: scale(0.92); opacity: .85; }
90% { transform: scale(0.90); opacity: .80; }
100% { transform: scale(0.89); opacity: .75; }
}  */

/*  @keyframes wave {
0% {  transform:translate(5px, 5px) scale(0.88); opacity: .75; }
10% { transform:translate(5px, 0) scale(0.90); opacity: .80; }
20% {transform:translate(0, 5px) scale(0.92); opacity: .85; }
30% { transform:translate(5px, 5px) scale(0.94); opacity: .90; }
40% { transform:translate(0, 5px) scale(0.96); opacity: .95; }
50% { transform:translate(5px, 0) scale(1.00);  opacity: 1; }
60% { transform:translate(5px, 5px) scale(0.96); opacity: .95; }
70% { transform:translate(0px, 5px) scale(0.94); opacity: .90; }
80% { transform:translate(5px, 0) scale(0.92); opacity: .85; }
90% { transform:translate(0, 5px) scale(0.90); opacity: .80; }
100% { transform:translate(5px, 0) scale(0.89); opacity: .75; }
}  */

/*  @keyframes wave {
0% {  transform:translate(6px, 6px); opacity: .75; }
10% { transform:translate(6px, 3px); opacity: .80; }
20% {transform:translate(6px, 0); opacity: .85; }
30% { transform:translate(0, 3px); opacity: .90; }
40% { transform:translate(0, 6px); opacity: .95; }
50% { transform:translate(3px, 6px);  opacity: 1; }
60% { transform:translate(6px, 6px); opacity: .95; }
70% { transform:translate(6px, 3px); opacity: .90; }
80% { transform:translate(6px, 0); opacity: .85; }
90% { transform:translate(6px, 3px); opacity: .80; }
100% { transform:translate(6px, 6px); opacity: .75; }
}  */


/* 
 @keyframes wave {
0% {  transform:rotate(0deg) scale(1.00); opacity: .75; }
5% {  transform:rotate(1deg) scale(0.99); opacity: .75; }
10% { transform:rotate(2deg) scale(0.98); opacity: .80; }
15% { transform:rotate(3deg) scale(0.97); opacity: .75; }
20% {transform:rotate(4deg) scale(0.96); opacity: .85; }
25% {  transform:rotate(3deg) scale(0.95); opacity: .75; }
30% { transform:rotate(2deg) scale(0.96); opacity: .90; }
35% {  transform:rotate(1deg) scale(0.97); opacity: .75; }
40% { transform:rotate(0deg) scale(0.98); opacity: .95; }
45% {  transform:rotate(-1deg) scale(0.99); opacity: .75; }
50% { transform:rotate(-2deg) scale(1.00);  opacity: 1; }
55% {  transform:rotate(-3deg) scale(0.99); opacity: .75; }
60% { transform:rotate(-4deg) scale(0.98); opacity: .95; }
65% {  transform:rotate(-3deg) scale(0.97); opacity: .75; }
70% { transform:rotate(-2deg) scale(0.96); opacity: .90; }
75% {  transform:rotate(-1deg) scale(0.95); opacity: .75; }
80% { transform:rotate(0deg) scale(0.96); opacity: .85; }
85% {  transform:rotate(1deg) scale(0.97); opacity: .75; }
90% { transform:rotate(2deg) scale(0.98); opacity: .80; }
95% {  transform:rotate(1deg) scale(0.99); opacity: .75; }
100% { transform:rotate(0deg) scale(1.0); opacity: .75; }
}  */

/*  @keyframes wave{
0% {  transform: translate(0, 0); }
25% {  transform: translate(0, 5px);   }
50% {  transform: translate(0, 0);   }  
75% {  transform: translate(0, -5px); }
100% {  transform: translate(0, 0); }
}
 */
/* @keyframes wave {
 100% { transform:rotate(0deg); }
 75% { transform:rotate(10deg); }
 50% { transform:rotate(0deg); }
 0% { transform:rotate(-10deg); }
  } */

@keyframes wave {
0% {transform: rotate(0) scale(1.0);   }
25% {transform: rotate(5deg) scale(0.9);}
50% {transform: rotate(0) scale(1.0); }
75% {transform: rotate(-5deg) scale(0.9); }
100% {transform: rotate(0) scale(1.0);}
}

/* @keyframes wave {
0% {transform: rotate(0) scale(1.0);   }
25% {transform: rotate(5deg) scale(0.9);}
50% {transform: rotate(0) scale(1.0); }
75% {transform: rotate(-5deg) scale(0.9); }
100% {transform: rotate(0) scale(1.0);}
} */
/* @keyframes wave {
0% {transform: rotate(0) scale(1.0);   }
12% {transform: rotate(2deg) scale(0.95);}
24% {transform: rotate(4deg) scale(0.9);}
36% {transform: rotate(2deg) scale(0.95);}
48% {transform: rotate(0deg) scale(1.0);}
60% {transform: rotate(-2deg) scale(0.95);}
72% {transform: rotate(-4deg) scale(0.90);}
84% {transform: rotate(-2deg) scale(0.95);}
100% {transform: rotate(0) scale(1.0);   }
} */


@keyframes wave {
0% {transform: rotate(0) scale(1.0);   }
33% {transform: rotate(-6deg) scale(0.90);}
66% {transform: rotate(6deg) scale(0.90);}
100% {transform: rotate(0) scale(1.0);   }
}