theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

Ajout: Apparition au scroll sur functions-list

Browse Source
This commit is contained in:
Divlo
2019-12-29 01:18:10 +01:00
parent b3225f3adc
commit 10553b62e7
6 changed files with 114 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
css/animationsScroll.css Normal file
View File

@ -0,0 +1,88 @@
main {
transition: opacity 400ms ease-out;
}
.animate-down {
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0, -100px);
-moz-transform: translate(0, -100px);
transform: translate(0, -100px);
}
.animate-down.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 400ms ease-out 100ms;
-moz-transition: all 400ms ease-out 100ms;
transition: all 400ms ease-out 100ms;
transition: 5s;
}
.animate-up {
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0, 100px);
-moz-transform: translate(0, 100px);
transform: translate(0, 100px);
}
.animate-up.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
}
.animate-right {
opacity: 0;
visibility: hidden;
transform: translate(-100px, 0);
}
.animate-right.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
}
.animate-left {
opacity: 0;
visibility: hidden;
transform: translate(100px, 0);
}
.animate-left.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
}