Home > Developer > JavaScript
Getting started with CSS 3 animation creation using Move. js, move. jscss3
On the website, CSS 3 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 div element with a class box. When you move the mouse over the div, 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:
<!DOCTYPE html>We have defined a div element number of the class as box and a link with ID as playButton for our demo. Let's create a styles.css file and add the following style. Note that the following style is not required for Move. js:
.box { margin: 10px; width: 100px; height: 100px; background: #7C9DD4; box-shadow: 5px 5px 0px #D1D1D1;}#playButton { display: block; font-size: 20px; margin: 20px 10px; font-weight: bold; color: #222; text-decoration: none;}Our html page looks like:
Now, let's write down the first Move. js snippet. We need to append an onclick event handler to palyButton and move it to the right when you click it. The JavaScript code of the event handler is as follows. This Code adds transform: translateX (300px) to the number of box elements:
document.getElementById('playButton').onclick = function(e) { move('.box') .x(300) .end();};The complete code after the Move. js code is added is as follows:
HTML
<!DOCTYPE html>CSS
.box { margin-left: 10px; width: 100px; height: 100px; background: #7C9DD4; box-shadow: 5px 5px 0px #D1D1D1;}#playButton { display: block; font-size: 20px; margin: 20px 10px; font-weight: bold; color: #222; text-decoration: none;}Move. js method
In the previous demo, we saw the x () method. Now, let's take a look at other methods of Move. js.
Set (prop, val)The set () method is used to set the css attributes of an element. It has two parameters: css attributes and attribute values. Example usage:
.set('background-color', '#CCC').set('margin-left', 500).set('color', '#222')
Add (prop, val)
The add () method is used to add the set property values. This method must be a numeric value to increase. This method must have two parameters: attribute value and its increment:
.add('margin-left', 200)After the preceding code snippet is called, 200px is added based on its value.
Sub (prop, val)Sub () is the inverse process of add (). It accepts two identical parameters, but its value is subtracted from the attribute value.
.sub('margin-left', 200)Rotate (deg)
As the name implies, This method uses the provided value as a parameter to rotate the element. When a method is called, it is appended to the transform attribute of the element. The following code rotates the element 90deg:
.rotate(90)This Code adds the following css to the element:
transform:rotate(90deg)Duration (n)
This method allows you to set the animation playback time. For example, the following code moves an element 200px from the left to the right in 2 seconds:
.set('margin-left', 200).duration('2s')Another example is the following code. In 2 seconds, Move. js modifies the margin attribute of the element, sets the background color, and rotates the element 90 degrees.
.set('margin-left', 200).set('background-color', '#CCC').rotate(90).duration('2s')Translate (x [, y])
The translate () method is used to modify the default position of an element. The provided coordinates are used as parameters. If only one parameter is set, it is used as the x coordinate. If the second parameter is provided, as y coordinate:
.translate(200, 400)X () and y ()
The x () method is used to adjust the x coordinate of an element. The y () method is used to adjust the y coordinate of an element. The parameters of the two methods can be positive or negative, as shown below:
.x(300).y(-20)Skew (x, y)
Skew () is used to adjust an angle relative to the x and Y axes. This method can be divided into two methods: skewX (deg) and skewY (deg:
.skew(30, 40)Scale (x, y)
This method is used to enlarge or compress the size of elements. The scale method of transform is called according to each provided value:
.scale(3, 3)Fn)
If you have used CSS3 transition, you will understand that the transition function works on the transition attribute. It specifies the transition behavior. Each struct function includes in, out, in-out, snap, and cubic-bezeir. These functions can be called through the lift () method provided by Move. js. For example:
.ease('in').x(400).ease('cubic-bezier(0,1,1,0)').x(400)End ()
This method is used to Move the end of The. js code snippet, which marks the end of the animation. Technically, this method triggers the playback of an animation. This method accepts an optional callback function. The Code is as follows:
move('.box') .set('background-color', 'red') .duration(1000) .end(function() { alert("Animation Over!"); });Delay (n)
As the method implies, This method provides a time value as the animation latency. As follows:
move('.box') .set('background-color', 'red') .delay(1000) .end();Then ()
This method is the most important function in Move. js. It is used to split the animation into two sets and execute them in order. The following animation is divided into two steps and separated by the then () method:
move('.box') .set('background-color', 'red') .x(500) .then() .y(400) .set('background-color', 'green') .end();# Use Move. js to create a complex animation ##
In this tutorial, we have written a lot of basic animations to understand each method. Next, we can easily create complex animations using Move. js. This demo describes most of the content of Move. js.
The following code creates an animation:
move('.square') .to(500, 200) .rotate(180) .scale(.5) .set('background-color', '#FF0551') .set('border-color', 'black') .duration('3s') .skew(50, -10) .then() .set('opacity', 0) .duration('0.3s') .scale(0.1) .pop() .end();Conclusion
I hope this tutorial will give you a clear understanding of what Move. js is and how to create a CSS3 animation. Using Movejs can help you correctly organize all the animation code in one place. At any time you want to repair an animation, you will know where it is.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
