More than 5 years have passed since last update.

sassでanimationを記述するためのmixin

CSS
Sass

Posted at 2012-12-23

こんな感じで実現した。
但し、sassのバージョンが3.2以上である必要がある。

animation.sass

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

=animate($name: fadeIn, $duration: 1s, $delay: .2s, $function: ease, $mode: both)
  +experimental(animation, $name $duration $delay $function $mode)

使い方

+keyframes(sample-animation)
  from
	font-size: 100px
  to
    font-size: 10px

div
	+animation(sample-animation, 1s, 0s, ease-in-out)

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up