Skip to content

Commit 53d4e75

Browse files
CGWebDev2003CGWebDev2003
committed
Added fade-in, fade-out, and rotate to the left and the right
1 parent 0343e22 commit 53d4e75

File tree

6 files changed

+198
-14
lines changed

6 files changed

+198
-14
lines changed

‎neptune-animations.css‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,33 @@
1-
.neptune-spin {
2-
animation: spin 1s 0s infinite;
3-
ani
1+
2+
3+
/* Fading Animations */
4+
@import url('./src/css/fade/neptune_fade_in.css');
5+
@import url('./src/css/fade/neptune_fade_out.css');
6+
7+
/* Rotate Animations */
8+
/* Rotate Right */
9+
.nep-rotate-right {
10+
animation: nep-rotate-right var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
411
}
512

6-
@keyframes spin {
13+
@keyframes nep-rotate-right {
714
100% { transform: rotate(360deg);}
815
}
916

17+
/* Rotate Left */
18+
.nep-rotate-left {
19+
animation: nep-rotate-left var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
20+
}
21+
22+
@keyframes nep-rotate-left {
23+
100% { transform: rotate(-360deg);}
24+
}
25+
1026

1127

12-
.test {
13-
margin: 15rem;
14-
width: 4rem;
15-
height: 4rem;
16-
background-color: aqua;
28+
:root {
29+
--nep-animation-duration: 1s;
30+
--nep-animation-delay: 0s;
31+
--nep-animation-direction: ;
32+
--nep-animation-fillmode: forwards;
1733
}

‎neptune-animations.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export default class NeptuneAnimate {
33
this.element = element;
44
this.animationClass = animationClass;
55
this.animationEndEvent = this.getAnimationEndEvent();
6+
this.stop = this.startAnimation();
67

78
this.element.addEventListener(this.animationEndEvent, this.handleAnimationEnd.bind(this));
89
}

‎src/css/fade/neptune_fade_in.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* Fade-in */
2+
.nep-fade-in {
3+
animation: nep-fade-in var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
4+
}
5+
6+
@keyframes nep-fade-in {
7+
0% {
8+
opacity: 0;
9+
}
10+
11+
100% {
12+
opacity: 1;
13+
}
14+
}
15+
16+
/* Fade-in-down */
17+
.nep-fade-in-down {
18+
animation: nep-fade-in-down var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
19+
}
20+
21+
@keyframes nep-fade-in-down {
22+
0% {
23+
opacity: 0;
24+
transform: translateY(-5rem);
25+
}
26+
27+
100% {
28+
opacity: 1;
29+
transform: translateY(0);
30+
}
31+
}
32+
33+
/* Fade-in-right */
34+
.nep-fade-in-right {
35+
animation: nep-fade-in-right var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
36+
}
37+
38+
@keyframes nep-fade-in-right {
39+
0% {
40+
opacity: 0;
41+
transform: translateX(-5rem);
42+
}
43+
44+
100% {
45+
opacity: 1;
46+
transform: translateX(0);
47+
}
48+
}
49+
50+
/* Fade-in-up */
51+
.nep-fade-in-up {
52+
animation: nep-fade-in-up var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
53+
}
54+
55+
@keyframes nep-fade-in-up {
56+
0% {
57+
opacity: 0;
58+
transform: translateY(5rem);
59+
}
60+
61+
100% {
62+
opacity: 1;
63+
transform: translateY(0);
64+
}
65+
}
66+
67+
/* Fade-in-left */
68+
.nep-fade-in-left {
69+
animation: nep-fade-in-left var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
70+
}
71+
72+
@keyframes nep-fade-in-left {
73+
0% {
74+
opacity: 0;
75+
transform: translateX(5rem);
76+
}
77+
78+
100% {
79+
opacity: 1;
80+
transform: translateX(0);
81+
}
82+
}

‎src/css/fade/neptune_fade_out.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* Fade-out */
2+
.nep-fade-out {
3+
animation: nep-fade-out var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
4+
}
5+
6+
@keyframes nep-fade-out {
7+
0% {
8+
opacity: 1;
9+
}
10+
11+
100% {
12+
opacity: 0;
13+
}
14+
}
15+
16+
/* Fade-out-up */
17+
.nep-fade-out-up {
18+
animation: nep-fade-out-up var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
19+
}
20+
21+
@keyframes nep-fade-out-up {
22+
0% {
23+
opacity: 1;
24+
transform: translateY(0);
25+
}
26+
27+
100% {
28+
opacity: 0;
29+
transform: translateY(-5rem);
30+
}
31+
}
32+
33+
/* Fade-out-left */
34+
.nep-fade-out-left {
35+
animation: nep-fade-out-left var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
36+
}
37+
38+
@keyframes nep-fade-out-left {
39+
0% {
40+
opacity: 1;
41+
transform: translateX(0);
42+
}
43+
44+
100% {
45+
opacity: 0;
46+
transform: translateX(-5rem);
47+
}
48+
}
49+
50+
/* Fade-out-down */
51+
.nep-fade-out-down {
52+
animation: nep-fade-out-down var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
53+
}
54+
55+
@keyframes nep-fade-out-down {
56+
0% {
57+
opacity: 1;
58+
transform: translateY(0);
59+
}
60+
61+
100% {
62+
opacity: 0;
63+
transform: translateY(5rem);
64+
}
65+
}
66+
67+
/* Fade-out-right */
68+
.nep-fade-out-right {
69+
animation: nep-fade-out-right var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
70+
}
71+
72+
@keyframes nep-fade-out-right {
73+
0% {
74+
opacity: 1;
75+
transform: translateX(0);
76+
}
77+
78+
100% {
79+
opacity: 0;
80+
transform: translateX(5rem);
81+
}
82+
}

‎test/index.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66

77
<link rel="stylesheet" href="../neptune-animations.css">
8+
<link rel="stylesheet" href="test.css">
89

910
<title>Document</title>
1011
</head>
@@ -15,13 +16,9 @@
1516
import NeptuneAnimate from "../neptune-animations.js"
1617

1718
const myElement = document.getElementById("test");
18-
const neptuneAnimate = new NeptuneAnimate(myElement, "neptune-spin");
19+
const neptuneAnimate = new NeptuneAnimate(myElement, "nep-fade-out-right");
1920

2021
neptuneAnimate.startAnimation();
21-
22-
setTimeout(function () {
23-
neptuneAnimate.stopAnimation();
24-
}, 5000);
2522
</script>
2623
</body>
2724
</html>

‎test/test.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.test {
2+
margin: 15rem;
3+
width: 4rem;
4+
height: 4rem;
5+
background-color: aqua;
6+
}

0 commit comments

Comments
 (0)