Skip to content

Instantly share code, notes, and snippets.

@csssecrets

csssecrets/dabblet.css

Last active March 15, 2023 07:41
Download ZIP

Revisions

  1. csssecrets revised this gist Feb 22, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,8 @@
    .ball {
    width: 0; height: 0; padding: 1.5em;
    border-radius: 50%;
    background: red;
    margin: auto;
    background: red radial-gradient(at 30% 30%, #fdd, red);
    animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
    }

  2. csssecrets created this gist Feb 22, 2015.
    24 changes: 24 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    /**
    * Bouncing animation
    */

    @keyframes bounce {
    60%, 80%, to {
    transform: translateY(400px);
    animation-timing-function: ease;
    }
    70% { transform: translateY(300px); }
    90% { transform: translateY(360px); }
    }

    .ball {
    width: 0; height: 0; padding: 1.5em;
    border-radius: 50%;
    background: red;
    animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
    }

    body {
    background: linear-gradient(skyblue, white 450px, yellowgreen 0);
    min-height: 100vh;
    }
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class="ball"></div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}