Bootstrap5Components (bootstrap5components v0.5.1)

View Source

A module to generate Phoenix Bootstrap components tailored to your application.

This module can be used together with the CodeGen package as follows:

defmodule YourAppWeb.CoreComponents do
  use CodeGen,
    module: Bootstrap5Components,
    options: [
      # This option is required:
      gettext_module: YourAppWeb.Gettext
    ]
end

Supports the following options:

  • gettext_module - a module that implements the Gettext behaviour to internationalize the user-visible text in your components

Summary

Functions

A component that adds a new item to a list of movable inputs. This component is meant to be used inside <.movable_inputs_for /> component.

Animate with a back in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a back in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a back in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a back in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a back out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a back out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a back out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a back out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a bounce out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade in up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a fade out up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a flash pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a flip pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a flip in x pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a flip in y pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a flip out x pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a flip out y pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a head shake pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a heart beat pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a hinge pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a jack in the box pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a jello pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a light speed in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a light speed in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a light speed out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a light speed out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a pulse pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a roll in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a roll out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate in down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate in down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate in up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate in up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate out down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate out down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate out up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rotate out up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a rubber band pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a shake x pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a shake y pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a slide out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a swing pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a tada pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a wobble pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Animate with a zoom out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Render a resource as HTML.

Get the url for a resource.

Create a select option from a resoure that implements the Bootstrap5Components.Resource protocol.

Create list of select options from a list of resoures that´ implement the Bootstrap5Components.Resource protocol.

Render a resource as plain text.

Renders a back navigation link.

A component for bulk actions that can take the ids of multiple targets.

A checkbox to select an id for a bulk action.

Renders a button.

A component containing the references to all CSS and JS used by these components.

A component that deletes an item from moveable inputs. This component is meant to be used inside <.movable_inputs_for /> component.

Generates a generic error message.

Renders flash notices.

Shows the flash group with standard titles and content.

Default options for Flop pagination that play well with Bootstrap5.

Default options for Flop tables that play well with Bootstrap5.

Renders a header with title.

Renders an input with label and error messages.

Renders a label.

Renders a data list.

Area for the main content below the nabvar, supporting slots for the content itself and for an optional sidebar.

Renders a modal.

A component to move an element up in an association. To move up an element in an association is the same as movinbg it towards the beginning of the list.

Navbar component.

Component for a navbar link.

Get the url for a resource.

Renders an input with label and error messages.

Sidebar link.

A group of links in your sidebar, which will be rendered as a block

Renders a simple form.

Renders a table with generic styling.

Translates an error message using gettext.

Translates the errors for a field from a keyword list of errors.

Functions

add_new_input(assigns)

A component that adds a new item to a list of movable inputs. This component is meant to be used inside <.movable_inputs_for /> component.

Attributes

  • sort_param (Phoenix.HTML.FormField) - sort field for the association.
  • cursor (:string) - CSS cursor style while hovering the button. Defaults to "pointer".
  • tooltip (:string) - tooltip for the action. Defaults to nil.
  • class (:string) - CSS class for the outer element (a <label/> element). Defaults to "btn btn-primary mt-3 form-control".

animate_back_in_down(opts \\ [])

Animate with a back in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_in_down(speed: :normal, repeat: true)}>
  Animate as <strong>back in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in down

Fast speed

<p class={animate_back_in_down(speed: :fast, repeat: true)}>
  Animate as <strong>back in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in down

Faster speed (default)

<p class={animate_back_in_down(speed: :faster, repeat: true)}>
  Animate as <strong>back in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in down

animate_back_in_left(opts \\ [])

Animate with a back in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_in_left(speed: :normal, repeat: true)}>
  Animate as <strong>back in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in left

Fast speed

<p class={animate_back_in_left(speed: :fast, repeat: true)}>
  Animate as <strong>back in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in left

Faster speed (default)

<p class={animate_back_in_left(speed: :faster, repeat: true)}>
  Animate as <strong>back in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in left

animate_back_in_right(opts \\ [])

Animate with a back in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_in_right(speed: :normal, repeat: true)}>
  Animate as <strong>back in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in right

Fast speed

<p class={animate_back_in_right(speed: :fast, repeat: true)}>
  Animate as <strong>back in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in right

Faster speed (default)

<p class={animate_back_in_right(speed: :faster, repeat: true)}>
  Animate as <strong>back in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in right

animate_back_in_up(opts \\ [])

Animate with a back in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_in_up(speed: :normal, repeat: true)}>
  Animate as <strong>back in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in up

Fast speed

<p class={animate_back_in_up(speed: :fast, repeat: true)}>
  Animate as <strong>back in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in up

Faster speed (default)

<p class={animate_back_in_up(speed: :faster, repeat: true)}>
  Animate as <strong>back in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back in up

animate_back_out_down(opts \\ [])

Animate with a back out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_out_down(speed: :normal, repeat: true)}>
  Animate as <strong>back out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out down

Fast speed

<p class={animate_back_out_down(speed: :fast, repeat: true)}>
  Animate as <strong>back out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out down

Faster speed (default)

<p class={animate_back_out_down(speed: :faster, repeat: true)}>
  Animate as <strong>back out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out down

animate_back_out_left(opts \\ [])

Animate with a back out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_out_left(speed: :normal, repeat: true)}>
  Animate as <strong>back out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out left

Fast speed

<p class={animate_back_out_left(speed: :fast, repeat: true)}>
  Animate as <strong>back out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out left

Faster speed (default)

<p class={animate_back_out_left(speed: :faster, repeat: true)}>
  Animate as <strong>back out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out left

animate_back_out_right(opts \\ [])

Animate with a back out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_out_right(speed: :normal, repeat: true)}>
  Animate as <strong>back out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out right

Fast speed

<p class={animate_back_out_right(speed: :fast, repeat: true)}>
  Animate as <strong>back out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out right

Faster speed (default)

<p class={animate_back_out_right(speed: :faster, repeat: true)}>
  Animate as <strong>back out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out right

animate_back_out_up(opts \\ [])

Animate with a back out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_back_out_up(speed: :normal, repeat: true)}>
  Animate as <strong>back out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out up

Fast speed

<p class={animate_back_out_up(speed: :fast, repeat: true)}>
  Animate as <strong>back out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out up

Faster speed (default)

<p class={animate_back_out_up(speed: :faster, repeat: true)}>
  Animate as <strong>back out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as back out up

animate_bounce(opts \\ [])

Animate with a bounce pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce(speed: :normal, repeat: true)}>
  Animate as <strong>bounce</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce

Fast speed

<p class={animate_bounce(speed: :fast, repeat: true)}>
  Animate as <strong>bounce</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce

Faster speed (default)

<p class={animate_bounce(speed: :faster, repeat: true)}>
  Animate as <strong>bounce</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce

animate_bounce_in(opts \\ [])

Animate with a bounce in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_in(speed: :normal, repeat: true)}>
  Animate as <strong>bounce in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in

Fast speed

