Skip to content

Instantly share code, notes, and snippets.

@kernelsoe

kernelsoe/index.css

Created August 8, 2024 07:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kernelsoe/947ed7c3fe7bfd41986f2cd780ae15a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kernelsoe/947ed7c3fe7bfd41986f2cd780ae15a1 to your computer and use it in GitHub Desktop.
Download ZIP
WriteVideo CSS transitions
Raw
index.css
/* For image panel transition effects */
/**
* ----------------------------------------
* animation fade-in-fwd
* ----------------------------------------
*/
.fade-in-fwd {
-webkit-animation: fade-in-fwd 2s ease-in-out both;
animation: fade-in-fwd 2s ease-in-out both;
}
@-webkit-keyframes fade-in-fwd {
0% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
@keyframes fade-in-fwd {
0% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-out-bck
* ----------------------------------------
*/
.fade-out-bck {
-webkit-animation: fade-out-bck 1s cubic-bezier(0.55, 0.085, 0.68, 0.53)
both;
animation: fade-out-bck 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@-webkit-keyframes fade-out-bck {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
}
@keyframes fade-out-bck {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
}
/**
* ----------------------------------------
* animation scale-in-center
* ----------------------------------------
*/
.scale-in-center {
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
both;
animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation scale-out-center
* ----------------------------------------
*/
.scale-out-center {
-webkit-animation: scale-out-center 0.5s
cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@-webkit-keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
@keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation rotate-in-center
* ----------------------------------------
*/
.rotate-in-center {
-webkit-animation: rotate-in-center 0.6s
cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes rotate-in-center {
0% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
opacity: 0;
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotate-in-center {
0% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
opacity: 0;
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation rotate-out-center
* ----------------------------------------
*/
.rotate-out-center {
-webkit-animation: rotate-out-center 0.6s
cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
animation: rotate-out-center 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@-webkit-keyframes rotate-out-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
opacity: 0;
}
}
@keyframes rotate-out-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
opacity: 0;
}
}
/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
.slide-in-top {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
both;
animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-out-top
* ----------------------------------------
*/
.slide-out-top {
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
both;
animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@-webkit-keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
}
@keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
}
/**
* ----------------------------------------
* animation bounce-in-top
* ----------------------------------------
*/
.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
@-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/**
* ----------------------------------------
* animation bounce-out-top
* ----------------------------------------
*/
.bounce-out-top {
-webkit-animation: bounce-out-top 1.5s both;
animation: bounce-out-top 1.5s both;
}
@-webkit-keyframes bounce-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
5% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
15% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
-webkit-transform: translateY(-38px);
transform: translateY(-38px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
52% {
-webkit-transform: translateY(-75px);
transform: translateY(-75px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
85% {
opacity: 1;
}
100% {
-webkit-transform: translateY(-800px);
transform: translateY(-800px);
opacity: 0;
}
}
@keyframes bounce-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
5% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
15% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
-webkit-transform: translateY(-38px);
transform: translateY(-38px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
52% {
-webkit-transform: translateY(-75px);
transform: translateY(-75px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
85% {
opacity: 1;
}
100% {
-webkit-transform: translateY(-800px);
transform: translateY(-800px);
opacity: 0;
}
}
/**
* ----------------------------------------
* animation roll-in-left
* ----------------------------------------
*/
.roll-in-left {
-webkit-animation: roll-in-left 0.6s ease-out both;
animation: roll-in-left 0.6s ease-out both;
}
@-webkit-keyframes roll-in-left {
0% {
-webkit-transform: translateX(-800px) rotate(-540deg);
transform: translateX(-800px) rotate(-540deg);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) rotate(0deg);
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@keyframes roll-in-left {
0% {
-webkit-transform: translateX(-800px) rotate(-540deg);
transform: translateX(-800px) rotate(-540deg);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) rotate(0deg);
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation roll-out-right
* ----------------------------------------
*/
.roll-out-right {
-webkit-animation: roll-out-right 0.6s ease-in both;
animation: roll-out-right 0.6s ease-in both;
}
@-webkit-keyframes roll-out-right {
0% {
-webkit-transform: translateX(0) rotate(0deg);
transform: translateX(0) rotate(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px) rotate(540deg);
transform: translateX(1000px) rotate(540deg);
opacity: 0;
}
}
@keyframes roll-out-right {
0% {
-webkit-transform: translateX(0) rotate(0deg);
transform: translateX(0) rotate(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px) rotate(540deg);
transform: translateX(1000px) rotate(540deg);
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment