-
-
Notifications
You must be signed in to change notification settings - Fork 160
Introduction
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.
@keyframes keyframe {
0% {opacity: 0;}
100% {opacity: 1;}
}
.target {
animation-name: keyframe;
animation-duration: 4s;
}
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.
@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;
}
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.
- The advantage of JS Animation is that you can fine tune the time.
item.setTime(5);
item.play();
- The advantage of CSS Animation is that it works independently of the UI Thread. You can see smoother animation than javascript.
item.playCSS();
// pause
item.pause();
// stop
item.stop();
// replay
item.play(); //playCSS();
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)",
},
});