anicollection/config/data/bouncing_entrances/db_bounceIn.json

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

{
    "name": "bounceIn",
    "className": "bounceIn animated",
    "cssCode": "@-webkit-keyframes bounceIn {\n  0%, 100%, 20%, 40%, 60%, 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  }\n  0% {\n    opacity: 0;\n    -webkit-transform: scale3d(.3, .3, .3);\n    transform: scale3d(.3, .3, .3)\n  }\n  20% {\n    -webkit-transform: scale3d(1.1, 1.1, 1.1);\n    transform: scale3d(1.1, 1.1, 1.1)\n  }\n  40% {\n    -webkit-transform: scale3d(.9, .9, .9);\n    transform: scale3d(.9, .9, .9)\n  }\n  60% {\n    opacity: 1;\n    -webkit-transform: scale3d(1.03, 1.03, 1.03);\n    transform: scale3d(1.03, 1.03, 1.03)\n  }\n  80% {\n    -webkit-transform: scale3d(.97, .97, .97);\n    transform: scale3d(.97, .97, .97)\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: scale3d(1, 1, 1);\n    transform: scale3d(1, 1, 1)\n  }\n}\n\n@keyframes bounceIn {\n  0%, 100%, 20%, 40%, 60%, 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  }\n  0% {\n    opacity: 0;\n    -webkit-transform: scale3d(.3, .3, .3);\n    -ms-transform: scale3d(.3, .3, .3);\n    transform: scale3d(.3, .3, .3)\n  }\n  20% {\n    -webkit-transform: scale3d(1.1, 1.1, 1.1);\n    -ms-transform: scale3d(1.1, 1.1, 1.1);\n    transform: scale3d(1.1, 1.1, 1.1)\n  }\n  40% {\n    -webkit-transform: scale3d(.9, .9, .9);\n    -ms-transform: scale3d(.9, .9, .9);\n    transform: scale3d(.9, .9, .9)\n  }\n  60% {\n    opacity: 1;\n    -webkit-transform: scale3d(1.03, 1.03, 1.03);\n    -ms-transform: scale3d(1.03, 1.03, 1.03);\n    transform: scale3d(1.03, 1.03, 1.03)\n  }\n  80% {\n    -webkit-transform: scale3d(.97, .97, .97);\n    -ms-transform: scale3d(.97, .97, .97);\n    transform: scale3d(.97, .97, .97)\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: scale3d(1, 1, 1);\n    -ms-transform: scale3d(1, 1, 1);\n    transform: scale3d(1, 1, 1)\n  }\n}\n\n.bounceIn {\n  -webkit-animation-name: bounceIn;\n  animation-name: bounceIn\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 bounceIn {\n  0%, 100%, 20%, 40%, 60%, 80% {\n    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)\n  }\n  0% {\n    opacity: 0;\n    transform: scale3d(.3, .3, .3)\n  }\n  20% {\n    transform: scale3d(1.1, 1.1, 1.1)\n  }\n  40% {\n    transform: scale3d(.9, .9, .9)\n  }\n  60% {\n    opacity: 1;\n    transform: scale3d(1.03, 1.03, 1.03)\n  }\n  80% {\n    transform: scale3d(.97, .97, .97)\n  }\n  100% {\n    opacity: 1;\n    transform: scale3d(1, 1, 1)\n  }\n}\n\n.bounceIn {\n  animation-name: bounceIn\n}"
}