CSS Properties

Sequotion supports the following CSS properties for animation.

Simple properties

Property	CSS Output	Example Values
Opacity	opacity	0, 0.5, 1
Translate	translate	0px 0px, 100px -50px
Rotate	rotate	0deg, 45deg, 360deg
Scale	scale	1, 1.5, 0.5 1.2
Background Color	background-color	#ff0000, rgba(0,0,0,0.5)
Color	color	#ffffff, rgb(50,50,50)
Border	border-color, border-width	Color + width values
Width	width	100px, 50%, auto
Height	height	200px, 100%

Compound properties

These properties expand into sub-tracks that you can animate independently:

Border Radius

Sub-property	CSS Output
All	Sets all four corners
Top Left	border-top-left-radius
Top Right	border-top-right-radius
Bottom Left	border-bottom-left-radius
Bottom Right	border-bottom-right-radius

Box Shadow

Sub-property	Description
Offset X	Horizontal offset (px)
Offset Y	Vertical offset (px)
Blur	Blur radius (px)
Spread	Spread radius (px)
Color	Shadow color

Filter

Filters are added dynamically. Available filter functions include:

blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow