anicollection/config/data/attention_seekers/db_bounce.json

AniCollection, The easiest way to find, use and share CSS3 animations.

{
    "name": "bounce",
    "className": "bounce animated",
    "cssCode": "@-webkit-keyframes bounce {\n  0%, 100%, 20%, 53%, 80% {\n    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);\n    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);\n    -webkit-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0)\n  }\n  40%,\n  43% {\n    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    -webkit-transform: translate3d(0, -30px, 0);\n    transform: translate3d(0, -30px, 0)\n  }\n  70% {\n    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    -webkit-transform: translate3d(0, -15px, 0);\n    transform: translate3d(0, -15px, 0)\n  }\n  90% {\n    -webkit-transform: translate3d(0, -4px, 0);\n    transform: translate3d(0, -4px, 0)\n  }\n}\n\n@keyframes bounce {\n  0%, 100%, 20%, 53%, 80% {\n    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);\n    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);\n    -webkit-transform: translate3d(0, 0, 0);\n    -ms-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0)\n  }\n  40%,\n  43% {\n    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    -webkit-transform: translate3d(0, -30px, 0);\n    -ms-transform: translate3d(0, -30px, 0);\n    transform: translate3d(0, -30px, 0)\n  }\n  70% {\n    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    -webkit-transform: translate3d(0, -15px, 0);\n    -ms-transform: translate3d(0, -15px, 0);\n    transform: translate3d(0, -15px, 0)\n  }\n  90% {\n    -webkit-transform: translate3d(0, -4px, 0);\n    -ms-transform: translate3d(0, -4px, 0);\n    transform: translate3d(0, -4px, 0)\n  }\n}\n\n.bounce {\n  -webkit-animation-name: bounce;\n  animation-name: bounce;\n  -webkit-transform-origin: center bottom;\n  -ms-transform-origin: center bottom;\n  transform-origin: center bottom\n}",
    "editionLink": "codepen.io",
    "author": "Dan Eden",
    "source": "Animate.css",
    "sourceUrl": "http://daneden.github.io/animate.css/",
    "issues": "https://github.com/daneden/animate.css/issues",
    "license": "MIT",
    "plainCssCode": "@keyframes bounce {\n  0%, 100%, 20%, 53%, 80% {\n    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);\n    transform: translate3d(0, 0, 0)\n  }\n  40%,\n  43% {\n    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    transform: translate3d(0, -30px, 0)\n  }\n  70% {\n    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);\n    transform: translate3d(0, -15px, 0)\n  }\n  90% {\n    transform: translate3d(0, -4px, 0)\n  }\n}\n\n.bounce {\n  animation-name: bounce;\n  transform-origin: center bottom\n}"
}