1.1.2 • Published 1 year ago
movement.css v1.1.2
Welcome to Movement.css!
At it's most basic level, you can use data-m attributes inside of your HTML to give an animation to your element. For example: <h1 data-m="scale">Hello World!</h1>. You can view a full list of all of the animations and see what they look like at movement.samalander.dev
Install Movement.css
Installing movement.css can be done in two different ways. Through NPM, or by linking the stylesheet in your <head> element. Feel free to use in your sites with or without credit.
Use via NPM
Install the package
npm i movement.css
Import the package in your code
import 'movement.css'
Use via CDN
Add the following code to your <head> element:
<link href="https://unpkg.com/movement.css/movement.css" rel="stylesheet">
Customizing the Animations
You can also add other values to your movement elements. Current options are:
data-m-durationdata-m-delayMovement accepts values in seconds in 0.1 increments and 0.25 increments up to 10 seconds. Examples:data-m-delay="9.3"will result in a delay of 9.3 secondsdata-m-delay="3.75"will result in a delay of 3.75 secondsdata-m-delay="1.2s"will not work, as it unnecessarily includes the "s"data-m-delay="11"will not work, as it exceeds 10 secondsdata-m-delay="1.15"will not work, as it only works in 0.1 and 0.25 increments If a value doesn't exist or doesn't work, movement will default to 1.5 seconds.