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);
        }
    }