@keyframe animations

wiiija · 7 Oct 2016 at 03:08

Hi all,

I'm currently trying to learn @keyframe animations, my css isn't bad but this is all new to me, now I have the following code:

Code:

body {
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    
    animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox < 16 */

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Opera < 12.1 */

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

This fades the page into view on load, which is ok, but of course I'm using it on body so it happens on all pages, no issue there really for me but it annoys some people.

Aaaanyway what I really want to do is adapt that code to the site sliding down or up into view rather than transitioning opacity, I've been trying and failing! keep in mind I only have access to css, I realise there are various .js methods too.

Any help would be awarded with a virtual high five!

Sean

wiiija · 7 Oct 2016 at 03:21

Actually I got it working but the animation is horrendously jerky so I'm still looking for a better solution

)

wiiija · 7 Oct 2016 at 10:57

Solved,.

wiiija · 14 Oct 2016 at 19:32

Yes! of course not, it was courtesy of animate.css that somebody sent my way.

Code:

@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
#left-sidebar,
#Panel {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}
}

Sean