DEMO
PLAY >
USEFUL CODE WILL SHOW UP HERE (I promise).

You can alternatively click on a command like this: (..+...-...) to watch the animation.

GIviiRISH: Timeline commands

Even though vii by itself allows you to save time when writing css animations, it also includes a subset of commands that create animations even faster.

Because of the odd looking commands this subset is called GIviiRISH.

GIviiRISH can describe animations by visualizing a timeline.

A timeline is represented by square brackets: [ ].

Time is represented by dots: [......]. Each dot represents 0.06 seconds (60fps/1000ms). The preceeding animation will last for 0.36 seconds (or 360 milliseconds) since it has 6 frames.

A timeline might have as many dots as you want. The more dots the longer the duration of the animation.

The output for [......] is:

/* n:randomName e:linear d:0.36s loop:1 to:cc kf:class */
@keyframes myTween-89 {
	to {
		animation-timing-function: linear;
		transform-origin: center center;
	}
}
@-webkit-keyframes myTween-89 {
	to {
		-webkit-animation-timing-function: linear;
		-webkit-transform-origin: center center;
	}
}
.myTween-89 {
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation-name: myTween-89;
	animation-duration: 0.36s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	-webkit-animation-name: myTween-89;
	-webkit-animation-duration: 0.36s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
}			
		

Notes:

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:

/* n:randomName e:linear d:0.78s loop:1 to:cc kf:class|kf:0|kf:53.85|kf:100 */
@keyframes myTween-12 {
	0% {
	}
	53.85% {
	}
	100% {
	}
}
@-webkit-keyframes myTween-12 {
	0% {
	}
	53.85% {
	}
	100% {
	}
}
.myTween-12 {
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation-name: myTween-12;
	animation-duration: 0.78s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	-webkit-animation-name: myTween-12;
	-webkit-animation-duration: 0.78s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
}	

Spacing and timing

GIviiRISH timelines allows you to easily sketch timing charts visually:

Half

[*.....*.....*]

Slow-in

[*......*...*...*]

Slow-out

[*...*...*......*]

Thirds

[*...*...*...*]

Cushon

[*.........*.*]

Halves

[*..*..*..*..*]

Slow-in and slow-out

[*.*.*..*....*....*..*.*.*]

Special keyframe characters

The * character returns an empty keyframe. GIviiRISH timelines allow to use other characters with special meaning and it will return keyframes with prefilled info that makes animating so much easier!

Character Meaning Returned value
u Move up by 10 pixels
transform: translateY(-10px) ;
U Move up by 100%
transform: translateY(-100%) ;
d Move down by 10 pixels
transform: translateY(10px) ;
D Moves down by 100%
transform: translateY(100%) ;
r Move right by 10 pixels
transform: translateX(10px) ;
R Move right by 100%
transform: translateX(100%) ;
l Move left by 10 pixels
transform: translateX(-10px) ;
L Move left by 100%
transform: translateX(-100%) ;
w Change width to 0 pixels
width : 0px;
W Change width to 'auto'
width : auto;
h Change height to 0 pixels
width : 0px;
H Change height to 'auto'
width : auto;
s Shrink element to half size
transform: scale(0.5) ;
S Scale element to double size
transform: scale(2) ;
k Skew the element by -20 degrees
transform: skew(-20deg) ;
K Skew the element by 20 degrees
transform: skew(20deg) ;
t Squash the element
transform: scale(1.5,0.5) ;
T Stretch the element
transform: scale(0.5,1.5) ;
z Move the element in the z axis to -800 pixels (far)
transform: translateZ(-800px) ;
Z Move the element in the z axis to 300 pixels (close)
transform: translateZ(300px) ;
f Flip horizontal
transform: scale(-1,1) ;
F Flip vertical
transform: scale(1,-1) ;
- Rotate -45 degrees
transform: rotate(-45deg) ;
+ Rotate 45 degrees
transform: rotate(45deg) ;
< Rotate -90 degrees
transform: rotate(-90deg) ;
> Rotate 90 degrees
transform: rotate(90deg) ;
^ Rotate to 0 degrees
transform: rotate(0deg) ;
i Rotate -180 degrees
transform: rotate(-180deg) ;
I Rotate 180 degrees
transform: rotate(180deg) ;
@ Spin 1 turn
transform: rotate(1turn) ;
x Rotate -90 degrees in the horizontal axis
transform: rotateX(-90deg) ;
X Rotate 90 degrees in the horizontal axis
transform: rotateX(90deg) ;
y Rotate -90 degrees in the vertical axis
transform: rotateY(-90deg) ;
Y Rotate 90 degrees in the vertical axis
transform: rotateY(90deg) ;
/ Rotate -60 degrees in the vertical axis
transform: rotateY(-60deg) ;
\ Rotate 60 degrees in the vertical axis
transform: rotateY(60deg) ;
, Change the transform origin to the bottom
transform-origin: center bottom;
' Change the transform origin to the top
transform-origin: center top;
" Change the transform origin to the top (for hanging)
transform-origin: 50% -150%;
; Change the transform origin to the left
transform-origin: left center;
: Change the transform origin to the right
transform-origin: right center;
_ Change the transform origin to the center
transform-origin: center center;
# Change the background color to a random color
background-color : #f695eb;
v Hide element
visibility : hidden;
V Show element
visibility : visible;
0 Make element transparent
opacity : 0;
5 Set element to semi-transparent
opacity : 0.5;
1 Set element to opaque
opacity : 1;
b Set blur filter to 0
-webkit-filter: blur(0px) ;
B Set blur filter to 10 pixels
-webkit-filter: blur(10px) ;
c Set corners to 0 border radius
border-radius : 0px;
C Set corners to 50 pixels border radius
border-radius : 50px;
e Set easing to ease-in (for GIviiRISH the default easing is linear)
animation-timing-function: ease-in;
E Set easing to ease-out
animation-timing-function: ease-out;