<p class={animate_bounce_in(speed: :fast, repeat: true)}>
  Animate as <strong>bounce in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in

Faster speed (default)

<p class={animate_bounce_in(speed: :faster, repeat: true)}>
  Animate as <strong>bounce in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in

animate_bounce_in_down(opts \\ [])

Animate with a bounce in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_in_down(speed: :normal, repeat: true)}>
  Animate as <strong>bounce in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in down

Fast speed

<p class={animate_bounce_in_down(speed: :fast, repeat: true)}>
  Animate as <strong>bounce in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in down

Faster speed (default)

<p class={animate_bounce_in_down(speed: :faster, repeat: true)}>
  Animate as <strong>bounce in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in down

animate_bounce_in_left(opts \\ [])

Animate with a bounce in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_in_left(speed: :normal, repeat: true)}>
  Animate as <strong>bounce in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in left

Fast speed

<p class={animate_bounce_in_left(speed: :fast, repeat: true)}>
  Animate as <strong>bounce in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in left

Faster speed (default)

<p class={animate_bounce_in_left(speed: :faster, repeat: true)}>
  Animate as <strong>bounce in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in left

animate_bounce_in_right(opts \\ [])

Animate with a bounce in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_in_right(speed: :normal, repeat: true)}>
  Animate as <strong>bounce in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in right

Fast speed

<p class={animate_bounce_in_right(speed: :fast, repeat: true)}>
  Animate as <strong>bounce in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in right

Faster speed (default)

<p class={animate_bounce_in_right(speed: :faster, repeat: true)}>
  Animate as <strong>bounce in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in right

animate_bounce_in_up(opts \\ [])

Animate with a bounce in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_in_up(speed: :normal, repeat: true)}>
  Animate as <strong>bounce in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in up

Fast speed

<p class={animate_bounce_in_up(speed: :fast, repeat: true)}>
  Animate as <strong>bounce in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in up

Faster speed (default)

<p class={animate_bounce_in_up(speed: :faster, repeat: true)}>
  Animate as <strong>bounce in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce in up

animate_bounce_out(opts \\ [])

Animate with a bounce out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_out(speed: :normal, repeat: true)}>
  Animate as <strong>bounce out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out

Fast speed

<p class={animate_bounce_out(speed: :fast, repeat: true)}>
  Animate as <strong>bounce out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out

Faster speed (default)

<p class={animate_bounce_out(speed: :faster, repeat: true)}>
  Animate as <strong>bounce out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out

animate_bounce_out_down(opts \\ [])

Animate with a bounce out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_out_down(speed: :normal, repeat: true)}>
  Animate as <strong>bounce out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out down

Fast speed

<p class={animate_bounce_out_down(speed: :fast, repeat: true)}>
  Animate as <strong>bounce out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out down

Faster speed (default)

<p class={animate_bounce_out_down(speed: :faster, repeat: true)}>
  Animate as <strong>bounce out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out down

animate_bounce_out_left(opts \\ [])

Animate with a bounce out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_out_left(speed: :normal, repeat: true)}>
  Animate as <strong>bounce out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out left

Fast speed

<p class={animate_bounce_out_left(speed: :fast, repeat: true)}>
  Animate as <strong>bounce out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out left

Faster speed (default)

<p class={animate_bounce_out_left(speed: :faster, repeat: true)}>
  Animate as <strong>bounce out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out left

animate_bounce_out_right(opts \\ [])

Animate with a bounce out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_out_right(speed: :normal, repeat: true)}>
  Animate as <strong>bounce out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out right

Fast speed

<p class={animate_bounce_out_right(speed: :fast, repeat: true)}>
  Animate as <strong>bounce out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out right

Faster speed (default)

<p class={animate_bounce_out_right(speed: :faster, repeat: true)}>
  Animate as <strong>bounce out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out right

animate_bounce_out_up(opts \\ [])

Animate with a bounce out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_bounce_out_up(speed: :normal, repeat: true)}>
  Animate as <strong>bounce out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out up

Fast speed

<p class={animate_bounce_out_up(speed: :fast, repeat: true)}>
  Animate as <strong>bounce out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out up

Faster speed (default)

<p class={animate_bounce_out_up(speed: :faster, repeat: true)}>
  Animate as <strong>bounce out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as bounce out up

animate_fade_in(opts \\ [])

Animate with a fade in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in(speed: :normal, repeat: true)}>
  Animate as <strong>fade in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in

Fast speed

<p class={animate_fade_in(speed: :fast, repeat: true)}>
  Animate as <strong>fade in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in

Faster speed (default)

<p class={animate_fade_in(speed: :faster, repeat: true)}>
  Animate as <strong>fade in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in

animate_fade_in_bottom_left(opts \\ [])

Animate with a fade in bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_bottom_left(speed: :normal, repeat: true)}>
  Animate as <strong>fade in bottom left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in bottom left

Fast speed

<p class={animate_fade_in_bottom_left(speed: :fast, repeat: true)}>
  Animate as <strong>fade in bottom left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in bottom left

Faster speed (default)

<p class={animate_fade_in_bottom_left(speed: :faster, repeat: true)}>
  Animate as <strong>fade in bottom left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in bottom left

animate_fade_in_bottom_right(opts \\ [])

Animate with a fade in bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_bottom_right(speed: :normal, repeat: true)}>
  Animate as <strong>fade in bottom right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in bottom right

Fast speed

<p class={animate_fade_in_bottom_right(speed: :fast, repeat: true)}>
  Animate as <strong>fade in bottom right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in bottom right

Faster speed (default)

<p class={animate_fade_in_bottom_right(speed: :faster, repeat: true)}>
  Animate as <strong>fade in bottom right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in bottom right

animate_fade_in_down(opts \\ [])

Animate with a fade in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_down(speed: :normal, repeat: true)}>
  Animate as <strong>fade in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in down

Fast speed

<p class={animate_fade_in_down(speed: :fast, repeat: true)}>
  Animate as <strong>fade in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in down

Faster speed (default)

<p class={animate_fade_in_down(speed: :faster, repeat: true)}>
  Animate as <strong>fade in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in down

animate_fade_in_down_big(opts \\ [])

Animate with a fade in down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_down_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade in down big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in down big

Fast speed

