Skip to content

Use translate3d instead of translateY or translateX #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daneden merged 1 commit into from
Mar 23, 2015
Merged

Use translate3d instead of translateY or translateX #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 64 additions & 64 deletions animate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2934,27 +2934,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Expand All @@ -2965,27 +2965,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Expand All @@ -2996,27 +2996,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideInRight {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes slideInRight {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Expand All @@ -3027,27 +3027,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Expand All @@ -3058,27 +3058,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}

@keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}

Expand All @@ -3089,27 +3089,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}

@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}

Expand All @@ -3120,27 +3120,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}

@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}

Expand All @@ -3151,27 +3151,27 @@ Copyright (c) 2015 Daniel Eden

@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}

@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}

Expand Down
7 changes: 1 addition & 6 deletions animate.min.css
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions source/sliding_entrances/slideInDown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideInDown {
0% {
transform: translateY(-100%);
transform: translate3d(0, -100%, 0);
visibility: visible;
}

100% {
transform: translateY(0);
transform: translate3d(0, 0, 0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions source/sliding_entrances/slideInLeft.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideInLeft {
0% {
transform: translateX(-100%);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}

100% {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions source/sliding_entrances/slideInRight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideInRight {
0% {
transform: translateX(100%);
transform: translate3d(100%, 0, 0);
visibility: visible;
}

100% {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions source/sliding_entrances/slideInUp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideInUp {
0% {
transform: translateY(100%);
transform: translate3d(0, 100%, 0);
visibility: visible;
}

100% {
transform: translateY(0);
transform: translate3d(0, 0, 0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions source/sliding_exits/slideOutDown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideOutDown {
0% {
transform: translateY(0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
transform: translateY(100%);
transform: translate3d(0, 100%, 0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions source/sliding_exits/slideOutLeft.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideOutLeft {
0% {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
transform: translateX(-100%);
transform: translate3d(-100%, 0, 0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions source/sliding_exits/slideOutRight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideOutRight {
0% {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
transform: translateX(100%);
transform: translate3d(100%, 0, 0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions source/sliding_exits/slideOutUp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@keyframes slideOutUp {
0% {
transform: translateY(0);
transform: translate3d(0, 0, 0);
}

100% {
visibility: hidden;
transform: translateY(-100%);
transform: translate3d(0, -100%, 0);
}
}

Expand Down