A Pen by uriuriuriu.

anim-scale-&-rotate.markdown

anim scale & rotate

sass's basic animation mixin

A Pen by uriuriuriu on CodePen.

License.

index.html

<section>
  <div class="circle anim-symbol-scale">scale</div>
  <div class="circle anim-symbol-rotate">rotate</div>
  <div class="circle anim-symbol-scale"><div class="anim-symbol-rotate">S&R</div></div>
</section>

scale-&-rotate.markdown

scale & rotate

sass's basic animation mixin

A Pen by uriuriuriu on CodePen.

License.

style.scss

@import "compass/css3";
// mixin
@mixin anims($animation_setting) {
	-o-animation: #{$animation_setting};
	-ms-animation: #{$animation_setting};
	-moz-animation: #{$animation_setting};
	-webkit-animation: #{$animation_setting};
}

@mixin keyframes($animation-name) {
	@-webkit-keyframes $animation-name {@content;}
	@-moz-keyframes $animation-name {@content;}
	@keyframes $animation-name {@content;}
}



// usage
@import "compass/css3/transform";
.anim-symbol-scale {
  @include anims(anim-scale 0.5s ease-out infinite);
}

.anim-symbol-rotate {
  @include anims(anim-rotate 0.5s ease-out infinite);
}

@include keyframes(anim-scale) {
  0%   {@include transform(scale(0.4));}
  40%  {@include transform(scale(1.2));}
  60%  {@include transform(scale(1.0));}
  80%  {@include transform(scale(1.1));}
  100% {@include transform(scale(1.0));}
}

@include keyframes(anim-rotate) {
  0%   {@include transform(rotate( 0deg));}
  10%  {@include transform(rotate(-6deg));}
  20%  {@include transform(rotate( 7deg));}
  35%  {@include transform(rotate(-3deg));}
  50%  {@include transform(rotate( 3deg));}
  65%  {@include transform(rotate(-1deg));}
  80%  {@include transform(rotate( 1deg));}
  95%  {@include transform(rotate( 0deg));}
  100% {@include transform(rotate( 0deg));}
}



//design setting
$theme_color:#d35400;
body {background-color:$theme_color;}
section {
  display:table;
  margin:0 auto;
}

.circle {
  display: inline-block;
  background-color:transparent;
  width:100px;
  height:100px;
  margin:80px 30px;
  @include border-radius(60px, 60px);
  border:solid 10px #ffffff;
  border-right:double 10px;
  border-left: double 10px;
  line-height:100px;
  font-size:30px;
  font-weight:bold;
  color:#ffffff;
  text-align:center;
}