anicollection
Version:
AniCollection, The easiest way to find, use and share CSS3 animations.
12 lines • 3.02 kB
JSON
{
"name": "hinge",
"className": "hinge animated",
"cssCode": "@-webkit-keyframes hinge {\n 0% {\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out\n }\n 20%,\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 80deg);\n transform: rotate3d(0, 0, 1, 80deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out\n }\n 40%,\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, 60deg);\n transform: rotate3d(0, 0, 1, 60deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n opacity: 1\n }\n 100% {\n -webkit-transform: translate3d(0, 700px, 0);\n transform: translate3d(0, 700px, 0);\n opacity: 0\n }\n}\n\n@keyframes hinge {\n 0% {\n -webkit-transform-origin: top left;\n -ms-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out\n }\n 20%,\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 80deg);\n -ms-transform: rotate3d(0, 0, 1, 80deg);\n transform: rotate3d(0, 0, 1, 80deg);\n -webkit-transform-origin: top left;\n -ms-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out\n }\n 40%,\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, 60deg);\n -ms-transform: rotate3d(0, 0, 1, 60deg);\n transform: rotate3d(0, 0, 1, 60deg);\n -webkit-transform-origin: top left;\n -ms-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n opacity: 1\n }\n 100% {\n -webkit-transform: translate3d(0, 700px, 0);\n -ms-transform: translate3d(0, 700px, 0);\n transform: translate3d(0, 700px, 0);\n opacity: 0\n }\n}\n\n.hinge {\n -webkit-animation-name: hinge;\n animation-name: hinge\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 hinge {\n 0% {\n transform-origin: top left;\n animation-timing-function: ease-in-out\n }\n 20%,\n 60% {\n transform: rotate3d(0, 0, 1, 80deg);\n transform-origin: top left;\n animation-timing-function: ease-in-out\n }\n 40%,\n 80% {\n transform: rotate3d(0, 0, 1, 60deg);\n transform-origin: top left;\n animation-timing-function: ease-in-out;\n opacity: 1\n }\n 100% {\n transform: translate3d(0, 700px, 0);\n opacity: 0\n }\n}\n\n.hinge {\n animation-name: hinge\n}"
}