Catpow SCSS

anm

アニメーション関連のプロパティを設定します。

Params

a
animation

Keyword

i

infinite
r

reverse
a

alternate
e

ease
l

linear
f

forwards
b

backwards

dur
animation-duration

del
animation-delay

dir
animation-direction

e
animation-timing-function

i
animation-iteration-count

Keyword

i

infinite

f
animation-fill-mode

Keyword

f

forwards
b

backwards

p
animation-play-state

scss

@import 'catpow';

.circle{
	@include anm((a:circle-rotation 3s i l));
}
@keyframes circle-rotation{
	0%{@include trn((r:0deg));}
	100%{@include trn((r:360deg));}
}

css

.circle {
  animation: circle-rotation 3s infinite linear;
}
@keyframes circle-rotation {
  0% {
    transform: -webkit- rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    transform: -webkit- rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}