Beautiful animations text and others for apps

Project Showcase
1

animation completely using css, you can change the animation according to your wishes

[data-test="app-search-bar"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-signing-in"] {
    display: none;
}
[data-test="back-button"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-menu"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-Exit"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-Cancel"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[aria-label="grid"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[aria-label="flyout-menu"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-simple-table"] {
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-summary"] {
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;;
}
[data-test="app-markdown-view"] {
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-Search"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-text-box"]{
    animation: slide-down 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="tile-item"]{
    animation: slide-down 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="list-item"]{
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-switch-view"]{
    text-transform: capitalize;
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-button-view"]{
    text-transform: capitalize;
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-hint"]{
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-image-carousel"]{
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
.floating-btn-style{
    animation: zoom-out 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}} 
@keyframes zoom-out {
from {
opacity: 0;
transform : scale(0)
}
to {
opacity: 1;
transform : scale(1)
}} 


@keyframes slide-right {
from {
opacity: 0;
transform : translateX(-20px)
}
to {
opacity: 1;
transform : translateX(0px)
}} 

@keyframes slide-left {
from {
opacity: 0;
transform : translateX(20px)
}
to {
opacity: 1;
transform : translateX(0px)
}} 

@keyframes slide-down {
from {
opacity: 0;
transform : translateY(-20px)
}
to {
opacity: 1;
transform : translateY(0px)
}} 

@keyframes slide-up {
from {
opacity: 0;
transform : translateY(20px)
}
to {
opacity: 1;
transform : translateY(0px)
}}```
17 Likes
3

Impressive :clap:t3:

1 Like
4

Thankyou :sweat_smile:

1 Like
5

Sweet! Thanks for sharing.

1 Like
6

I hope more people can make beautiful animations

7

@resepsionis_ganteng

Intrigued…how might I be able to transform the scrolling “animation” with a fade out/in animation for a horizontally scrolling inline list?
CleanShot 2022-03-02 at 21.55.42

3 Likes
8

does the image move automatically?

9

No, still a swipe, but instead of a horizontal scroll, I’d love for the cards to “cut” or ideal “fade” to the next card in the inline list.

I scoured the CSS and I don’t think it’s possible, but you seem to have a knack for CSS animations and thought I’d see if you’d be able to find something.

2 Likes
10

interesting, I’ll give it a try :smiley:

1 Like
11

wow perfect, thanks and congrats

1 Like
12

Sorry I’m late, it seems that it’s not possible to add animation when scrolling or someone else can do it