UNPKG

enami

Version:

Animation on scroll package

github.com/EnzoEmb/enami

EnzoEmb/enami

8 lines (7 loc) • 12.1 kB
1
2
3
4
5
6
7
8
/*! * enami * Animation on scroll * 2020 Enzo Vergara * MIT License * https://github.com/enzoemb/enami */[data-enami-in]{-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}[data-enami="fade-up"][data-enami-in]{-webkit-animation-name:fadeUp;animation-name:fadeUp;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes fadeUp{from{transform:translate3d(0, 40px, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}@keyframes fadeUp{from{transform:translate3d(0, 40px, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}[data-enami="fade-left"][data-enami-in]{-webkit-animation-name:fadeLeft;animation-name:fadeLeft;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes fadeLeft{from{transform:translate3d(-40px, 0, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}@keyframes fadeLeft{from{transform:translate3d(-40px, 0, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}[data-enami="fade-right"][data-enami-in]{-webkit-animation-name:fadeRight;animation-name:fadeRight;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes fadeRight{from{transform:translate3d(40px, 0, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}@keyframes fadeRight{from{transform:translate3d(40px, 0, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}[data-enami="fade-down"][data-enami-in]{-webkit-animation-name:fadeDown;animation-name:fadeDown;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes fadeDown{from{transform:translate3d(0, -40px, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}@keyframes fadeDown{from{transform:translate3d(0, -40px, 0) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1}}[data-enami="fade-in"][data-enami-in]{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}[data-enami="fade-up-out"][data-enami-in]{animation-direction:reverse;-webkit-animation-name:fadeUp;animation-name:fadeUp}[data-enami="fade-left-out"][data-enami-in]{-webkit-animation-name:fadeLeft;animation-name:fadeLeft;animation-direction:reverse}[data-enami="fade-right-out"][data-enami-in]{-webkit-animation-name:fadeRight;animation-name:fadeRight;animation-direction:reverse}[data-enami="fade-down-out"][data-enami-in]{-webkit-animation-name:fadeDown;animation-name:fadeDown;animation-direction:reverse}[data-enami="fade-in-out"][data-enami-in]{-webkit-animation-name:fadeIn;animation-name:fadeIn;animation-direction:reverse}[data-enami="jump-in"][data-enami-in]{-webkit-animation-name:jumpIn;animation-name:jumpIn;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4)}@-webkit-keyframes jumpIn{from{transform:scale(0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg) rotate(0deg);opacity:1}}@keyframes jumpIn{from{transform:scale(0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg) rotate(0deg);opacity:1}}[data-enami="jump-up"][data-enami-in]{-webkit-animation-name:jumpUp;animation-name:jumpUp;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4)}@-webkit-keyframes jumpUp{from{transform:translate3d(0, 20px, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}@keyframes jumpUp{from{transform:translate3d(0, 20px, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}[data-enami="jump-left"][data-enami-in]{-webkit-animation-name:jumpLeft;animation-name:jumpLeft;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4)}@-webkit-keyframes jumpLeft{from{transform:translate3d(-20px, 0, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}@keyframes jumpLeft{from{transform:translate3d(-20px, 0, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}[data-enami="jump-right"][data-enami-in]{-webkit-animation-name:jumpRight;animation-name:jumpRight;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4)}@-webkit-keyframes jumpRight{from{transform:translate3d(20px, 0, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}@keyframes jumpRight{from{transform:translate3d(20px, 0, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}[data-enami="jump-down"][data-enami-in]{-webkit-animation-name:jumpDown;animation-name:jumpDown;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4)}@-webkit-keyframes jumpDown{from{transform:translate3d(0, -20px, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}@keyframes jumpDown{from{transform:translate3d(0, -20px, 0) rotate(2deg) rotate(0.02deg);opacity:0}to{transform:translate3d(0, 0, 0) rotate(0deg) rotate(0deg);opacity:1}}[data-enami="jump-out"][data-enami-in]{-webkit-animation-name:jumpIn;animation-name:jumpIn;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-direction:reverse}[data-enami="jump-up-out"][data-enami-in]{-webkit-animation-name:jumpUp;animation-name:jumpUp;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-direction:reverse}[data-enami="jump-left-out"][data-enami-in]{-webkit-animation-name:jumpLeft;animation-name:jumpLeft;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-direction:reverse}[data-enami="jump-right-out"][data-enami-in]{-webkit-animation-name:jumpRight;animation-name:jumpRight;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-direction:reverse}[data-enami="jump-down-out"][data-enami-in]{-webkit-animation-name:jumpDown;animation-name:jumpDown;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);-webkit-animation:0.5s jumpDown forwards cubic-bezier(0.68, -0.55, 0.265, 2.4);animation:0.5s jumpDown forwards cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-direction:reverse}[data-enami="scale-in"][data-enami-in]{-webkit-animation-name:scaleIn;animation-name:scaleIn;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes scaleIn{from{transform:scale(0.6) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}@keyframes scaleIn{from{transform:scale(0.6) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}[data-enami="scale-up"][data-enami-in]{-webkit-animation-name:scaleUp;animation-name:scaleUp;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes scaleUp{from{transform:scale(0.6) translateY(100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}@keyframes scaleUp{from{transform:scale(0.6) translateY(100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}[data-enami="scale-left"][data-enami-in]{-webkit-animation-name:scaleLeft;animation-name:scaleLeft;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes scaleLeft{from{transform:scale(0.6) translateX(100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}@keyframes scaleLeft{from{transform:scale(0.6) translateX(100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}[data-enami="scale-right"][data-enami-in]{-webkit-animation-name:scaleRight;animation-name:scaleRight;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes scaleRight{from{transform:scale(0.6) translateX(-100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}@keyframes scaleRight{from{transform:scale(0.6) translateX(-100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}[data-enami="scale-down"][data-enami-in]{-webkit-animation-name:scaleDown;animation-name:scaleDown;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}@-webkit-keyframes scaleDown{from{transform:scale(0.6) translateY(-100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}@keyframes scaleDown{from{transform:scale(0.6) translateY(-100px) rotate(0.02deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}[data-enami="scale-out"][data-enami-in]{-webkit-animation-name:scaleIn;animation-name:scaleIn;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-direction:reverse}[data-enami="scale-up-out"][data-enami-in]{-webkit-animation-name:scaleUp;animation-name:scaleUp;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-direction:reverse}[data-enami="scale-left-out"][data-enami-in]{-webkit-animation-name:scaleLeft;animation-name:scaleLeft;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-direction:reverse}[data-enami="scale-right-out"][data-enami-in]{-webkit-animation-name:scaleRight;animation-name:scaleRight;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-direction:reverse}[data-enami="scale-down-out"][data-enami-in]{-webkit-animation-name:scaleDown;animation-name:scaleDown;-webkit-animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1);animation-direction:reverse}[data-enami="pop-in"][data-enami-in]{-webkit-animation-name:popIn;animation-name:popIn;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4)}@-webkit-keyframes popIn{from{transform:scale(0)}to{transform:scale(1);opacity:1}}@keyframes popIn{from{transform:scale(0)}to{transform:scale(1);opacity:1}}[data-enami="pop-out"][data-enami-in]{-webkit-animation-name:popOut;animation-name:popOut;-webkit-animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4);animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 2.4)}@-webkit-keyframes popOut{from{transform:scale(1);opacity:1}to{transform:scale(0)}}@keyframes popOut{from{transform:scale(1);opacity:1}to{transform:scale(0)}}