<p class={animate_fade_in_down_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade in down big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in down big

Faster speed (default)

<p class={animate_fade_in_down_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade in down big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in down big

animate_fade_in_left(opts \\ [])

Animate with a fade in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_left(speed: :normal, repeat: true)}>
  Animate as <strong>fade in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in left

Fast speed

<p class={animate_fade_in_left(speed: :fast, repeat: true)}>
  Animate as <strong>fade in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in left

Faster speed (default)

<p class={animate_fade_in_left(speed: :faster, repeat: true)}>
  Animate as <strong>fade in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in left

animate_fade_in_left_big(opts \\ [])

Animate with a fade in left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_left_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade in left big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in left big

Fast speed

<p class={animate_fade_in_left_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade in left big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in left big

Faster speed (default)

<p class={animate_fade_in_left_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade in left big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in left big

animate_fade_in_right(opts \\ [])

Animate with a fade in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_right(speed: :normal, repeat: true)}>
  Animate as <strong>fade in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in right

Fast speed

<p class={animate_fade_in_right(speed: :fast, repeat: true)}>
  Animate as <strong>fade in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in right

Faster speed (default)

<p class={animate_fade_in_right(speed: :faster, repeat: true)}>
  Animate as <strong>fade in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in right

animate_fade_in_right_big(opts \\ [])

Animate with a fade in right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_right_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade in right big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in right big

Fast speed

<p class={animate_fade_in_right_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade in right big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in right big

Faster speed (default)

<p class={animate_fade_in_right_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade in right big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in right big

animate_fade_in_top_left(opts \\ [])

Animate with a fade in top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_top_left(speed: :normal, repeat: true)}>
  Animate as <strong>fade in top left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in top left

Fast speed

<p class={animate_fade_in_top_left(speed: :fast, repeat: true)}>
  Animate as <strong>fade in top left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in top left

Faster speed (default)

<p class={animate_fade_in_top_left(speed: :faster, repeat: true)}>
  Animate as <strong>fade in top left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in top left

animate_fade_in_top_right(opts \\ [])

Animate with a fade in top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_top_right(speed: :normal, repeat: true)}>
  Animate as <strong>fade in top right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in top right

Fast speed

<p class={animate_fade_in_top_right(speed: :fast, repeat: true)}>
  Animate as <strong>fade in top right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in top right

Faster speed (default)

<p class={animate_fade_in_top_right(speed: :faster, repeat: true)}>
  Animate as <strong>fade in top right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in top right

animate_fade_in_up(opts \\ [])

Animate with a fade in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_up(speed: :normal, repeat: true)}>
  Animate as <strong>fade in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in up

Fast speed

<p class={animate_fade_in_up(speed: :fast, repeat: true)}>
  Animate as <strong>fade in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in up

Faster speed (default)

<p class={animate_fade_in_up(speed: :faster, repeat: true)}>
  Animate as <strong>fade in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in up

animate_fade_in_up_big(opts \\ [])

Animate with a fade in up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_in_up_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade in up big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in up big

Fast speed

<p class={animate_fade_in_up_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade in up big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in up big

Faster speed (default)

<p class={animate_fade_in_up_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade in up big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade in up big

animate_fade_out(opts \\ [])

Animate with a fade out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out(speed: :normal, repeat: true)}>
  Animate as <strong>fade out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out

Fast speed

<p class={animate_fade_out(speed: :fast, repeat: true)}>
  Animate as <strong>fade out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out

Faster speed (default)

<p class={animate_fade_out(speed: :faster, repeat: true)}>
  Animate as <strong>fade out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out

animate_fade_out_bottom_left(opts \\ [])

Animate with a fade out bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_bottom_left(speed: :normal, repeat: true)}>
  Animate as <strong>fade out bottom left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out bottom left

Fast speed

<p class={animate_fade_out_bottom_left(speed: :fast, repeat: true)}>
  Animate as <strong>fade out bottom left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out bottom left

Faster speed (default)

<p class={animate_fade_out_bottom_left(speed: :faster, repeat: true)}>
  Animate as <strong>fade out bottom left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out bottom left

animate_fade_out_bottom_right(opts \\ [])

Animate with a fade out bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_bottom_right(speed: :normal, repeat: true)}>
  Animate as <strong>fade out bottom right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out bottom right

Fast speed

<p class={animate_fade_out_bottom_right(speed: :fast, repeat: true)}>
  Animate as <strong>fade out bottom right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out bottom right

Faster speed (default)

<p class={animate_fade_out_bottom_right(speed: :faster, repeat: true)}>
  Animate as <strong>fade out bottom right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out bottom right

animate_fade_out_down(opts \\ [])

Animate with a fade out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_down(speed: :normal, repeat: true)}>
  Animate as <strong>fade out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out down

Fast speed

<p class={animate_fade_out_down(speed: :fast, repeat: true)}>
  Animate as <strong>fade out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out down

Faster speed (default)

<p class={animate_fade_out_down(speed: :faster, repeat: true)}>
  Animate as <strong>fade out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out down

animate_fade_out_down_big(opts \\ [])

Animate with a fade out down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_down_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade out down big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out down big

Fast speed

<p class={animate_fade_out_down_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade out down big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out down big

Faster speed (default)

<p class={animate_fade_out_down_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade out down big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out down big

animate_fade_out_left(opts \\ [])

Animate with a fade out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_left(speed: :normal, repeat: true)}>
  Animate as <strong>fade out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out left

Fast speed

<p class={animate_fade_out_left(speed: :fast, repeat: true)}>
  Animate as <strong>fade out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out left

Faster speed (default)

<p class={animate_fade_out_left(speed: :faster, repeat: true)}>
  Animate as <strong>fade out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out left

animate_fade_out_left_big(opts \\ [])

Animate with a fade out left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_left_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade out left big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out left big

Fast speed

<p class={animate_fade_out_left_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade out left big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out left big

Faster speed (default)

<p class={animate_fade_out_left_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade out left big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out left big

animate_fade_out_right(opts \\ [])

Animate with a fade out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_right(speed: :normal, repeat: true)}>
  Animate as <strong>fade out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out right

Fast speed

<p class={animate_fade_out_right(speed: :fast, repeat: true)}>
  Animate as <strong>fade out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out right

Faster speed (default)

<p class={animate_fade_out_right(speed: :faster, repeat: true)}>
  Animate as <strong>fade out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out right

animate_fade_out_right_big(opts \\ [])

Animate with a fade out right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_right_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade out right big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out right big

Fast speed

<p class={animate_fade_out_right_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade out right big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out right big

Faster speed (default)

<p class={animate_fade_out_right_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade out right big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out right big

animate_fade_out_top_left(opts \\ [])

Animate with a fade out top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_top_left(speed: :normal, repeat: true)}>
  Animate as <strong>fade out top left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out top left

Fast speed

<p class={animate_fade_out_top_left(speed: :fast, repeat: true)}>
  Animate as <strong>fade out top left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out top left

Faster speed (default)

<p class={animate_fade_out_top_left(speed: :faster, repeat: true)}>
  Animate as <strong>fade out top left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out top left

animate_fade_out_top_right(opts \\ [])

Animate with a fade out top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_top_right(speed: :normal, repeat: true)}>
  Animate as <strong>fade out top right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out top right

Fast speed

<p class={animate_fade_out_top_right(speed: :fast, repeat: true)}>
  Animate as <strong>fade out top right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out top right

Faster speed (default)

<p class={animate_fade_out_top_right(speed: :faster, repeat: true)}>
  Animate as <strong>fade out top right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out top right

animate_fade_out_up(opts \\ [])

Animate with a fade out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_up(speed: :normal, repeat: true)}>
  Animate as <strong>fade out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out up

Fast speed

<p class={animate_fade_out_up(speed: :fast, repeat: true)}>
  Animate as <strong>fade out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out up

Faster speed (default)

<p class={animate_fade_out_up(speed: :faster, repeat: true)}>
  Animate as <strong>fade out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out up

animate_fade_out_up_big(opts \\ [])

Animate with a fade out up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_fade_out_up_big(speed: :normal, repeat: true)}>
  Animate as <strong>fade out up big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out up big