Starting & ending positions

Some characters represent special positions that pack several options at once.

These characters are specially useful when creating animations that end and begin in a specific position. Think of them as animation templates.

Character Meaning Returned value
= Reset the transform and opacity to 1
opacity : 1;
transform: none;
o Scale is minimum and opacity is 0
opacity : 0;
transform: scale(0) ;
O Scale is 3 (very big) and opacity is 0
opacity : 0;
transform: scale(3) ;
j Element is rotated -90 degrees, translated to the left and opacity is 0
opacity : 0;
transform: translate(-200%, -150%) rotate(-90deg) ;
J Element is rotated 90 degrees, translated to the right and opacity is 0
opacity : 0;
transform: translate(200%, -150%) rotate(90deg) ;
9 Start or end from top right corner (following the keyboard numpad positioning)
opacity : 0;
transform: translate(-263%, 425%) ;
8 Start or end from top (following the keyboard numpad positioning)
opacity : 0;
transform: translateY(-500%) ;
7 Start or end from top left corner (following the keyboard numpad positioning)
opacity : 0;
transform: translate(-263%, -425%) ;
6 Start or end from right (following the keyboard numpad positioning)
opacity : 0;
transform: translateX(500%) ;
| Start or end from center (5 is used for semi-transparency)
opacity : 0;
transform: translate(0px, 0px) ;
4 Start or end from left (following the keyboard numpad positioning)
opacity : 0;
transform: translate(0px, 0px) ;
3 Start or end from bottom right corner (following the keyboard numpad positioning)
opacity : 0;
transform: translate(263%, 425%) ;
2 Start or end from bottom (following the keyboard numpad positioning)
opacity : 0;
transform: translateY(500%) ;
! Start or end from bottom left corner (1 is used for opcity=1)
opacity : 0;
transform: translate(-263%, 425%) ;

3D Starting & ending positions

GIviiRISH also allows you to do little 3D transformations with a set of commands that are expected to be used toguether.

Character Meaning Returned value
n Object is hidden into 3D space, comes in from top.
opacity : 0;
transform: rotateX(180deg) translateZ(300px) ;
N Object is hidden into 3D space, rolls in from top.
opacity : 0;
transform-origin: center top;
transform: rotateX(180deg) ;
m Object is hidden into 3D space, comes in from bottom.
opacity : 0;
transform: rotateX(-180deg) translateZ(300px) ;
M Object is hidden into 3D space, rolls in from bottom.
opacity : 0;
transform-origin: center bottom;
transform: rotateX(-180deg) translateZ(300px) ;
p Object is hidden into 3D space, comes in from right.
opacity : 0;
transform: rotateY(180deg) translateZ(300px) ;
P Object is hidden into 3D space, rolls in from right.
opacity : 0;
transform-origin: right center;
transform: rotateY(180deg) ;
q Object is hidden into 3D space, comes in from left.
opacity : 0;
transform: rotateY(-180deg) translateZ(300px) ;
Q Object is hidden into 3D space, rolls in from left.
opacity : 0;
transform-origin: left center;
transform: rotateY(-180deg) ;
a Object is visible into 3D space with rotation.
opacity : 1;
transform: rotate3d(1,1,0,0deg) translateZ(300px) ;
A Object is visible into 3D space with no rotation.
opacity : 1;
transform: translateZ(300px) ;

Creating animations

Creating an animation requires that you think what is going to happen on each keyframe and how fast or slow you want the animation.

Let's say you want an element to move from its initial position to the right. GIviiRISH timelines are read like normal text from left to right:

[........]

Now let's use the r character to identify a movement to the left:

[........r]

The previous code will output this css animation code:

/* n:randomName e:linear d:0.54s loop:1 to:cc kf:class|kf:100 x:10 */
@keyframes myTween-233 {
	to {
		transform: translateX(10px) ;
	}
}
@-webkit-keyframes myTween-233 {
	to {
		-webkit-transform: translateX(10px) ;
	}
}
.myTween-233 {
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation-name: myTween-233;
	animation-duration: 0.54s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	-webkit-animation-name: myTween-233;
	-webkit-animation-duration: 0.54s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
}			
		

Test your animation. Want to make a bigger move? Change your r to R:

[........R]

If you want to move your animation to the left change your R to a L:

[........L]

You can also combine characters to create a bigger movement:

[R........L]

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:

Exit animations:

Pulse animations

More examples

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!