CSS Keyframe-based animations

Beautiful CSS-based animations using keyframes.

  •         
 <Page xmlns="http://www.nativescript.org/tns.xsd"
        xmlns:mainpage="views/main-page"
        class="qsf-page"
        backgroundSpanUnderStatusBar="true"
        ios:actionBarHidden="true"> 
                            
                <GridLayout id="intro-elements">
                    <GridLayout id="intro-background" class="intro-background-intro" backgroundColor="#151F2F" originY="0" />
                    <GridLayout id="intro-logo-bg" class="intro-logo-bg-intro" backgroundColor="#3C5AFD" width="93" height="93" horizontalAlignment="center" verticalAlignment="center" borderRadius="20" scaleX="18" scaleY="18" />
                    <GridLayout id="intro-logo-n" class="intro-logo-n-intro" backgroundImage="res://logo" width="93" height="93" horizontalAlignment="center" verticalAlignment="center" />
                    <GridLayout id="intro-logo-ns" class="intro-logo-ns-intro" backgroundImage="res://logo_text" width="199" height="31" horizontalAlignment="center" verticalAlignment="center" margin="160 0 0 0" />

                    <Label id="intro-text-one"
                            class="intro-text-one-intro"
                            text="Build truly&#xA;native apps with&#xA;JavaScript"
                            fontSize="37"
                            horizontalAlignment="center"
                            verticalAlignment="center"
                            textWrap="true"
                            color="white"
                            textAlignment="center" />
                    <Label id="intro-text-two"
                            class="intro-text-two-intro"
                            text="Develop native cross platform&#xA;apps from a single code base"
                            fontSize="19"
                            horizontalAlignment="center"
                            verticalAlignment="center"
                            textWrap="true"
                            color="#8DA1AB"
                            textAlignment="center" />

                    <Button id="intro-get-started"
                            class="intro-get-started-intro"
                            text="GET STARTED"
                            backgroundColor="#1DBE67"
                            color="white"
                            borderRadius="25"
                            height="50"
                            width="234"
                            fontSize="18"
                            tap="tapGetStarted"/>
                    <Label id="intro-version"
                            class="intro-version-intro"
                            text="version 2.0.0"
                            fontSize="14"
                            horizontalAlignment="center"
                            verticalAlignment="center"
                            color="white"
                            textAlignment="center" />
                </GridLayout>
</Page>
        
      
  •         
@keyframes intro-background-enter {
    0% { transform: scale(1, 1); }
    22.4% { transform: scale(1, 1); }
    46.77% { transform: scale(1, 0); }
    100% { transform: scale(1, 0); }
}

