Getting started with creating CSS3 animations with Move. js _ JavaScript

This article mainly introduces the use of Move. js works with the Getting Started Guide for creating CSS3 animations. This article describes how to use some basic methods in this JavaScript library. If you need them, you can refer to them on the website, CSS3 transition and animation are the first choice for creating lightweight animations. Unfortunately, many developers find their own syntax and complicated and chaotic. If it sounds like you, it may be a perfect solution for you to Move. js. Move. js is a simple JavaScript library that uses simple functions to create CSS3 animations. This tutorial will discuss the basic knowledge of Move. js and provide an online demo.

Basic knowledge

Move. js provides the simplest JavaScript API for creating CSS 3 animations. Let's assume there is a number of p elements with a class box. When you move the mouse over p, we want to move the element 100 pixels from the left. In this case, the Code is as follows:

.box { -webkit-transition: margin 1s; -moz-transition: margin 1s; -o-transition: margin 1s; transition: margin 1s;}.box:hover { margin-left: 100px;}

Using Move. js, we can simply call the set () method to achieve the same result, as shown below:

move('.box') .set('margin-left', 100) .end();

Getting started

First, visit the Move. js GitHub page and download the latest package. Extract and copy the Move. js file to your working directory. Next, introduce the file to your html page. The page should be as follows:

  Move. js Demo 
    Play