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)
Width	width	100px, 50%, auto
Height	height	200px, 100%
Gap	gap	8px, 1rem
Font Size	font-size	16px, 1.5rem, 2em
Font Weight	font-weight	400, 700
Letter Spacing	letter-spacing	0px, 2px, 0.1em
Line Height	line-height	1, 1.5, 2
Clip Path	clip-path	circle(50%), polygon(...)

Units

Properties that accept length or angle values show a unit selector button next to the value input. Click it to switch between available units:

• Translate, width, height: px, rem, em, %, vw, vh
• Gap, font-size, letter-spacing: px, rem, em, %
• Margin, padding: px, rem, em, % (margin supports negative values)
• Position (top, right, bottom, left): px, rem, em, %
• Border-width: px, rem, em
• Border-radius: px, rem, em, %
• Box-shadow (offsets, blur, spread): px, rem, em
• Outline (width, offset): px, rem, em
• Filter blur: px, rem, em
• Angle properties (rotate, hue-rotate): deg, rad, turn

Caution

Changing the unit does not convert the numeric value — it replaces the unit directly. For example, switching a value of 100px to rem gives you 100rem, not the equivalent in rems.

Font Weight

Font Weight uses a dropdown selector with presets from 100 to 900 (in increments of 100) rather than a drag input like other numeric properties. Select a weight from the dropdown to set the value.

Border Style / Outline Style

Border Style and Outline Style use a dropdown selector with the following values:

• solid — a single solid line
• dashed — a series of dashes
• dotted — a series of dots
• double — two parallel solid lines
• groove — a 3D grooved effect
• ridge — a 3D ridged effect
• inset — a 3D inset effect
• outset — a 3D outset effect
• none — no border/outline

Clip Path

Clip Path includes a preset shapes dropdown with common shapes:

• Circle — circle(50%)
• Ellipse — ellipse(50% 40%)
• Inset — inset(10%)
• Rounded Inset — inset(10% round 10px)
• Triangle — polygon(50% 0%, 0% 100%, 100% 100%)
• Hexagon — polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)

Selecting a preset sets the value, which you can then further edit manually using the text input. You can also type any valid clip-path value directly.

Note

CSS can only smoothly animate between clip-path values that use the same shape function with the same number of points. For example, circle(30%) to circle(50%) animates smoothly, but circle(50%) to polygon(...) does not — this is a CSS specification limitation, not specific to Sequotion.

Color picker

Properties like Background Color, Color, and Box Shadow Color include a color swatch button. Click it to open the color picker:

• Saturation/brightness gradient square with draggable handle
• Hue slider (rainbow spectrum)
• Alpha slider (transparency, shown with a checkerboard pattern)
• Hex input (e.g., #ff9100)
• RGBA inputs (individual R, G, B, A fields)

Compound properties

These properties expand into sub-tracks that you can animate independently. Click the + button on a compound property row to manage its sub-properties — select which ones to add, and each gets its own keyframe track.

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

Border

Sub-property	Description
Color	Border color
Width	Border width (px)
Style	Border style (dropdown selector — see Border Style / Outline Style)

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 via the Manage sub-properties button on the Filter track. Available filter functions:

Sub-property	Unit	Range
Blur	px	0–100
Brightness	%	0–500
Contrast	%	0–500
Grayscale	%	0–100
Hue Rotate	deg	0–360
Invert	%	0–100
Saturate	%	0–500
Sepia	%	0–100

Each filter function gets its own keyframe track, so you can animate them independently with different timing and easing.

Position (Inset)

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

Caution

Position sub-properties (top, right, bottom, left) only take effect when the element’s CSS position is set to something other than static. The sub-property dropdown includes a position mode selector — use it to set the element to relative, absolute, fixed, or sticky before adding sub-properties. Use the #id / .class toggle to choose which CSS selector the position declaration is written to.

Margin

Sub-property	CSS Output
All	Sets all four sides
Top	margin-top
Right	margin-right
Bottom	margin-bottom
Left	margin-left

Margin supports negative values, which can be used to pull elements closer together or create overlapping layouts.

Padding

Sub-property	CSS Output
All	Sets all four sides
Top	padding-top
Right	padding-right
Bottom	padding-bottom
Left	padding-left

Outline

Sub-property	Description
Color	Outline color
Width	Outline width (px)
Style	Outline style (dropdown selector — see Border Style / Outline Style)
Offset	Distance between the outline and the element border

Outline offset (outline-offset) pushes the outline away from (positive values) or into (negative values) the element border.

Text Shadow

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

Text Shadow works like Box Shadow but applies to the text content of an element rather than the element’s box.

Backdrop Filter

Backdrop Filter uses the same filter functions as Filter:

Sub-property	Unit	Range
Blur	px	0–100
Brightness	%	0–500
Contrast	%	0–500
Grayscale	%	0–100
Hue Rotate	deg	0–360
Invert	%	0–100
Saturate	%	0–500
Sepia	%	0–100

Note

Backdrop filter applies to the area behind the element. The element itself needs a semi-transparent or transparent background (e.g., background: rgba(0,0,0,0.3)) for the effect to be visible.

”All” sub-property

For compound properties with an All sub-track (border-radius, position, margin, padding), changing the “All” value sets all sibling sub-tracks to the same value. Individual sub-tracks can still be set independently afterward.

Property groups

Properties are organized into five groups in the Add Property dropdown:

• Transform — translate, rotate, scale
• Layout — width, height, gap, margin, padding, position
• Appearance — opacity, background-color, color, border, border-radius, box-shadow, outline
• Effects — filter, backdrop-filter, text-shadow, clip-path
• Typography — font-size, font-weight, letter-spacing, line-height