@keyframes intro-logo-bg-intro {
    0% {
        transform: scale(18, 18), translate(0, 0);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    21.25% {
        transform: scale(1, 1), translate(0, -60);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    22% {
        transform: scale(0, 0), translate(0, -60);
        opacity: 0;
    }
    100% {
        transform: scale(0, 0), translate(0, -60);
        opacity: 0;
    }
}
@keyframes intro-logo-bg-enter {
    0% {
        transform: scale(0, 0), translate(0, -60);
        opacity: 0;
    }
    100% {
        transform: scale(0, 0), translate(0, -60);
        opacity: 0;
    }
}

@keyframes intro-logo-n-intro {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
        opacity: 0;
    }
    21% {
        transform: translate(0, -60);
        opacity: 1;
    }
    30% {
        transform: translate(0, -60);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
        opacity: 1;
    }
    51% { transform: scale(0.56, 0.56), translate(0, -205); }
    100% { transform: scale(0.56, 0.56), translate(0, -205); }
}
@keyframes intro-logo-n-enter {
    0% {
        transform: scale(0.56, 0.56), translate(0, -205);
        opacity: 1;
    }
    24% {
        transform: scale(0.56, 0.56), translate(0, -205);
        opacity: 0;
    }
    100% {
        transform: scale(0.56, 0.56), translate(0, -205);
        opacity: 0;
    }
}

@keyframes intro-logo-ns-intro {
    0% {
        opacity: 0;
        transform: translate(0, 80);
    }
    9.25% {
        opacity: 0;
        transform: translate(0, 80);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    30% {
        opacity: 1;
        transform: translate(0, -60);
    }
    32% {
        opacity: 1;
        transform: translate(0, -60);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    53% {
        opacity: 1;
        transform:  scale(0.56, 0.56), translate(0, -240);
    }
    100% {
        opacity: 1;
        transform:  scale(0.56, 0.56), translate(0, -240);
    }
}
@keyframes intro-logo-ns-enter {
    0% {
        transform:  scale(0.56, 0.56), translate(0, -240);
        opacity: 1;
    }
    24% {
        transform:  scale(0.56, 0.56), translate(0, -240);
        opacity: 0;
    }
    100% {
        transform:  scale(0.56, 0.56), translate(0, -240);
        opacity: 0;
    }
}

@keyframes intro-text-one-intro {
    0% {
        opacity: 0;
        transform: translate(0, 210);
    }
    40.5% {
        opacity: 0;
        transform: translate(0, 210);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    62% {
        opacity: 1;
        transform: translate(0, -55);
    }
    100% {
        opacity: 1;
        transform: translate(0, -55);
    }
}
@keyframes intro-text-one-enter {
    0% {
        opacity: 1;
        transform: translate(0, -55);
    }
    53.6% {
        opacity: 1;
        transform: translate(0, -55);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 20);
    }
}

@keyframes intro-text-two-intro {
    0% {
        opacity: 0;
        transform: translate(0, 280);
    }
    47.5% {
        opacity: 0;
        transform: translate(0, 280);
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    66.25% {
        opacity: 1;
        transform: translate(0, 70);
    }
    100% {
        opacity: 1;
        transform: translate(0, 70);
    }
}
@keyframes intro-text-two-enter {
    0% {
        opacity: 1;
        transform: translate(0, 70);
    }
    48.8% {
        opacity: 1;
        transform: translate(0, 70);
    }
    91.2% {
        opacity: 0;
        transform: translate(0, 300);
    }
    100% {
        opacity: 0;
        transform: translate(0, 300);
    }
}

@keyframes intro-get-started-intro {
    0% {
        opacity: 0;
        transform: translate(0, 175);
    }
    66.25% {
        opacity: 0;
        transform: translate(0, 175);
    }
    86.75% {
        opacity: 1;
        transform: translate(0, 175);
    }
}
@keyframes intro-get-started-enter {
    0% {
        opacity: 1;
        transform: translate(0, 175);
    }
    12% {
        opacity: 1;
        transform: translate(0, 175);
    }
    75.2% {
        opacity: 0;
        transform: translate(0, 300);
    }
    100% {
        opacity: 0;
        transform: translate(0, 300);
    }
}

@keyframes intro-version-intro {
    0% {
        opacity: 0;
        transform: translate(0, 260);
    }
    88.25% {
        opacity: 0;
        transform: translate(0, 260);
    }
    100% {
        opacity: 0.8;
        transform: translate(0, 260);
    }
}
@keyframes intro-version-enter {
    0% {
        opacity: 0.8;
        transform: translate(0, 260);
    }
    12% {
        opacity: 0;
        transform: translate(0, 260);
    }
    75.2% {
        opacity: 0;
        transform: translate(0, 260);
    }
    100% {
        opacity: 0;
        transform: translate(0, 260);
    }
}

.intro-logo-bg-intro {
    animation-name: intro-logo-bg-intro;
    animation-duration: 4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-logo-n-intro {
    animation-name: intro-logo-n-intro;
    animation-duration: 4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-logo-ns-intro {
    animation-name: intro-logo-ns-intro;
    animation-duration: 4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-text-one-intro {
    animation-name: intro-text-one-intro;
    animation-duration: 4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-text-two-intro {
    animation-name: intro-text-two-intro;
    animation-duration: 4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-get-started-intro {
    animation-name: intro-get-started-intro;
    animation-duration: 4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-version-intro {
    animation-name: intro-version-intro;
    animation-duration: 4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.intro-background-enter {
    animation-name: intro-background-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-logo-bg-enter {
    animation-name: intro-logo-bg-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-logo-n-enter {
    animation-name: intro-logo-n-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-logo-ns-enter {
    animation-name: intro-logo-ns-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-text-one-enter {
    animation-name: intro-text-one-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-text-two-enter {
    animation-name: intro-text-two-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-get-started-enter {
    animation-name: intro-get-started-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.intro-version-enter {
    animation-name: intro-version-enter;
    animation-duration: 1.25;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes example-odd-enter {
    0% {
        opacity: 0;
        transform: translate(-200, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes example-even-enter {
    0% {
        opacity: 0;
        transform: translate(200, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}