Skip to content

My suggestions... #1846

@FirstByteFirst

Description

@FirstByteFirst

I'm not sure this project is still active but lately I did a deep dive into this project. Here are some of my suggestions:

  • Many "Out"-animations are actually reversed "In"-animations. This could drasticly lower the number of animations needed.

  • To my opinion the "webkit"-versions are something of the past.

  • I see things like (for example):
    @Keyframes fadeInLeftBig {
    from {opacity: 0;transform: translate3d(-2000px, 0, 0);}
    to {opacity: 1;transform: translate3d(0, 0, 0);}
    }

I see what you are trying to accomplish with those -2000px, but it actually works so that in aprox. the first half of the animation nothing happens (depending on the position of the element to animate and viewport width). The actual sortcoming is in CSS itself (I requested a solution for this). In the meanwhile it could be wise to use vw en vh units. This does not solve the problem but makes the problem independent of the screen size.

  • As a library of animations you should be complete. For example, in the rotations I miss some clockwise and counter clockwise variants.

  • The slide animations also changes visibility. I took these out because it makes it impossible to run the animation more then once.

  • I made a simple but effective editor to tryout all animations. If interrested i could share this code. For this I need an email adress...

  • I made some 3D animations:

@Keyframes doorInLeft{
0% {transform: perspective(400px) rotate3d(0,1,0,90deg);}
100% {transform: perspective(400px) rotate3d(0,1,0,0deg);}
}
@Keyframes doorInRight{
0% {transform: perspective(400px) rotate3d(0,1,0,-90deg);}
100% {transform: perspective(400px) rotate3d(0,1,0,0deg);}
}
@Keyframes doorInDown{
0% {transform: perspective(400px) rotate3d(1,0,0,90deg);}
100% {transform: perspective(400px) rotate3d(1,0,0,0deg);}
}
@Keyframes doorInUp{
0% {transform: perspective(400px) rotate3d(1,0,0,-90deg);}
100% {transform: perspective(400px) rotate3d(1,0,0,0deg);}
}
@Keyframes doorXYInUp{
0% {transform: perspective(400px) rotate3d(1,1,0,-90deg);}
100% {transform: perspective(400px) rotate3d(1,1,0,0deg);}
}
@Keyframes doorXYInDown{
0% {transform: perspective(400px) rotate3d(1,1,0,90deg);}
100% {transform: perspective(400px) rotate3d(1,1,0,0deg);}
}
@Keyframes doorXYZInV{
0% {transform: perspective(400px) rotate3d(1,1,1,120deg);}
100% {transform: perspective(400px) rotate3d(1,1,1,0deg);}
}
@Keyframes doorXYZInH{
0% {transform: perspective(400px) rotate3d(1,1,1,-120deg);}
100% {transform: perspective(400px) rotate3d(1,1,1,0deg);}
}

the "out"-variations are just reversed versions. Depending on your origin setting this leads to different animations...

Actually it is a nice set of animations. My complements!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions