Skip to content

Home

Jump to bottom
thomas edited this page Jan 9, 2018 · 5 revisions

Animation snippets

Copy and paste animations inspired by Animate.css
This example should help you get started with animations. You will need to tweak the values to match your svg content.

Fading Entrances

fadeIn
Initial Animation State 
{
    "opacity": 0
}
 CSS Attributes: 
{
    "opacity": 1
}
Duration: 400
Delay: 0
Easing: easeinout
fadeInDown
Initial Animation State 
{
    "opacity": 0,
    "transform": "t0,-100"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout
fadeInLeft
Initial Animation State 
{
    "opacity": 0,
    "transform": "t-100,0"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout
fadeInRight
Initial Animation State 
{
    "opacity": 0,
    "transform": "t100,0"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout
fadeInUp
Initial Animation State 
{
    "opacity": 0,
    "transform": "t0,100"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout

Fading Exits

fadeOut
Initial Animation State 
{
    "opacity": 1
}
 CSS Attributes: 
{
    "opacity": 0
}
Duration: 400
Delay: 0
Easing: easeinout
fadeOutDown
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t0,100"
}
Duration: 400
Delay: 0
Easing: easeinout
fadeOutLeft
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t-100,0"
}
Duration: 400
Delay: 0
Easing: easeinout
fadeOutRight
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t100,0"
}
Duration: 400
Delay: 0
Easing: easeinout
fadeOutUp
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t0,-100"
}
Duration: 400
Delay: 0
Easing: easeinout

Sliding Entrances

slideInUp
Initial Animation State 
{
    "transform": "t0,100"
}
 CSS Attributes: 
{
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout
slideInDown
Initial Animation State 
{
    "transform": "t0,-100"
}
 CSS Attributes: 
{
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout
slideInLeft
Initial Animation State 
{
    "transform": "t-100,0"
}
 CSS Attributes: 
{
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout
slideInRight
Initial Animation State 
{
    "transform": "t100,0"
}
 CSS Attributes: 
{
    "transform": "t0,0"
}
Duration: 400
Delay: 0
Easing: easeinout

Sliding Exits

slideOutUp
Initial Animation State 
{
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "transform": "t0,-100"
}
Duration: 400
Delay: 0
Easing: easeinout
slideOutDown
Initial Animation State 
{
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "transform": "t0,100"
}
Duration: 400
Delay: 0
Easing: easeinout
slideOutLeft
Initial Animation State 
{
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "transform": "t-100,0"
}
Duration: 400
Delay: 0
Easing: easeinout
slideOutRight
Initial Animation State 
{
    "transform": "t0,0"
}
 CSS Attributes: 
{
    "transform": "t100,0"
}
Duration: 400
Delay: 0
Easing: easeinout

Zoom Entrances

zoomIn
Initial Animation State 
{
    "opacity": 0,
    "transform": "s0.3"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "s1"
}
Duration: 400
Delay: 0
Easing: easeout
zoomInDown
Initial Animation State 
{
    "opacity": 0,
    "transform": "t0,-300 s0.3"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
Duration: 400
Delay: 0
Easing: easeout
zoomInUp
Initial Animation State 
{
    "opacity": 0,
    "transform": "t0,300 s0.3"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
Duration: 400
Delay: 0
Easing: easeout
zoomInLeft
Initial Animation State 
{
    "opacity": 0,
    "transform": "t-300,0 s0.3"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
Duration: 400
Delay: 0
Easing: easeout
zoomInRight
Initial Animation State 
{
    "opacity": 0,
    "transform": "t300,0 s0.3"
}
 CSS Attributes: 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
Duration: 400
Delay: 0
Easing: easeout

Zoom Exits

zoomOut
Initial Animation State 
{
    "opacity": 1,
    "transform": "s1"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "s0.3"
}
Duration: 400
Delay: 0
Easing: easeout
zoomOutDown
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t0,300 s0.3"
}
Duration: 400
Delay: 0
Easing: easeout
zoomOutUp
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t0,-300 s0.3"
}
Duration: 400
Delay: 0
Easing: easeout
zoomOutLeft
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t-300,0 s0.3"
}
Duration: 400
Delay: 0
Easing: easeout
zoomOutRight
Initial Animation State 
{
    "opacity": 1,
    "transform": "t0,0 s1"
}
 CSS Attributes: 
{
    "opacity": 0,
    "transform": "t300,0 s0.3"
}
Duration: 400
Delay: 0
Easing: easeout
Clone this wiki locally