Fast speed

<p class={animate_fade_out_up_big(speed: :fast, repeat: true)}>
  Animate as <strong>fade out up big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out up big

Faster speed (default)

<p class={animate_fade_out_up_big(speed: :faster, repeat: true)}>
  Animate as <strong>fade out up big</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as fade out up big

animate_flash(opts \\ [])

Animate with a flash pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_flash(speed: :normal, repeat: true)}>
  Animate as <strong>flash</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flash

Fast speed

<p class={animate_flash(speed: :fast, repeat: true)}>
  Animate as <strong>flash</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flash

Faster speed (default)

<p class={animate_flash(speed: :faster, repeat: true)}>
  Animate as <strong>flash</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flash

animate_flip(opts \\ [])

Animate with a flip pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_flip(speed: :normal, repeat: true)}>
  Animate as <strong>flip</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip

Fast speed

<p class={animate_flip(speed: :fast, repeat: true)}>
  Animate as <strong>flip</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip

Faster speed (default)

<p class={animate_flip(speed: :faster, repeat: true)}>
  Animate as <strong>flip</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip

animate_flip_in_x(opts \\ [])

Animate with a flip in x pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_flip_in_x(speed: :normal, repeat: true)}>
  Animate as <strong>flip in x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip in x

Fast speed

<p class={animate_flip_in_x(speed: :fast, repeat: true)}>
  Animate as <strong>flip in x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip in x

Faster speed (default)

<p class={animate_flip_in_x(speed: :faster, repeat: true)}>
  Animate as <strong>flip in x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip in x

animate_flip_in_y(opts \\ [])

Animate with a flip in y pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_flip_in_y(speed: :normal, repeat: true)}>
  Animate as <strong>flip in y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip in y

Fast speed

<p class={animate_flip_in_y(speed: :fast, repeat: true)}>
  Animate as <strong>flip in y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip in y

Faster speed (default)

<p class={animate_flip_in_y(speed: :faster, repeat: true)}>
  Animate as <strong>flip in y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip in y

animate_flip_out_x(opts \\ [])

Animate with a flip out x pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_flip_out_x(speed: :normal, repeat: true)}>
  Animate as <strong>flip out x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip out x

Fast speed

<p class={animate_flip_out_x(speed: :fast, repeat: true)}>
  Animate as <strong>flip out x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip out x

Faster speed (default)

<p class={animate_flip_out_x(speed: :faster, repeat: true)}>
  Animate as <strong>flip out x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip out x

animate_flip_out_y(opts \\ [])

Animate with a flip out y pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_flip_out_y(speed: :normal, repeat: true)}>
  Animate as <strong>flip out y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip out y

Fast speed

<p class={animate_flip_out_y(speed: :fast, repeat: true)}>
  Animate as <strong>flip out y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip out y

Faster speed (default)

<p class={animate_flip_out_y(speed: :faster, repeat: true)}>
  Animate as <strong>flip out y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as flip out y

animate_head_shake(opts \\ [])

Animate with a head shake pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_head_shake(speed: :normal, repeat: true)}>
  Animate as <strong>head shake</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as head shake

Fast speed

<p class={animate_head_shake(speed: :fast, repeat: true)}>
  Animate as <strong>head shake</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as head shake

Faster speed (default)

<p class={animate_head_shake(speed: :faster, repeat: true)}>
  Animate as <strong>head shake</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as head shake

animate_heart_beat(opts \\ [])

Animate with a heart beat pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_heart_beat(speed: :normal, repeat: true)}>
  Animate as <strong>heart beat</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as heart beat

Fast speed

<p class={animate_heart_beat(speed: :fast, repeat: true)}>
  Animate as <strong>heart beat</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as heart beat

Faster speed (default)

<p class={animate_heart_beat(speed: :faster, repeat: true)}>
  Animate as <strong>heart beat</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as heart beat

animate_hinge(opts \\ [])

Animate with a hinge pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_hinge(speed: :normal, repeat: true)}>
  Animate as <strong>hinge</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as hinge

Fast speed

<p class={animate_hinge(speed: :fast, repeat: true)}>
  Animate as <strong>hinge</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as hinge

Faster speed (default)

<p class={animate_hinge(speed: :faster, repeat: true)}>
  Animate as <strong>hinge</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as hinge

animate_jack_in_the_box(opts \\ [])

Animate with a jack in the box pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_jack_in_the_box(speed: :normal, repeat: true)}>
  Animate as <strong>jack in the box</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as jack in the box

Fast speed

<p class={animate_jack_in_the_box(speed: :fast, repeat: true)}>
  Animate as <strong>jack in the box</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as jack in the box

Faster speed (default)

<p class={animate_jack_in_the_box(speed: :faster, repeat: true)}>
  Animate as <strong>jack in the box</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as jack in the box

animate_jello(opts \\ [])

Animate with a jello pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_jello(speed: :normal, repeat: true)}>
  Animate as <strong>jello</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as jello

Fast speed

<p class={animate_jello(speed: :fast, repeat: true)}>
  Animate as <strong>jello</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as jello

Faster speed (default)

<p class={animate_jello(speed: :faster, repeat: true)}>
  Animate as <strong>jello</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as jello

animate_light_speed_in_left(opts \\ [])

Animate with a light speed in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_light_speed_in_left(speed: :normal, repeat: true)}>
  Animate as <strong>light speed in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed in left

Fast speed

<p class={animate_light_speed_in_left(speed: :fast, repeat: true)}>
  Animate as <strong>light speed in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed in left

Faster speed (default)

<p class={animate_light_speed_in_left(speed: :faster, repeat: true)}>
  Animate as <strong>light speed in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed in left

animate_light_speed_in_right(opts \\ [])

Animate with a light speed in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_light_speed_in_right(speed: :normal, repeat: true)}>
  Animate as <strong>light speed in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed in right

Fast speed

<p class={animate_light_speed_in_right(speed: :fast, repeat: true)}>
  Animate as <strong>light speed in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed in right

Faster speed (default)

<p class={animate_light_speed_in_right(speed: :faster, repeat: true)}>
  Animate as <strong>light speed in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed in right

animate_light_speed_out_left(opts \\ [])

Animate with a light speed out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_light_speed_out_left(speed: :normal, repeat: true)}>
  Animate as <strong>light speed out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed out left

Fast speed

<p class={animate_light_speed_out_left(speed: :fast, repeat: true)}>
  Animate as <strong>light speed out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed out left

Faster speed (default)

<p class={animate_light_speed_out_left(speed: :faster, repeat: true)}>
  Animate as <strong>light speed out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed out left

animate_light_speed_out_right(opts \\ [])

