tween.sass

tween.sass is a SASS single code-line mixin that delivers the possibility for chaining multiple tween components to one tween animation

v 0.1.2 || Examples || Components || Documentation

Examples

Slide In Left - Wait - Slide Out Right
@include tween(slideInLeft, wait 2.5s, slideOutRight)
Pulse looped
@include tween(pulse, wait 2s)
animation-iteration-count: infinite
Tween Group
@include tween--group((slideInLeft, wait 2s, slideOutRight) , 1, 2)
animation-iteration-count: infinite

Slide

slideInLeft
slideInRight
slideInTop
slideInBottom
slideOutLeft
slideOutRight
slideOutTop
slideOutBottom

Clip

clipInCircle
clipOutCircle
clipInLeft
clipInRight
clipInTop
clipInBottom
clipOutLeft
clipOutRight
clipOutTop
clipOutBottom

Pulse

Pulse

Fade

fadeIn
fadeOut

Zoom

zoomIn
zoomOut
zoomInLeft
zoomInRight
zoomInTop
zoomInBottom
zoomOutLeft
zoomOutRight
zoomOutTop
zoomOutBottom