The name of the animation is a random name. Feel free to 'search & replace' for a more convenient name.

At the top of the css output comes the animation in vii format: n:randomName e:linear d:0.36s loop:1 to:cc kf:class. You can use this to fine-tune your animation in vii or create first the timing and later the keyframe changes.

The way that the vii parser works is that transforms GIviiRISH timelines into vii code and then into css. Since the timeline does not define any keyframes the generated css animation only has a 'to' keyframe.

Keyframes

Keyframes are defined by the * character.

This timeline contains 1 keyframe [.....*.....] at aproximate 50% into the animation.

This other timeline contains 3 keyframes [*.....*.....*]. Since it has * characters at the beginning and end of the timeline it will output with a 0% and a 100% keyframes like so:

Looping animations

Now let's make the animation loop, to achieve this you only need to change your brackets to parentheses:

(R........L)

Wouldn't be nice if you could make the looping seamless? Right now it does present a "jump" when the animation reaches the end. This is because it goes to the original center position and then it restarts. A way to fix this is to move the keyframes so there is no start and end positions:

(...R...L...)

If you want the animation to be slower, then add spacing to the keyframes:

(........R........L........)

Repeating keyframes also allows to "pause" the keyframe so a particular state has longer exposition, in this case the animation will stay in the right position for a couple of beats before continuing:

(......R............R......L......)

The most effective way to create a loop animation is to have the beginning and ending keyframes be the same:

(s....u...S...u....s)

(U....>....R....I....D....<....L....I....U)

Using animation-direction

Another way to loop animations is by using the animation-direction property. In GIviiRISH you can define them by changing the brackets [] or the parentheses () with curly brackets {}

So for instance this looping animation:

(R........L)

can become smoother by changing the parentheses to curly brackets, which will give it an animation-direction of 'alternate':

{R........L}

Or animation-direction of 'alternate-reverse' if the brackets are inversed (this will not inverse the animation though):

}R........L{

Using starting/ending positions

When the animation is not a looping animation you might not want to start the animation too abruptly. You want to give the viewer the time to assimilate what has happened. Entrance and exit animations allow for an element to come in and leave a scene in an elegant manner.

That is why fading elements has proven so popular in many web apps.

Most entrance and exit animations will use the opacity either at the beginning or at the end.

An entrance animation just need to start from 0 and then do something else:

[0.........S...s]

[0s.....0..........s....R]

An exit animation will always end in 0:

[L.....l.........0]

Alternatively you can take an entrance animation and turn it into an exit animation by inversing the order of the brackets:

]0s.....0..........s....R[

By using a combination of !234|6789oOjJ and = you can make easier entrance and exit animations:

[4..........=]

[o......S....=]

[j......D..u..d..=]

[...d......=.....D...=......8]

Entrance and exit animations with 3D effect

You can also benefit from the 3D transforms that many modern browser support.

GIviiRISH has the following initial positions nNmMpPqQ that can be reset with either a or A (depending on the effect you are after):

[m...........a]

[a...........n]

Be aware that: [m...........a] is not equal to [m...........A] or [M...........a] or [M...........A]

Formulas

The following examples will teach you how to combine characters .

Entrance animations:

Fade in: [0...............1]

Small in: [o...............=]

Big in: [O...............=]

Left in: [4...............=]

Right in: [6...............=]

Up in: [8...............=]

Down in: [2...............=]

Ascend in: [0D...0D..........=]

Descend in: [0U...0U..........=]

Drop in: [0x'...0x.......']

Exit animations:

Fade out: [1...............0]

Small out: [...............o]

Big out: [...............O]

Left out: [...............4]

Right out: [...............6]

Up out: [...............8]

Down out: [...............2]

Ascend out: [..........0U...U0]

Descend out: [..........0D...D0]

Drop out: [,.......0x,...x0]

Pulse animations

Spin: (.....................@)

Grow: (,........S.S........,)

Flash: (...1...0...0...1...)

Pulse: (........S........)

Vertical: (......u......)

Horizontal: (..l......)

More examples

Zoom bounce: [....ss..SS..ss....]

Big buzz: [....RLRLRRL=]

Small buzz: [.r=l=r=l=r=l=]

Shake: [...UDUDUUDD=]

Bounce: [...U=UU=u=uu=..]

Push: [0L...1...rr.=.rr...RR]

Walk: (,..k.t..T.K..,)

Squash & Stretch: [,.........t..T.UT.t...,]

Jello: (,..=.k.t.K.T.k.t.K.=..,)

Roll bounce from left: [0i0......1+...=]

Roll bounce from right: [0I0......1-...=]

Conclusion

GIviiRISH is just a way to easily sketch css animations but by no means let it be your only way to create then. Remember you can always take the commented vii command that comes at the top of the animation and improve it. Happy Coding!