Animate with a light speed out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_light_speed_out_right(speed: :normal, repeat: true)}>
  Animate as <strong>light speed out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed out right

Fast speed

<p class={animate_light_speed_out_right(speed: :fast, repeat: true)}>
  Animate as <strong>light speed out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed out right

Faster speed (default)

<p class={animate_light_speed_out_right(speed: :faster, repeat: true)}>
  Animate as <strong>light speed out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as light speed out right

animate_pulse(opts \\ [])

Animate with a pulse pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_pulse(speed: :normal, repeat: true)}>
  Animate as <strong>pulse</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as pulse

Fast speed

<p class={animate_pulse(speed: :fast, repeat: true)}>
  Animate as <strong>pulse</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as pulse

Faster speed (default)

<p class={animate_pulse(speed: :faster, repeat: true)}>
  Animate as <strong>pulse</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as pulse

animate_roll_in(opts \\ [])

Animate with a roll in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_roll_in(speed: :normal, repeat: true)}>
  Animate as <strong>roll in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as roll in

Fast speed

<p class={animate_roll_in(speed: :fast, repeat: true)}>
  Animate as <strong>roll in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as roll in

Faster speed (default)

<p class={animate_roll_in(speed: :faster, repeat: true)}>
  Animate as <strong>roll in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as roll in

animate_roll_out(opts \\ [])

Animate with a roll out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_roll_out(speed: :normal, repeat: true)}>
  Animate as <strong>roll out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as roll out

Fast speed

<p class={animate_roll_out(speed: :fast, repeat: true)}>
  Animate as <strong>roll out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as roll out

Faster speed (default)

<p class={animate_roll_out(speed: :faster, repeat: true)}>
  Animate as <strong>roll out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as roll out

animate_rotate_in(opts \\ [])

Animate with a rotate in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_in(speed: :normal, repeat: true)}>
  Animate as <strong>rotate in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in

Fast speed

<p class={animate_rotate_in(speed: :fast, repeat: true)}>
  Animate as <strong>rotate in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in

Faster speed (default)

<p class={animate_rotate_in(speed: :faster, repeat: true)}>
  Animate as <strong>rotate in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in

animate_rotate_in_down_left(opts \\ [])

Animate with a rotate in down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_in_down_left(speed: :normal, repeat: true)}>
  Animate as <strong>rotate in down left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in down left

Fast speed

<p class={animate_rotate_in_down_left(speed: :fast, repeat: true)}>
  Animate as <strong>rotate in down left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in down left

Faster speed (default)

<p class={animate_rotate_in_down_left(speed: :faster, repeat: true)}>
  Animate as <strong>rotate in down left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in down left

animate_rotate_in_down_right(opts \\ [])

Animate with a rotate in down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_in_down_right(speed: :normal, repeat: true)}>
  Animate as <strong>rotate in down right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in down right

Fast speed

<p class={animate_rotate_in_down_right(speed: :fast, repeat: true)}>
  Animate as <strong>rotate in down right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in down right

Faster speed (default)

<p class={animate_rotate_in_down_right(speed: :faster, repeat: true)}>
  Animate as <strong>rotate in down right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in down right

animate_rotate_in_up_left(opts \\ [])

Animate with a rotate in up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_in_up_left(speed: :normal, repeat: true)}>
  Animate as <strong>rotate in up left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in up left

Fast speed

<p class={animate_rotate_in_up_left(speed: :fast, repeat: true)}>
  Animate as <strong>rotate in up left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in up left

Faster speed (default)

<p class={animate_rotate_in_up_left(speed: :faster, repeat: true)}>
  Animate as <strong>rotate in up left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in up left

animate_rotate_in_up_right(opts \\ [])

Animate with a rotate in up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_in_up_right(speed: :normal, repeat: true)}>
  Animate as <strong>rotate in up right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in up right

Fast speed

<p class={animate_rotate_in_up_right(speed: :fast, repeat: true)}>
  Animate as <strong>rotate in up right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in up right

Faster speed (default)

<p class={animate_rotate_in_up_right(speed: :faster, repeat: true)}>
  Animate as <strong>rotate in up right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate in up right

animate_rotate_out(opts \\ [])

Animate with a rotate out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_out(speed: :normal, repeat: true)}>
  Animate as <strong>rotate out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out

Fast speed

<p class={animate_rotate_out(speed: :fast, repeat: true)}>
  Animate as <strong>rotate out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out

Faster speed (default)

<p class={animate_rotate_out(speed: :faster, repeat: true)}>
  Animate as <strong>rotate out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out

animate_rotate_out_down_left(opts \\ [])

Animate with a rotate out down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_out_down_left(speed: :normal, repeat: true)}>
  Animate as <strong>rotate out down left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out down left

Fast speed

<p class={animate_rotate_out_down_left(speed: :fast, repeat: true)}>
  Animate as <strong>rotate out down left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out down left

Faster speed (default)

<p class={animate_rotate_out_down_left(speed: :faster, repeat: true)}>
  Animate as <strong>rotate out down left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out down left

animate_rotate_out_down_right(opts \\ [])

Animate with a rotate out down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_out_down_right(speed: :normal, repeat: true)}>
  Animate as <strong>rotate out down right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out down right

Fast speed

<p class={animate_rotate_out_down_right(speed: :fast, repeat: true)}>
  Animate as <strong>rotate out down right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out down right

Faster speed (default)

<p class={animate_rotate_out_down_right(speed: :faster, repeat: true)}>
  Animate as <strong>rotate out down right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out down right

animate_rotate_out_up_left(opts \\ [])

Animate with a rotate out up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_out_up_left(speed: :normal, repeat: true)}>
  Animate as <strong>rotate out up left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out up left

Fast speed

<p class={animate_rotate_out_up_left(speed: :fast, repeat: true)}>
  Animate as <strong>rotate out up left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out up left

Faster speed (default)

<p class={animate_rotate_out_up_left(speed: :faster, repeat: true)}>
  Animate as <strong>rotate out up left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out up left

animate_rotate_out_up_right(opts \\ [])

Animate with a rotate out up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rotate_out_up_right(speed: :normal, repeat: true)}>
  Animate as <strong>rotate out up right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out up right

Fast speed

<p class={animate_rotate_out_up_right(speed: :fast, repeat: true)}>
  Animate as <strong>rotate out up right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out up right

Faster speed (default)

<p class={animate_rotate_out_up_right(speed: :faster, repeat: true)}>
  Animate as <strong>rotate out up right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rotate out up right

animate_rubber_band(opts \\ [])

Animate with a rubber band pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_rubber_band(speed: :normal, repeat: true)}>
  Animate as <strong>rubber band</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rubber band

Fast speed

<p class={animate_rubber_band(speed: :fast, repeat: true)}>
  Animate as <strong>rubber band</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rubber band

Faster speed (default)

<p class={animate_rubber_band(speed: :faster, repeat: true)}>
  Animate as <strong>rubber band</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as rubber band

animate_shake_x(opts \\ [])

