Skip to content

Instantly share code, notes, and snippets.

@dodycode
Created September 24, 2022 06:06
Show Gist options
  • Save dodycode/8d832667e53b3c207e8ccbe886b4a508 to your computer and use it in GitHub Desktop.
Save dodycode/8d832667e53b3c207e8ccbe886b4a508 to your computer and use it in GitHub Desktop.
my simple animation
.ros {
opacity: 0;
transform: translateY(60px) translateZ(0);
transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.ros--left {
transform: translateX(-60px) translateZ(0);
}
.ros--right {
transform: translateX(60px) translateZ(0);
}
.ros--fade,
.ros--is-visible {
transform: translateY(0) translateZ(0);
}
.ros--is-visible {
opacity: 1;
}
.ros--left.ros--is-visible,
.ros--right.ros--is-visible {
transform: translateX(0) translateZ(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment