forked from michalsnik/aos
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5d0dfc9
commit 785b8cf
Showing
1 changed file
with
129 additions
and
127 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,178 +1,180 @@ | ||
| // Animations variables | ||
| $aos-distance: 100px !default; | ||
|
|
||
| html:not(.no-js) { | ||
| /** | ||
| * Fade animations: | ||
| * fade | ||
| * fade-up, fade-down, fade-left, fade-right | ||
| * fade-up-right, fade-up-left, fade-down-right, fade-down-left | ||
| */ | ||
|
|
||
| [data-aos^='fade'][data-aos^='fade'] { | ||
| opacity: 0; | ||
| transition-property: opacity, transform; | ||
|
|
||
| &.aos-animate { | ||
| opacity: 1; | ||
| transform: none; | ||
| @media screen { | ||
| html:not(.no-js) { | ||
| /** | ||
| * Fade animations: | ||
| * fade | ||
| * fade-up, fade-down, fade-left, fade-right | ||
| * fade-up-right, fade-up-left, fade-down-right, fade-down-left | ||
| */ | ||
|
|
||
| [data-aos^='fade'][data-aos^='fade'] { | ||
| opacity: 0; | ||
| transition-property: opacity, transform; | ||
|
|
||
| &.aos-animate { | ||
| opacity: 1; | ||
| transform: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| [data-aos='fade-up'] { | ||
| transform: translate3d(0, $aos-distance, 0); | ||
| } | ||
| [data-aos='fade-up'] { | ||
| transform: translate3d(0, $aos-distance, 0); | ||
| } | ||
|
|
||
| [data-aos='fade-down'] { | ||
| transform: translate3d(0, -$aos-distance, 0); | ||
| } | ||
| [data-aos='fade-down'] { | ||
| transform: translate3d(0, -$aos-distance, 0); | ||
| } | ||
|
|
||
| [data-aos='fade-right'] { | ||
| transform: translate3d(-$aos-distance, 0, 0); | ||
| } | ||
| [data-aos='fade-right'] { | ||
| transform: translate3d(-$aos-distance, 0, 0); | ||
| } | ||
|
|
||
| [data-aos='fade-left'] { | ||
| transform: translate3d($aos-distance, 0, 0); | ||
| } | ||
| [data-aos='fade-left'] { | ||
| transform: translate3d($aos-distance, 0, 0); | ||
| } | ||
|
|
||
| [data-aos='fade-up-right'] { | ||
| transform: translate3d(-$aos-distance, $aos-distance, 0); | ||
| } | ||
| [data-aos='fade-up-right'] { | ||
| transform: translate3d(-$aos-distance, $aos-distance, 0); | ||
| } | ||
|
|
||
| [data-aos='fade-up-left'] { | ||
| transform: translate3d($aos-distance, $aos-distance, 0); | ||
| } | ||
| [data-aos='fade-up-left'] { | ||
| transform: translate3d($aos-distance, $aos-distance, 0); | ||
| } | ||
|
|
||
| [data-aos='fade-down-right'] { | ||
| transform: translate3d(-$aos-distance, -$aos-distance, 0); | ||
| } | ||
| [data-aos='fade-down-right'] { | ||
| transform: translate3d(-$aos-distance, -$aos-distance, 0); | ||
| } | ||
|
|
||
| [data-aos='fade-down-left'] { | ||
| transform: translate3d($aos-distance, -$aos-distance, 0); | ||
| } | ||
| [data-aos='fade-down-left'] { | ||
| transform: translate3d($aos-distance, -$aos-distance, 0); | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| /** | ||
| * Zoom animations: | ||
| * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right | ||
| * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right | ||
| */ | ||
| /** | ||
| * Zoom animations: | ||
| * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right | ||
| * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right | ||
| */ | ||
|
|
||
| [data-aos^='zoom'][data-aos^='zoom'] { | ||
| opacity: 0; | ||
| transition-property: opacity, transform; | ||
| [data-aos^='zoom'][data-aos^='zoom'] { | ||
| opacity: 0; | ||
| transition-property: opacity, transform; | ||
|
|
||
| &.aos-animate { | ||
| opacity: 1; | ||
| transform: translate3d(0, 0, 0) scale(1); | ||
| &.aos-animate { | ||
| opacity: 1; | ||
| transform: translate3d(0, 0, 0) scale(1); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| [data-aos='zoom-in'] { | ||
| transform: scale(.6); | ||
| } | ||
| [data-aos='zoom-in'] { | ||
| transform: scale(.6); | ||
| } | ||
|
|
||
| [data-aos='zoom-in-up'] { | ||
| transform: translate3d(0, $aos-distance, 0) scale(.6); | ||
| } | ||
| [data-aos='zoom-in-up'] { | ||
| transform: translate3d(0, $aos-distance, 0) scale(.6); | ||
| } | ||
|
|
||
| [data-aos='zoom-in-down'] { | ||
| transform: translate3d(0, -$aos-distance, 0) scale(.6); | ||
| } | ||
| [data-aos='zoom-in-down'] { | ||
| transform: translate3d(0, -$aos-distance, 0) scale(.6); | ||
| } | ||
|
|
||
| [data-aos='zoom-in-right'] { | ||
| transform: translate3d(-$aos-distance, 0, 0) scale(.6); | ||
| } | ||
| [data-aos='zoom-in-right'] { | ||
| transform: translate3d(-$aos-distance, 0, 0) scale(.6); | ||
| } | ||
|
|
||
| [data-aos='zoom-in-left'] { | ||
| transform: translate3d($aos-distance, 0, 0) scale(.6); | ||
| } | ||
| [data-aos='zoom-in-left'] { | ||
| transform: translate3d($aos-distance, 0, 0) scale(.6); | ||
| } | ||
|
|
||
| [data-aos='zoom-out'] { | ||
| transform: scale(1.2); | ||
| } | ||
| [data-aos='zoom-out'] { | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| [data-aos='zoom-out-up'] { | ||
| transform: translate3d(0, $aos-distance, 0) scale(1.2); | ||
| } | ||
| [data-aos='zoom-out-up'] { | ||
| transform: translate3d(0, $aos-distance, 0) scale(1.2); | ||
| } | ||
|
|
||
| [data-aos='zoom-out-down'] { | ||
| transform: translate3d(0, -$aos-distance, 0) scale(1.2); | ||
| } | ||
| [data-aos='zoom-out-down'] { | ||
| transform: translate3d(0, -$aos-distance, 0) scale(1.2); | ||
| } | ||
|
|
||
| [data-aos='zoom-out-right'] { | ||
| transform: translate3d(-$aos-distance, 0, 0) scale(1.2); | ||
| } | ||
| [data-aos='zoom-out-right'] { | ||
| transform: translate3d(-$aos-distance, 0, 0) scale(1.2); | ||
| } | ||
|
|
||
| [data-aos='zoom-out-left'] { | ||
| transform: translate3d($aos-distance, 0, 0) scale(1.2); | ||
| } | ||
| [data-aos='zoom-out-left'] { | ||
| transform: translate3d($aos-distance, 0, 0) scale(1.2); | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| /** | ||
| * Slide animations | ||
| */ | ||
| /** | ||
| * Slide animations | ||
| */ | ||
|
|
||
| [data-aos^='slide'][data-aos^='slide'] { | ||
| transition-property: transform; | ||
| visibility: hidden; | ||
| [data-aos^='slide'][data-aos^='slide'] { | ||
| transition-property: transform; | ||
| visibility: hidden; | ||
|
|
||
| &.aos-animate { | ||
| visibility: visible; | ||
| transform: translate3d(0, 0, 0); | ||
| &.aos-animate { | ||
| visibility: visible; | ||
| transform: translate3d(0, 0, 0); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| [data-aos='slide-up'] { | ||
| transform: translate3d(0, 100%, 0); | ||
| } | ||
| [data-aos='slide-up'] { | ||
| transform: translate3d(0, 100%, 0); | ||
| } | ||
|
|
||
| [data-aos='slide-down'] { | ||
| transform: translate3d(0, -100%, 0); | ||
| } | ||
| [data-aos='slide-down'] { | ||
| transform: translate3d(0, -100%, 0); | ||
| } | ||
|
|
||
| [data-aos='slide-right'] { | ||
| transform: translate3d(-100%, 0, 0); | ||
| } | ||
| [data-aos='slide-right'] { | ||
| transform: translate3d(-100%, 0, 0); | ||
| } | ||
|
|
||
| [data-aos='slide-left'] { | ||
| transform: translate3d(100%, 0, 0); | ||
| } | ||
| [data-aos='slide-left'] { | ||
| transform: translate3d(100%, 0, 0); | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| /** | ||
| * Flip animations: | ||
| * flip-left, flip-right, flip-up, flip-down | ||
| */ | ||
| /** | ||
| * Flip animations: | ||
| * flip-left, flip-right, flip-up, flip-down | ||
| */ | ||
|
|
||
| [data-aos^='flip'][data-aos^='flip'] { | ||
| backface-visibility: hidden; | ||
| transition-property: transform; | ||
| } | ||
| [data-aos^='flip'][data-aos^='flip'] { | ||
| backface-visibility: hidden; | ||
| transition-property: transform; | ||
| } | ||
|
|
||
| [data-aos='flip-left'] { | ||
| transform: perspective(2500px) rotateY(-100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateY(0);} | ||
| } | ||
| [data-aos='flip-left'] { | ||
| transform: perspective(2500px) rotateY(-100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateY(0);} | ||
| } | ||
|
|
||
| [data-aos='flip-right'] { | ||
| transform: perspective(2500px) rotateY(100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateY(0);} | ||
| } | ||
| [data-aos='flip-right'] { | ||
| transform: perspective(2500px) rotateY(100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateY(0);} | ||
| } | ||
|
|
||
| [data-aos='flip-up'] { | ||
| transform: perspective(2500px) rotateX(-100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateX(0);} | ||
| } | ||
| [data-aos='flip-up'] { | ||
| transform: perspective(2500px) rotateX(-100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateX(0);} | ||
| } | ||
|
|
||
| [data-aos='flip-down'] { | ||
| transform: perspective(2500px) rotateX(100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateX(0);} | ||
| [data-aos='flip-down'] { | ||
| transform: perspective(2500px) rotateX(100deg); | ||
| &.aos-animate {transform: perspective(2500px) rotateX(0);} | ||
| } | ||
| } | ||
| } |