Animate with a shake x pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_shake_x(speed: :normal, repeat: true)}>
  Animate as <strong>shake x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as shake x

Fast speed

<p class={animate_shake_x(speed: :fast, repeat: true)}>
  Animate as <strong>shake x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as shake x

Faster speed (default)

<p class={animate_shake_x(speed: :faster, repeat: true)}>
  Animate as <strong>shake x</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as shake x

animate_shake_y(opts \\ [])

Animate with a shake y pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_shake_y(speed: :normal, repeat: true)}>
  Animate as <strong>shake y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as shake y

Fast speed

<p class={animate_shake_y(speed: :fast, repeat: true)}>
  Animate as <strong>shake y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as shake y

Faster speed (default)

<p class={animate_shake_y(speed: :faster, repeat: true)}>
  Animate as <strong>shake y</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as shake y

animate_slide_in_down(opts \\ [])

Animate with a slide in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_in_down(speed: :normal, repeat: true)}>
  Animate as <strong>slide in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in down

Fast speed

<p class={animate_slide_in_down(speed: :fast, repeat: true)}>
  Animate as <strong>slide in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in down

Faster speed (default)

<p class={animate_slide_in_down(speed: :faster, repeat: true)}>
  Animate as <strong>slide in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in down

animate_slide_in_left(opts \\ [])

Animate with a slide in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_in_left(speed: :normal, repeat: true)}>
  Animate as <strong>slide in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in left

Fast speed

<p class={animate_slide_in_left(speed: :fast, repeat: true)}>
  Animate as <strong>slide in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in left

Faster speed (default)

<p class={animate_slide_in_left(speed: :faster, repeat: true)}>
  Animate as <strong>slide in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in left

animate_slide_in_right(opts \\ [])

Animate with a slide in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_in_right(speed: :normal, repeat: true)}>
  Animate as <strong>slide in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in right

Fast speed

<p class={animate_slide_in_right(speed: :fast, repeat: true)}>
  Animate as <strong>slide in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in right

Faster speed (default)

<p class={animate_slide_in_right(speed: :faster, repeat: true)}>
  Animate as <strong>slide in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in right

animate_slide_in_up(opts \\ [])

Animate with a slide in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_in_up(speed: :normal, repeat: true)}>
  Animate as <strong>slide in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in up

Fast speed

<p class={animate_slide_in_up(speed: :fast, repeat: true)}>
  Animate as <strong>slide in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in up

Faster speed (default)

<p class={animate_slide_in_up(speed: :faster, repeat: true)}>
  Animate as <strong>slide in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide in up

animate_slide_out_down(opts \\ [])

Animate with a slide out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_out_down(speed: :normal, repeat: true)}>
  Animate as <strong>slide out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out down

Fast speed

<p class={animate_slide_out_down(speed: :fast, repeat: true)}>
  Animate as <strong>slide out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out down

Faster speed (default)

<p class={animate_slide_out_down(speed: :faster, repeat: true)}>
  Animate as <strong>slide out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out down

animate_slide_out_left(opts \\ [])

Animate with a slide out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_out_left(speed: :normal, repeat: true)}>
  Animate as <strong>slide out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out left

Fast speed

<p class={animate_slide_out_left(speed: :fast, repeat: true)}>
  Animate as <strong>slide out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out left

Faster speed (default)

<p class={animate_slide_out_left(speed: :faster, repeat: true)}>
  Animate as <strong>slide out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out left

animate_slide_out_right(opts \\ [])

Animate with a slide out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_out_right(speed: :normal, repeat: true)}>
  Animate as <strong>slide out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out right

Fast speed

<p class={animate_slide_out_right(speed: :fast, repeat: true)}>
  Animate as <strong>slide out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out right

Faster speed (default)

<p class={animate_slide_out_right(speed: :faster, repeat: true)}>
  Animate as <strong>slide out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out right

animate_slide_out_up(opts \\ [])

Animate with a slide out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_slide_out_up(speed: :normal, repeat: true)}>
  Animate as <strong>slide out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out up

Fast speed

<p class={animate_slide_out_up(speed: :fast, repeat: true)}>
  Animate as <strong>slide out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out up

Faster speed (default)

<p class={animate_slide_out_up(speed: :faster, repeat: true)}>
  Animate as <strong>slide out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as slide out up

animate_swing(opts \\ [])

Animate with a swing pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_swing(speed: :normal, repeat: true)}>
  Animate as <strong>swing</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as swing

Fast speed

<p class={animate_swing(speed: :fast, repeat: true)}>
  Animate as <strong>swing</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as swing

Faster speed (default)

<p class={animate_swing(speed: :faster, repeat: true)}>
  Animate as <strong>swing</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as swing

animate_tada(opts \\ [])

Animate with a tada pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_tada(speed: :normal, repeat: true)}>
  Animate as <strong>tada</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as tada

Fast speed

<p class={animate_tada(speed: :fast, repeat: true)}>
  Animate as <strong>tada</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as tada

Faster speed (default)

<p class={animate_tada(speed: :faster, repeat: true)}>
  Animate as <strong>tada</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as tada

animate_wobble(opts \\ [])

Animate with a wobble pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_wobble(speed: :normal, repeat: true)}>
  Animate as <strong>wobble</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as wobble

Fast speed

<p class={animate_wobble(speed: :fast, repeat: true)}>
  Animate as <strong>wobble</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as wobble

Faster speed (default)

<p class={animate_wobble(speed: :faster, repeat: true)}>
  Animate as <strong>wobble</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as wobble

animate_zoom_in(opts \\ [])

Animate with a zoom in pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_in(speed: :normal, repeat: true)}>
  Animate as <strong>zoom in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in

Fast speed

<p class={animate_zoom_in(speed: :fast, repeat: true)}>
  Animate as <strong>zoom in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in

Faster speed (default)

<p class={animate_zoom_in(speed: :faster, repeat: true)}>
  Animate as <strong>zoom in</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in

animate_zoom_in_down(opts \\ [])

Animate with a zoom in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_in_down(speed: :normal, repeat: true)}>
  Animate as <strong>zoom in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in down

Fast speed

<p class={animate_zoom_in_down(speed: :fast, repeat: true)}>
  Animate as <strong>zoom in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in down

Faster speed (default)

<p class={animate_zoom_in_down(speed: :faster, repeat: true)}>
  Animate as <strong>zoom in down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in down

animate_zoom_in_left(opts \\ [])

Animate with a zoom in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_in_left(speed: :normal, repeat: true)}>
  Animate as <strong>zoom in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in left

Fast speed

<p class={animate_zoom_in_left(speed: :fast, repeat: true)}>
  Animate as <strong>zoom in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in left

Faster speed (default)

<p class={animate_zoom_in_left(speed: :faster, repeat: true)}>
  Animate as <strong>zoom in left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in left

animate_zoom_in_right(opts \\ [])

Animate with a zoom in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_in_right(speed: :normal, repeat: true)}>
  Animate as <strong>zoom in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in right

Fast speed

