Introduction

Scene.js

Will CSS animations only be used for "loading", "button coloring", and "moving"? Don't you want to create a dynamic scene(homepage) with CSS? Then use our library(Scene.js).

Scene.js is a CSS animation-specific library and you can make your homepage a nice animation.

CSS

@keyframes keyframe {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.target {
    animation-name: keyframe;
    animation-duration: 4s;
}

Scene.js

new Scene.SceneItem({
    0: {opacity: 0},
    4: {opacity: 1},
}, {selector: ".target"}).play();

The difference between CSS Animation and Scene is that CSS manages the keyframe in "%" and the scene in seconds(s). Here is an example of applying multiple animations.

CSS

@keyframes keyframe {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes keyframe2 {
    0% {left: 10px;}
    100% {left: 50px;}
}
@-webkit-keyframes keyframe {/* ... */}
@-webkit-keyframes keyframe2 {/* ... */}
.target {
    animation-name: keyframe;
    animation-duration: 4s;
    -webkit-animation-name: keyframe;
    -webkit-animation-duration: 4s;
}
.target2 {
    animation-name: keyframe2;
    animation-duration: 4s;
    -webkit-animation-name: keyframe2;
    -webkit-animation-duration: 4s;
}

Scene.js

new Scene({
    ".target": {
        0: {opacity: 0},
        4: {opacity: 1},
    },
    ".target2": {
        0: {left: "0px"},
        4: {left: "50px"},
    },
}, {selector: true}).play();

The larger the scale, the more difficult it will be to manage CSS. The cost of cross-browsing will also have a tremendous impact. However, Scene.js is easy to manage CSS animations and don't require cross-browsing code, and can simultaneous animation control.

2 ways to play

Play Javascript

• The advantage of JS Animation is that you can fine tune the time.

item.setTime(5);
item.play();

Play CSS

• The advantage of CSS Animation is that it works independently of the UI Thread. You can see smoother animation than javascript.

item.playCSS();

Pause / Stop

// pause
item.pause(); 

// stop
item.stop();

// replay
item.play(); //playCSS();

How to set properties

The property can be set in three types. You can enter values in a convenient way through normal, object or text type.

• normal type

const item = new Scene.SceneItem();

item.set(0, "opacity", 1);
item.set(0, "left", "40px");

item.set(0, "transform", "translate", "10px, 10px");
item.set(0, "transform", "translate(10px, 10px)");

• object type

const item = new Scene.SceneItem();
item.set(0, {
    opacity: 1,
    left: "40px",
    transform: {translate: "10px, 10px"},
});
item.set({
    0: {
        opacity: 1,
        left: "40px",
        transform: {translate: "10px, 10px"},
    },
});

• text type

const item = new Scene.SceneItem();
item.set(0, "opacity: 1; left: 40px; transform: translate(10px, 10px)");
item.set({
    0: "opacity: 1; left: 40px; transform: translate(10px, 10px)",
});
item.set({
    0: {
        opacity: 1,
        left: "40px",
        transform: "translate(10px, 10px)",
    },
});