Styleguide

IE	Chrome	Firefox	Safari	Opera	iOS	Android	Can I use
`10`	`OK`	`5`	`4`	`12.1`	`2`	`2.1`	CSS Animation

@mixin 名	@mixin 引数値	備考
`CSS プロパティ名` と同じ	`CSS プロパティ値` と同じ	-

@mixin pe-animation($animations...) {
  ...
}
@mixin pe-animation-name($names...) {
  ...
}
@mixin pe-animation-duration($times...) {
  ...
}
@mixin pe-animation-timing-function($motions...) {
  ...
}
@mixin pe-animation-iteration-count($values...) {
  ...
}
@mixin pe-animation-direction($directions...) {
  ...
}
@mixin pe-animation-play-state($states...) {
  ...
}
@mixin pe-animation-delay($times...) {
  ...
}
@mixin pe-animation-fill-mode($modes...) {
  ...
}

.class-name {
  @include pe-animation(all 2.0s ease);
}

.class-name {
  -webkit-animation: all 2s ease;
  -moz-animation: all 2s ease;
  animation: all 2s ease;
}

pe-animation()