<p class={animate_zoom_in_right(speed: :fast, repeat: true)}>
  Animate as <strong>zoom in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in right

Faster speed (default)

<p class={animate_zoom_in_right(speed: :faster, repeat: true)}>
  Animate as <strong>zoom in right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in right

animate_zoom_in_up(opts \\ [])

Animate with a zoom in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_in_up(speed: :normal, repeat: true)}>
  Animate as <strong>zoom in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in up

Fast speed

<p class={animate_zoom_in_up(speed: :fast, repeat: true)}>
  Animate as <strong>zoom in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in up

Faster speed (default)

<p class={animate_zoom_in_up(speed: :faster, repeat: true)}>
  Animate as <strong>zoom in up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom in up

animate_zoom_out(opts \\ [])

Animate with a zoom out pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_out(speed: :normal, repeat: true)}>
  Animate as <strong>zoom out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out

Fast speed

<p class={animate_zoom_out(speed: :fast, repeat: true)}>
  Animate as <strong>zoom out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out

Faster speed (default)

<p class={animate_zoom_out(speed: :faster, repeat: true)}>
  Animate as <strong>zoom out</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out

animate_zoom_out_down(opts \\ [])

Animate with a zoom out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_out_down(speed: :normal, repeat: true)}>
  Animate as <strong>zoom out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out down

Fast speed

<p class={animate_zoom_out_down(speed: :fast, repeat: true)}>
  Animate as <strong>zoom out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out down

Faster speed (default)

<p class={animate_zoom_out_down(speed: :faster, repeat: true)}>
  Animate as <strong>zoom out down</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out down

animate_zoom_out_left(opts \\ [])

Animate with a zoom out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_out_left(speed: :normal, repeat: true)}>
  Animate as <strong>zoom out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out left

Fast speed

<p class={animate_zoom_out_left(speed: :fast, repeat: true)}>
  Animate as <strong>zoom out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out left

Faster speed (default)

<p class={animate_zoom_out_left(speed: :faster, repeat: true)}>
  Animate as <strong>zoom out left</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out left

animate_zoom_out_right(opts \\ [])

Animate with a zoom out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_out_right(speed: :normal, repeat: true)}>
  Animate as <strong>zoom out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out right

Fast speed

<p class={animate_zoom_out_right(speed: :fast, repeat: true)}>
  Animate as <strong>zoom out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out right

Faster speed (default)

<p class={animate_zoom_out_right(speed: :faster, repeat: true)}>
  Animate as <strong>zoom out right</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out right

animate_zoom_out_up(opts \\ [])

Animate with a zoom out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.

Options:

  • :speed (default: true) - supports the following values: :normal, :fast, :faster.
  • :repeat (default: false) - whether the animation repeats itself.

You can see the resulting animation in the examples below.

Normal speed

<p class={animate_zoom_out_up(speed: :normal, repeat: true)}>
  Animate as <strong>zoom out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out up

Fast speed

<p class={animate_zoom_out_up(speed: :fast, repeat: true)}>
  Animate as <strong>zoom out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out up

Faster speed (default)

<p class={animate_zoom_out_up(speed: :faster, repeat: true)}>
  Animate as <strong>zoom out up</strong>
</p>

The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.

Animation:

Animate as zoom out up

as_html(resource)

Render a resource as HTML.

as_link(resource)

Get the url for a resource.

as_select_option(resource)

Create a select option from a resoure that implements the Bootstrap5Components.Resource protocol.

as_select_options(resources)

Create list of select options from a list of resoures that´ implement the Bootstrap5Components.Resource protocol.

as_text(resource)

Render a resource as plain text.

auto_hide_flash(js \\ %JS{}, opts)

back(assigns)

Renders a back navigation link.

Examples

<.back navigate={~p"/posts"}>Back to posts</.back>

Attributes

  • navigate (:any) (required)

Slots

  • inner_block (required)

bulk_action(assigns)

A component for bulk actions that can take the ids of multiple targets.

Attributes

  • id (:string) (required)
  • active (:boolean) (required)
  • on_submit (:string) - Defaults to "bulk_action".
  • on_change (:string) - Defaults to "selected_for_bulk_action".
  • Global attributes are accepted.

Slots

  • action - Accepts attributes:
    • navigate (:string)
    • name (:string)
    • class (:string)
    • confirmation_dialog (:string)

bulk_action_select(assigns)

A checkbox to select an id for a bulk action.

Attributes

  • target (:any) (required)
  • aria_label (:string) - Defaults to "...".

button(assigns)

Renders a button.

Examples

<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>

Attributes

  • type (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)

css_assets(assigns)

A component containing the references to all CSS and JS used by these components.

Attributes

  • theme (:string) - the bootswatch theme to use; use nil if you want a custom theme. Defaults to nil.
  • remote_select_widget (:boolean) - whether to download the JS and CSS for the remote select widget. Defaults to true.
  • remote_select_widget_right_to_left (:boolean) - whether to add support for right to left text in the select widget. Defaults to false.

delete_input(assigns)

A component that deletes an item from moveable inputs. This component is meant to be used inside <.movable_inputs_for /> component.

Attributes

  • input (Phoenix.HTML.FormField) - the input to be deleted.
  • drop_param (Phoenix.HTML.FormField) - drop param for the association.
  • animation (:string) - classes to add to the deleted element before removing it. Defaults to "animate__animated animate__fadeOutRight animate__faster".
  • animation_duration (:integer) - classes to add to the deleted element before removing it. Defaults to 300.
  • tooltip (:string) - tooltip for the action. Defaults to nil.
  • class (:string) - CSS class for the outer element (a <label/> element). Defaults to "btn btn-sm btn-outline-danger".
  • cursor (:string) - CSS cursor style while hovering the button. Defaults to "pointer".

error(assigns)

Generates a generic error message.

Slots

  • inner_block (required)

flash(assigns)

Renders flash notices.

Examples

<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>

Attributes

  • id (:string) - the optional id of flash container. Defaults to "flash".
  • flash (:map) - the map of flash messages to display. Defaults to %{}.
  • title (:string) - Defaults to nil.
  • kind (:atom) - used for styling and flash lookup.Must be one of :info, or :error.
  • autoshow (:boolean) - whether to auto show the flash on mount. Defaults to true.
  • close (:boolean) - whether the flash can be closed. Defaults to true.
  • Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

  • inner_block - the optional inner block that renders the flash message.

flash_group(assigns)

Shows the flash group with standard titles and content.

Examples

<.flash_group flash={@flash} />

Attributes

  • flash (:map) (required) - the map of flash messages.

flop_pagination_options()

Default options for Flop pagination that play well with Bootstrap5.

Note: this is an argument one should pass to a Flop paginiation component, not a standalone component.

flop_table_options()

Default options for Flop tables that play well with Bootstrap5.

Note: this is an argument one should pass to a Flop table component, not a standalone component.

header(assigns)

Renders a header with title.

Attributes

  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)
  • text
  • subtitle
  • actions

hide(js \\ %JS{}, selector)

hide_modal(js \\ %JS{}, id)

