UNPKG

anicollection

Version:

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

12 lines 1.98 kB
{ "name": "lightSpeedIn", "className": "lightSpeedIn animated", "cssCode": "@-webkit-keyframes lightSpeedIn {\n 0% {\n -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n opacity: 0\n }\n 60% {\n -webkit-transform: skewX(20deg);\n transform: skewX(20deg);\n opacity: 1\n }\n 80% {\n -webkit-transform: skewX(-5deg);\n transform: skewX(-5deg);\n opacity: 1\n }\n 100% {\n -webkit-transform: none;\n transform: none;\n opacity: 1\n }\n}\n\n@keyframes lightSpeedIn {\n 0% {\n -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n opacity: 0\n }\n 60% {\n -webkit-transform: skewX(20deg);\n -ms-transform: skewX(20deg);\n transform: skewX(20deg);\n opacity: 1\n }\n 80% {\n -webkit-transform: skewX(-5deg);\n -ms-transform: skewX(-5deg);\n transform: skewX(-5deg);\n opacity: 1\n }\n 100% {\n -webkit-transform: none;\n -ms-transform: none;\n transform: none;\n opacity: 1\n }\n}\n\n.lightSpeedIn {\n -webkit-animation-name: lightSpeedIn;\n animation-name: lightSpeedIn;\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out\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 lightSpeedIn {\n 0% {\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n opacity: 0\n }\n 60% {\n transform: skewX(20deg);\n opacity: 1\n }\n 80% {\n transform: skewX(-5deg);\n opacity: 1\n }\n 100% {\n transform: none;\n opacity: 1\n }\n}\n\n.lightSpeedIn {\n animation-name: lightSpeedIn;\n animation-timing-function: ease-out\n}" }