icon(assigns)

Renders a Bootstrap Icon.

Examples

TODO

Attributes

  • name (:string) (required)
  • title (:string) - Defaults to nil.
  • size (:any) - Defaults to "1em".

input(assigns)

Renders an input with label and error messages.

A %Phoenix.HTML.Form{} and field name may be passed to the input to build input names and error messages, or all the attributes and errors may be passed explicitly.

Examples

<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />

Attributes

  • id (:any) - Defaults to nil.
  • name (:any)
  • label (:string) - Defaults to nil.
  • value (:any)
  • type (:string) - Defaults to "text".
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
  • errors (:list) - Defaults to [].
  • checked (:boolean) - the checked flag for checkbox inputs.
  • prompt (:string) - the prompt for select inputs. Defaults to nil.
  • options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
  • multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
  • tight_spacing (:boolean) - remove the extra top margin. Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "cols", "disabled", "form", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Slots

  • inner_block

label(assigns)

Renders a label.

Attributes

  • for (:string) - Defaults to nil.

Slots

  • inner_block (required)

list(assigns)

Renders a data list.

Examples

<.list>
  <:item title="Title"><%= @post.title %></:item>
  <:item title="Views"><%= @post.views %></:item>
</.list>

Slots

  • item (required) - Accepts attributes:
    • title (:string) (required)

main(assigns)

Area for the main content below the nabvar, supporting slots for the content itself and for an optional sidebar.

Attributes

  • hide_sidebar (:boolean) - Defaults to false.
  • sidebar_class (:string) - Defaults to "col-sm-3".
  • sidebar_body_class (:string) - Defaults to "".
  • content_class (:string) - Defaults to "col-sm-9".

Slots

  • sidebar
  • content (required)

modal(assigns)

Renders a modal.

Attributes

  • id (:string) (required)
  • show (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • on_confirm (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • on_click_away (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • close_button (:boolean) - Defaults to true.

Slots

  • inner_block (required)
  • title
  • subtitle
  • confirm
  • cancel

Examples

<.modal id="confirm-modal">
  Are you sure?
  <:confirm>OK</:confirm>
  <:cancel>Cancel</:cancel>
</.modal>

JS commands may be passed to the :on_cancel and on_confirm attributes for the caller to react to each button press, for example:

<.modal id="confirm" on_confirm={JS.push("delete")} on_cancel={JS.navigate(~p"/posts")}>
  Are you sure you?
  <:confirm>OK</:confirm>
  <:cancel>Cancel</:cancel>
</.modal>

movable_inputs_for(assigns)

Attributes

  • field (Phoenix.HTML.FormField) (required)

  • sort_param (Phoenix.HTML.FormField) (required) - the parameter used by Ecto to sort your inputs.

  • move_param (Phoenix.HTML.FormField) (required) - the parameter that represents the item to be moved.

  • moved_param (Phoenix.HTML.FormField) (required) - the parameter that represents the item that has been moved.

  • drop_param (Phoenix.HTML.FormField) - this attribute is optional if you don't want to support input deletion, but it is required if you want to use the <delete_input input={}/> component.

    Defaults to nil.

  • moved_animation (:any) - Defaults to "animate__animated animate__pulse animate__faster".

move_input(assigns)

A component to move an element up in an association. To move up an element in an association is the same as movinbg it towards the beginning of the list.

Attributes

  • input (Phoenix.HTML.FormField) - the input to be moved.
  • animation (:string) - Defaults to "animate__animated animate__fadeOut animate__faster".
  • tooltip (:string) - tooltip for the action. Defaults to nil.
  • group_class (:string) - CSS class for the outer element (a <div/> element). Defaults to "btn btn-group".
  • move_up_class (:string) - CSS class for the move-up element (a <label/> element). Defaults to "btn btn-sm btn-outline-dark".
  • move_down_class (:string) - CSS class for the move-down element (a <label/> element). Defaults to "btn btn-sm btn-outline-dark".
  • cursor (:string) - CSS cursor style while hovering the button. Defaults to "pointer".
  • cursor_when_disabled (:string) - CSS cursor style while hovering the disabled button. Defaults to "default".

Slots

  • move_up
  • move_down

non_movable_inputs_for(assigns)

Attributes

  • field (Phoenix.HTML.FormField) (required)

  • sort_param (Phoenix.HTML.FormField) (required) - the parameter used by Ecto to sort your inputs.

  • drop_param (Phoenix.HTML.FormField) - this attribute is optional if you don't want to support input deletion, but it is required if you want to use the <delete_input input={}/> component.

    Defaults to nil.

  • moved_animation (:any) - Defaults to "animate__animated animate__pulse animate__faster".

path_for(resource)

Get the url for a resource.

remote_select_input(assigns)

Renders an input with label and error messages.

A %Phoenix.HTML.Form{} and field name may be passed to the input to build input names and error messages, or all the attributes and errors may be passed explicitly.

Examples

<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />

Attributes

  • id (:any) - Defaults to nil.
  • name (:any)
  • label (:string) - Defaults to nil.
  • value (:any)
  • path (:string)
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
  • errors (:list) - Defaults to [].
  • checked (:boolean) - the checked flag for checkbox inputs.
  • prompt (:string) - the prompt for select inputs. Defaults to nil.
  • options (:list) - the already chosen elements. Defaults to [].
  • multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "cols", "disabled", "form", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

show(js \\ %JS{}, selector)

show_modal(js \\ %JS{}, id)

simple_form(assigns)

Renders a simple form.

Examples

<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:email]} label="Email"/>
  <.input field={@form[:username]} label="Username" />
  <:actions>
    <.button>Save</.button>
  </:actions>
</.simple_form>

Attributes

  • for (:any) (required) - the datastructure for the form.
  • as (:any) - the server side parameter to collect all input under. Defaults to nil.
  • Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus: ["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target"].

Slots

  • inner_block (required)
  • actions - the slot for form actions, such as a submit button.

table(assigns)

Renders a table with generic styling.

Examples

<.table id="users" rows={@users}>
  <:col :let={user} label="id"><%= user.id %></:col>
  <:col :let={user} label="username"><%= user.username %></:col>
</.table>

Attributes

  • id (:string) (required)
  • rows (:list) (required)
  • row_id (:any) - the function for generating the row id. Defaults to nil.
  • class (:string) - class(es) for your table; by default the table class is used. Defaults to "table".
  • row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
  • row_item (:any) - the function for mapping each row before calling the :col and :action slots. Defaults to &Function.identity/1.
  • reorderable (:boolean) - wether the table rows can be reordered by the user. Defaults to false.
  • reorderable_event_name (:string) - name of the event sent to the LiveView when the items are reordered. Defaults to "reordered".
  • reorderable_animation_duration (:integer) - animation duration. Defaults to 150.

Slots

  • col (required) - Accepts attributes:
    • label (:string)
  • action - the slot for showing user actions in the last table column.

translate_error(arg)

Translates an error message using gettext.

translate_errors(errors, field)

Translates the errors for a field from a keyword list of errors.