[
  {
    "path": ".babelrc",
    "content": "{\n\t\"presets\": [\n\t\t[\"@babel/env\", {\n\t\t\t\"useBuiltIns\": \"entry\"\n\t\t}]\n\t]\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = tab\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.yml]\nindent_style = space\nindent_size = 2\n\n[node_modules/**.js]\ncodepaint = false\n"
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n\t\"parser\": \"@typescript-eslint/parser\",\n\t\"parserOptions\": {\n\t\t\"sourceType\": \"module\"\n\t},\n\t\"extends\": [\n\t\t\"eslint:recommended\",\n\t\t\"plugin:prettier/recommended\"\n\t],\n\t\"plugins\": [\n\t\t\"@typescript-eslint\",\n\t\t\"prettier\"\n\t],\n\t\"env\": {\n\t\t\"browser\": true,\n\t\t\"node\": true\n\t},\n\t\"rules\": {\n\t\t\"prettier/prettier\": \"error\",\n\t\t\"arrow-parens\": [\"error\", \"always\"],\n\t\t\"array-bracket-spacing\": \"error\",\n\t\t\"arrow-spacing\": \"error\",\n\t\t\"arrow-body-style\": \"error\",\n\t\t\"block-spacing\": \"error\",\n\t\t\"brace-style\": [\"error\", \"1tbs\"],\n\t\t\"comma-dangle\": [\n\t\t\t\"error\",\n\t\t\t{\n\t\t\t\t\"arrays\": \"always-multiline\",\n\t\t\t\t\"objects\": \"always-multiline\",\n\t\t\t\t\"imports\": \"always-multiline\",\n\t\t\t\t\"exports\": \"always-multiline\",\n\t\t\t\t\"functions\": \"ignore\"\n\t\t\t}\n\t\t],\n\t\t\"eqeqeq\": \"error\",\n\t\t\"key-spacing\": \"error\",\n\t\t\"keyword-spacing\": [\"error\", { \"after\": true }],\n\t\t\"object-curly-spacing\": [\"error\", \"always\"],\n\t\t\"no-prototype-builtins\": \"error\",\n\t\t\"no-undef\": \"off\"\n\t},\n\n\t\"overrides\": [\n\t\t{\n\t\t\t\"files\": [\n\t\t\t\t\"*.ts\"\n\t\t\t],\n\t\t\t\"rules\": {\n\t\t\t\t\"no-console\": \"error\",\n\t\t\t\t\"no-undef\": \"error\",\n\t\t\t\t\"no-unused-vars\": \"off\",\n\t\t\t\t\"camelcase\": \"off\",\n\t\t\t\t\"no-array-constructor\": \"off\",\n\t\t\t\t\"no-empty-function\": \"off\",\n\t\t\t\t\"no-use-before-define\": \"off\",\n\t\t\t\t\"no-var\": \"error\",\n\t\t\t\t\"prefer-const\": \"error\",\n\n\t\t\t\t\"@typescript-eslint/adjacent-overload-signatures\": \"error\",\n\t\t\t\t\"@typescript-eslint/ban-ts-comment\": \"error\",\n\t\t\t\t\"@typescript-eslint/ban-tslint-comment\": \"error\",\n\t\t\t\t\"@typescript-eslint/ban-types\": \"error\",\n\t\t\t\t\"@typescript-eslint/consistent-type-assertions\": \"error\",\n\t\t\t\t\"@typescript-eslint/no-array-constructor\": \"error\",\n\t\t\t\t\"@typescript-eslint/no-empty-interface\": \"error\",\n\t\t\t\t\"@typescript-eslint/no-inferrable-types\": \"error\",\n\t\t\t\t\"@typescript-eslint/no-misused-new\": \"error\",\n\t\t\t\t\"@typescript-eslint/no-namespace\": \"error\",\n\t\t\t\t\"@typescript-eslint/no-non-null-assertion\": \"warn\",\n\t\t\t\t\"@typescript-eslint/no-this-alias\": \"error\",\n\t\t\t\t\"@typescript-eslint/no-var-requires\": \"error\",\n\t\t\t\t\"@typescript-eslint/prefer-namespace-keyword\": \"error\",\n\t\t\t\t\"@typescript-eslint/triple-slash-reference\": \"error\",\n\t\t\t\t\"@typescript-eslint/type-annotation-spacing\": \"error\",\n\t\t\t\t\"@typescript-eslint/interface-name-prefix\": \"off\",\n\t\t\t\t\"@typescript-eslint/camelcase\": \"off\",\n\t\t\t\t\"@typescript-eslint/no-use-before-define\": [\n\t\t\t\t\t\"error\",\n\t\t\t\t\t{ \"functions\": false }\n\t\t\t\t],\n\t\t\t\t\"@typescript-eslint/no-unused-vars\": [\n\t\t\t\t\t\"error\",\n\t\t\t\t\t{ \"argsIgnorePattern\": \"^_\" }\n\t\t\t\t],\n\t\t\t\t\"@typescript-eslint/no-explicit-any\": \"off\",\n\t\t\t\t\"@typescript-eslint/no-empty-function\": \"off\",\n\t\t\t\t\"@typescript-eslint/explicit-function-return-type\": \"error\"\n\t\t\t}\n\t\t}\n\t]\n}\n"
  },
  {
    "path": ".github/workflows/cd.yml",
    "content": "name: CD\n\non:\n  push:\n    branches:\n      - master\n\njobs:\n  deploy:\n    name: Build and deploy\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - run: yarn install\n      - name: Build\n        run: yarn run build\n      - name: Deploy\n        uses: peaceiris/actions-gh-pages@v3\n        with:\n          github_token: ${{ secrets.GITHUB_TOKEN }}\n          publish_dir: ./dist\n          cname: easings.net\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: CI\n\non:\n  push:\n    branches:\n      - master\n  pull_request:\n\njobs:\n  lint:\n    name: Lint\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - run: yarn install\n      - run: yarn run lint\n"
  },
  {
    "path": ".gitignore",
    "content": "dist/\n.cache\n\nnode_modules\nyarn-error.log\n"
  },
  {
    "path": ".prettierignore",
    "content": "dist/\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"arrowParens\": \"always\",\n  \"bracketSpacing\": true,\n  \"jsxBracketSameLine\": false,\n  \"trailingComma\": \"es5\",\n  \"tabWidth\": 2,\n  \"semi\": true,\n  \"singleQuote\": false\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "                    GNU GENERAL PUBLIC LICENSE\n                       Version 3, 29 June 2007\n\n Copyright (C) 2007 Free Software Foundation, Inc. [http://fsf.org/]\n Everyone is permitted to copy and distribute verbatim copies\n of this license document, but changing it is not allowed.\n\n                            Preamble\n\n  The GNU General Public License is a free, copyleft license for\nsoftware and other kinds of works.\n\n  The licenses for most software and other practical works are designed\nto take away your freedom to share and change the works.  By contrast,\nthe GNU General Public License is intended to guarantee your freedom to\nshare and change all versions of a program--to make sure it remains free\nsoftware for all its users.  We, the Free Software Foundation, use the\nGNU General Public License for most of our software; it applies also to\nany other work released this way by its authors.  You can apply it to\nyour programs, too.\n\n  When we speak of free software, we are referring to freedom, not\nprice.  Our General Public Licenses are designed to make sure that you\nhave the freedom to distribute copies of free software (and charge for\nthem if you wish), that you receive source code or can get it if you\nwant it, that you can change the software or use pieces of it in new\nfree programs, and that you know you can do these things.\n\n  To protect your rights, we need to prevent others from denying you\nthese rights or asking you to surrender the rights.  Therefore, you have\ncertain responsibilities if you distribute copies of the software, or if\nyou modify it: responsibilities to respect the freedom of others.\n\n  For example, if you distribute copies of such a program, whether\ngratis or for a fee, you must pass on to the recipients the same\nfreedoms that you received.  You must make sure that they, too, receive\nor can get the source code.  And you must show them these terms so they\nknow their rights.\n\n  Developers that use the GNU GPL protect your rights with two steps:\n(1) assert copyright on the software, and (2) offer you this License\ngiving you legal permission to copy, distribute and/or modify it.\n\n  For the developers' and authors' protection, the GPL clearly explains\nthat there is no warranty for this free software.  For both users' and\nauthors' sake, the GPL requires that modified versions be marked as\nchanged, so that their problems will not be attributed erroneously to\nauthors of previous versions.\n\n  Some devices are designed to deny users access to install or run\nmodified versions of the software inside them, although the manufacturer\ncan do so.  This is fundamentally incompatible with the aim of\nprotecting users' freedom to change the software.  The systematic\npattern of such abuse occurs in the area of products for individuals to\nuse, which is precisely where it is most unacceptable.  Therefore, we\nhave designed this version of the GPL to prohibit the practice for those\nproducts.  If such problems arise substantially in other domains, we\nstand ready to extend this provision to those domains in future versions\nof the GPL, as needed to protect the freedom of users.\n\n  Finally, every program is threatened constantly by software patents.\nStates should not allow patents to restrict development and use of\nsoftware on general-purpose computers, but in those that do, we wish to\navoid the special danger that patents applied to a free program could\nmake it effectively proprietary.  To prevent this, the GPL assures that\npatents cannot be used to render the program non-free.\n\n  The precise terms and conditions for copying, distribution and\nmodification follow.\n\n                       TERMS AND CONDITIONS\n\n  0. Definitions.\n\n  \"This License\" refers to version 3 of the GNU General Public License.\n\n  \"Copyright\" also means copyright-like laws that apply to other kinds of\nworks, such as semiconductor masks.\n\n  \"The Program\" refers to any copyrightable work licensed under this\nLicense.  Each licensee is addressed as \"you\".  \"Licensees\" and\n\"recipients\" may be individuals or organizations.\n\n  To \"modify\" a work means to copy from or adapt all or part of the work\nin a fashion requiring copyright permission, other than the making of an\nexact copy.  The resulting work is called a \"modified version\" of the\nearlier work or a work \"based on\" the earlier work.\n\n  A \"covered work\" means either the unmodified Program or a work based\non the Program.\n\n  To \"propagate\" a work means to do anything with it that, without\npermission, would make you directly or secondarily liable for\ninfringement under applicable copyright law, except executing it on a\ncomputer or modifying a private copy.  Propagation includes copying,\ndistribution (with or without modification), making available to the\npublic, and in some countries other activities as well.\n\n  To \"convey\" a work means any kind of propagation that enables other\nparties to make or receive copies.  Mere interaction with a user through\na computer network, with no transfer of a copy, is not conveying.\n\n  An interactive user interface displays \"Appropriate Legal Notices\"\nto the extent that it includes a convenient and prominently visible\nfeature that (1) displays an appropriate copyright notice, and (2)\ntells the user that there is no warranty for the work (except to the\nextent that warranties are provided), that licensees may convey the\nwork under this License, and how to view a copy of this License.  If\nthe interface presents a list of user commands or options, such as a\nmenu, a prominent item in the list meets this criterion.\n\n  1. Source Code.\n\n  The \"source code\" for a work means the preferred form of the work\nfor making modifications to it.  \"Object code\" means any non-source\nform of a work.\n\n  A \"Standard Interface\" means an interface that either is an official\nstandard defined by a recognized standards body, or, in the case of\ninterfaces specified for a particular programming language, one that\nis widely used among developers working in that language.\n\n  The \"System Libraries\" of an executable work include anything, other\nthan the work as a whole, that (a) is included in the normal form of\npackaging a Major Component, but which is not part of that Major\nComponent, and (b) serves only to enable use of the work with that\nMajor Component, or to implement a Standard Interface for which an\nimplementation is available to the public in source code form.  A\n\"Major Component\", in this context, means a major essential component\n(kernel, window system, and so on) of the specific operating system\n(if any) on which the executable work runs, or a compiler used to\nproduce the work, or an object code interpreter used to run it.\n\n  The \"Corresponding Source\" for a work in object code form means all\nthe source code needed to generate, install, and (for an executable\nwork) run the object code and to modify the work, including scripts to\ncontrol those activities.  However, it does not include the work's\nSystem Libraries, or general-purpose tools or generally available free\nprograms which are used unmodified in performing those activities but\nwhich are not part of the work.  For example, Corresponding Source\nincludes interface definition files associated with source files for\nthe work, and the source code for shared libraries and dynamically\nlinked subprograms that the work is specifically designed to require,\nsuch as by intimate data communication or control flow between those\nsubprograms and other parts of the work.\n\n  The Corresponding Source need not include anything that users\ncan regenerate automatically from other parts of the Corresponding\nSource.\n\n  The Corresponding Source for a work in source code form is that\nsame work.\n\n  2. Basic Permissions.\n\n  All rights granted under this License are granted for the term of\ncopyright on the Program, and are irrevocable provided the stated\nconditions are met.  This License explicitly affirms your unlimited\npermission to run the unmodified Program.  The output from running a\ncovered work is covered by this License only if the output, given its\ncontent, constitutes a covered work.  This License acknowledges your\nrights of fair use or other equivalent, as provided by copyright law.\n\n  You may make, run and propagate covered works that you do not\nconvey, without conditions so long as your license otherwise remains\nin force.  You may convey covered works to others for the sole purpose\nof having them make modifications exclusively for you, or provide you\nwith facilities for running those works, provided that you comply with\nthe terms of this License in conveying all material for which you do\nnot control copyright.  Those thus making or running the covered works\nfor you must do so exclusively on your behalf, under your direction\nand control, on terms that prohibit them from making any copies of\nyour copyrighted material outside their relationship with you.\n\n  Conveying under any other circumstances is permitted solely under\nthe conditions stated below.  Sublicensing is not allowed; section 10\nmakes it unnecessary.\n\n  3. Protecting Users' Legal Rights From Anti-Circumvention Law.\n\n  No covered work shall be deemed part of an effective technological\nmeasure under any applicable law fulfilling obligations under article\n11 of the WIPO copyright treaty adopted on 20 December 1996, or\nsimilar laws prohibiting or restricting circumvention of such\nmeasures.\n\n  When you convey a covered work, you waive any legal power to forbid\ncircumvention of technological measures to the extent such circumvention\nis effected by exercising rights under this License with respect to\nthe covered work, and you disclaim any intention to limit operation or\nmodification of the work as a means of enforcing, against the work's\nusers, your or third parties' legal rights to forbid circumvention of\ntechnological measures.\n\n  4. Conveying Verbatim Copies.\n\n  You may convey verbatim copies of the Program's source code as you\nreceive it, in any medium, provided that you conspicuously and\nappropriately publish on each copy an appropriate copyright notice;\nkeep intact all notices stating that this License and any\nnon-permissive terms added in accord with section 7 apply to the code;\nkeep intact all notices of the absence of any warranty; and give all\nrecipients a copy of this License along with the Program.\n\n  You may charge any price or no price for each copy that you convey,\nand you may offer support or warranty protection for a fee.\n\n  5. Conveying Modified Source Versions.\n\n  You may convey a work based on the Program, or the modifications to\nproduce it from the Program, in the form of source code under the\nterms of section 4, provided that you also meet all of these conditions:\n\n    a) The work must carry prominent notices stating that you modified\n    it, and giving a relevant date.\n\n    b) The work must carry prominent notices stating that it is\n    released under this License and any conditions added under section\n    7.  This requirement modifies the requirement in section 4 to\n    \"keep intact all notices\".\n\n    c) You must license the entire work, as a whole, under this\n    License to anyone who comes into possession of a copy.  This\n    License will therefore apply, along with any applicable section 7\n    additional terms, to the whole of the work, and all its parts,\n    regardless of how they are packaged.  This License gives no\n    permission to license the work in any other way, but it does not\n    invalidate such permission if you have separately received it.\n\n    d) If the work has interactive user interfaces, each must display\n    Appropriate Legal Notices; however, if the Program has interactive\n    interfaces that do not display Appropriate Legal Notices, your\n    work need not make them do so.\n\n  A compilation of a covered work with other separate and independent\nworks, which are not by their nature extensions of the covered work,\nand which are not combined with it such as to form a larger program,\nin or on a volume of a storage or distribution medium, is called an\n\"aggregate\" if the compilation and its resulting copyright are not\nused to limit the access or legal rights of the compilation's users\nbeyond what the individual works permit.  Inclusion of a covered work\nin an aggregate does not cause this License to apply to the other\nparts of the aggregate.\n\n  6. Conveying Non-Source Forms.\n\n  You may convey a covered work in object code form under the terms\nof sections 4 and 5, provided that you also convey the\nmachine-readable Corresponding Source under the terms of this License,\nin one of these ways:\n\n    a) Convey the object code in, or embodied in, a physical product\n    (including a physical distribution medium), accompanied by the\n    Corresponding Source fixed on a durable physical medium\n    customarily used for software interchange.\n\n    b) Convey the object code in, or embodied in, a physical product\n    (including a physical distribution medium), accompanied by a\n    written offer, valid for at least three years and valid for as\n    long as you offer spare parts or customer support for that product\n    model, to give anyone who possesses the object code either (1) a\n    copy of the Corresponding Source for all the software in the\n    product that is covered by this License, on a durable physical\n    medium customarily used for software interchange, for a price no\n    more than your reasonable cost of physically performing this\n    conveying of source, or (2) access to copy the\n    Corresponding Source from a network server at no charge.\n\n    c) Convey individual copies of the object code with a copy of the\n    written offer to provide the Corresponding Source.  This\n    alternative is allowed only occasionally and noncommercially, and\n    only if you received the object code with such an offer, in accord\n    with subsection 6b.\n\n    d) Convey the object code by offering access from a designated\n    place (gratis or for a charge), and offer equivalent access to the\n    Corresponding Source in the same way through the same place at no\n    further charge.  You need not require recipients to copy the\n    Corresponding Source along with the object code.  If the place to\n    copy the object code is a network server, the Corresponding Source\n    may be on a different server (operated by you or a third party)\n    that supports equivalent copying facilities, provided you maintain\n    clear directions next to the object code saying where to find the\n    Corresponding Source.  Regardless of what server hosts the\n    Corresponding Source, you remain obligated to ensure that it is\n    available for as long as needed to satisfy these requirements.\n\n    e) Convey the object code using peer-to-peer transmission, provided\n    you inform other peers where the object code and Corresponding\n    Source of the work are being offered to the general public at no\n    charge under subsection 6d.\n\n  A separable portion of the object code, whose source code is excluded\nfrom the Corresponding Source as a System Library, need not be\nincluded in conveying the object code work.\n\n  A \"User Product\" is either (1) a \"consumer product\", which means any\ntangible personal property which is normally used for personal, family,\nor household purposes, or (2) anything designed or sold for incorporation\ninto a dwelling.  In determining whether a product is a consumer product,\ndoubtful cases shall be resolved in favor of coverage.  For a particular\nproduct received by a particular user, \"normally used\" refers to a\ntypical or common use of that class of product, regardless of the status\nof the particular user or of the way in which the particular user\nactually uses, or expects or is expected to use, the product.  A product\nis a consumer product regardless of whether the product has substantial\ncommercial, industrial or non-consumer uses, unless such uses represent\nthe only significant mode of use of the product.\n\n  \"Installation Information\" for a User Product means any methods,\nprocedures, authorization keys, or other information required to install\nand execute modified versions of a covered work in that User Product from\na modified version of its Corresponding Source.  The information must\nsuffice to ensure that the continued functioning of the modified object\ncode is in no case prevented or interfered with solely because\nmodification has been made.\n\n  If you convey an object code work under this section in, or with, or\nspecifically for use in, a User Product, and the conveying occurs as\npart of a transaction in which the right of possession and use of the\nUser Product is transferred to the recipient in perpetuity or for a\nfixed term (regardless of how the transaction is characterized), the\nCorresponding Source conveyed under this section must be accompanied\nby the Installation Information.  But this requirement does not apply\nif neither you nor any third party retains the ability to install\nmodified object code on the User Product (for example, the work has\nbeen installed in ROM).\n\n  The requirement to provide Installation Information does not include a\nrequirement to continue to provide support service, warranty, or updates\nfor a work that has been modified or installed by the recipient, or for\nthe User Product in which it has been modified or installed.  Access to a\nnetwork may be denied when the modification itself materially and\nadversely affects the operation of the network or violates the rules and\nprotocols for communication across the network.\n\n  Corresponding Source conveyed, and Installation Information provided,\nin accord with this section must be in a format that is publicly\ndocumented (and with an implementation available to the public in\nsource code form), and must require no special password or key for\nunpacking, reading or copying.\n\n  7. Additional Terms.\n\n  \"Additional permissions\" are terms that supplement the terms of this\nLicense by making exceptions from one or more of its conditions.\nAdditional permissions that are applicable to the entire Program shall\nbe treated as though they were included in this License, to the extent\nthat they are valid under applicable law.  If additional permissions\napply only to part of the Program, that part may be used separately\nunder those permissions, but the entire Program remains governed by\nthis License without regard to the additional permissions.\n\n  When you convey a copy of a covered work, you may at your option\nremove any additional permissions from that copy, or from any part of\nit.  (Additional permissions may be written to require their own\nremoval in certain cases when you modify the work.)  You may place\nadditional permissions on material, added by you to a covered work,\nfor which you have or can give appropriate copyright permission.\n\n  Notwithstanding any other provision of this License, for material you\nadd to a covered work, you may (if authorized by the copyright holders of\nthat material) supplement the terms of this License with terms:\n\n    a) Disclaiming warranty or limiting liability differently from the\n    terms of sections 15 and 16 of this License; or\n\n    b) Requiring preservation of specified reasonable legal notices or\n    author attributions in that material or in the Appropriate Legal\n    Notices displayed by works containing it; or\n\n    c) Prohibiting misrepresentation of the origin of that material, or\n    requiring that modified versions of such material be marked in\n    reasonable ways as different from the original version; or\n\n    d) Limiting the use for publicity purposes of names of licensors or\n    authors of the material; or\n\n    e) Declining to grant rights under trademark law for use of some\n    trade names, trademarks, or service marks; or\n\n    f) Requiring indemnification of licensors and authors of that\n    material by anyone who conveys the material (or modified versions of\n    it) with contractual assumptions of liability to the recipient, for\n    any liability that these contractual assumptions directly impose on\n    those licensors and authors.\n\n  All other non-permissive additional terms are considered \"further\nrestrictions\" within the meaning of section 10.  If the Program as you\nreceived it, or any part of it, contains a notice stating that it is\ngoverned by this License along with a term that is a further\nrestriction, you may remove that term.  If a license document contains\na further restriction but permits relicensing or conveying under this\nLicense, you may add to a covered work material governed by the terms\nof that license document, provided that the further restriction does\nnot survive such relicensing or conveying.\n\n  If you add terms to a covered work in accord with this section, you\nmust place, in the relevant source files, a statement of the\nadditional terms that apply to those files, or a notice indicating\nwhere to find the applicable terms.\n\n  Additional terms, permissive or non-permissive, may be stated in the\nform of a separately written license, or stated as exceptions;\nthe above requirements apply either way.\n\n  8. Termination.\n\n  You may not propagate or modify a covered work except as expressly\nprovided under this License.  Any attempt otherwise to propagate or\nmodify it is void, and will automatically terminate your rights under\nthis License (including any patent licenses granted under the third\nparagraph of section 11).\n\n  However, if you cease all violation of this License, then your\nlicense from a particular copyright holder is reinstated (a)\nprovisionally, unless and until the copyright holder explicitly and\nfinally terminates your license, and (b) permanently, if the copyright\nholder fails to notify you of the violation by some reasonable means\nprior to 60 days after the cessation.\n\n  Moreover, your license from a particular copyright holder is\nreinstated permanently if the copyright holder notifies you of the\nviolation by some reasonable means, this is the first time you have\nreceived notice of violation of this License (for any work) from that\ncopyright holder, and you cure the violation prior to 30 days after\nyour receipt of the notice.\n\n  Termination of your rights under this section does not terminate the\nlicenses of parties who have received copies or rights from you under\nthis License.  If your rights have been terminated and not permanently\nreinstated, you do not qualify to receive new licenses for the same\nmaterial under section 10.\n\n  9. Acceptance Not Required for Having Copies.\n\n  You are not required to accept this License in order to receive or\nrun a copy of the Program.  Ancillary propagation of a covered work\noccurring solely as a consequence of using peer-to-peer transmission\nto receive a copy likewise does not require acceptance.  However,\nnothing other than this License grants you permission to propagate or\nmodify any covered work.  These actions infringe copyright if you do\nnot accept this License.  Therefore, by modifying or propagating a\ncovered work, you indicate your acceptance of this License to do so.\n\n  10. Automatic Licensing of Downstream Recipients.\n\n  Each time you convey a covered work, the recipient automatically\nreceives a license from the original licensors, to run, modify and\npropagate that work, subject to this License.  You are not responsible\nfor enforcing compliance by third parties with this License.\n\n  An \"entity transaction\" is a transaction transferring control of an\norganization, or substantially all assets of one, or subdividing an\norganization, or merging organizations.  If propagation of a covered\nwork results from an entity transaction, each party to that\ntransaction who receives a copy of the work also receives whatever\nlicenses to the work the party's predecessor in interest had or could\ngive under the previous paragraph, plus a right to possession of the\nCorresponding Source of the work from the predecessor in interest, if\nthe predecessor has it or can get it with reasonable efforts.\n\n  You may not impose any further restrictions on the exercise of the\nrights granted or affirmed under this License.  For example, you may\nnot impose a license fee, royalty, or other charge for exercise of\nrights granted under this License, and you may not initiate litigation\n(including a cross-claim or counterclaim in a lawsuit) alleging that\nany patent claim is infringed by making, using, selling, offering for\nsale, or importing the Program or any portion of it.\n\n  11. Patents.\n\n  A \"contributor\" is a copyright holder who authorizes use under this\nLicense of the Program or a work on which the Program is based.  The\nwork thus licensed is called the contributor's \"contributor version\".\n\n  A contributor's \"essential patent claims\" are all patent claims\nowned or controlled by the contributor, whether already acquired or\nhereafter acquired, that would be infringed by some manner, permitted\nby this License, of making, using, or selling its contributor version,\nbut do not include claims that would be infringed only as a\nconsequence of further modification of the contributor version.  For\npurposes of this definition, \"control\" includes the right to grant\npatent sublicenses in a manner consistent with the requirements of\nthis License.\n\n  Each contributor grants you a non-exclusive, worldwide, royalty-free\npatent license under the contributor's essential patent claims, to\nmake, use, sell, offer for sale, import and otherwise run, modify and\npropagate the contents of its contributor version.\n\n  In the following three paragraphs, a \"patent license\" is any express\nagreement or commitment, however denominated, not to enforce a patent\n(such as an express permission to practice a patent or covenant not to\nsue for patent infringement).  To \"grant\" such a patent license to a\nparty means to make such an agreement or commitment not to enforce a\npatent against the party.\n\n  If you convey a covered work, knowingly relying on a patent license,\nand the Corresponding Source of the work is not available for anyone\nto copy, free of charge and under the terms of this License, through a\npublicly available network server or other readily accessible means,\nthen you must either (1) cause the Corresponding Source to be so\navailable, or (2) arrange to deprive yourself of the benefit of the\npatent license for this particular work, or (3) arrange, in a manner\nconsistent with the requirements of this License, to extend the patent\nlicense to downstream recipients.  \"Knowingly relying\" means you have\nactual knowledge that, but for the patent license, your conveying the\ncovered work in a country, or your recipient's use of the covered work\nin a country, would infringe one or more identifiable patents in that\ncountry that you have reason to believe are valid.\n\n  If, pursuant to or in connection with a single transaction or\narrangement, you convey, or propagate by procuring conveyance of, a\ncovered work, and grant a patent license to some of the parties\nreceiving the covered work authorizing them to use, propagate, modify\nor convey a specific copy of the covered work, then the patent license\nyou grant is automatically extended to all recipients of the covered\nwork and works based on it.\n\n  A patent license is \"discriminatory\" if it does not include within\nthe scope of its coverage, prohibits the exercise of, or is\nconditioned on the non-exercise of one or more of the rights that are\nspecifically granted under this License.  You may not convey a covered\nwork if you are a party to an arrangement with a third party that is\nin the business of distributing software, under which you make payment\nto the third party based on the extent of your activity of conveying\nthe work, and under which the third party grants, to any of the\nparties who would receive the covered work from you, a discriminatory\npatent license (a) in connection with copies of the covered work\nconveyed by you (or copies made from those copies), or (b) primarily\nfor and in connection with specific products or compilations that\ncontain the covered work, unless you entered into that arrangement,\nor that patent license was granted, prior to 28 March 2007.\n\n  Nothing in this License shall be construed as excluding or limiting\nany implied license or other defenses to infringement that may\notherwise be available to you under applicable patent law.\n\n  12. No Surrender of Others' Freedom.\n\n  If conditions are imposed on you (whether by court order, agreement or\notherwise) that contradict the conditions of this License, they do not\nexcuse you from the conditions of this License.  If you cannot convey a\ncovered work so as to satisfy simultaneously your obligations under this\nLicense and any other pertinent obligations, then as a consequence you may\nnot convey it at all.  For example, if you agree to terms that obligate you\nto collect a royalty for further conveying from those to whom you convey\nthe Program, the only way you could satisfy both those terms and this\nLicense would be to refrain entirely from conveying the Program.\n\n  13. Use with the GNU Affero General Public License.\n\n  Notwithstanding any other provision of this License, you have\npermission to link or combine any covered work with a work licensed\nunder version 3 of the GNU Affero General Public License into a single\ncombined work, and to convey the resulting work.  The terms of this\nLicense will continue to apply to the part which is the covered work,\nbut the special requirements of the GNU Affero General Public License,\nsection 13, concerning interaction through a network will apply to the\ncombination as such.\n\n  14. Revised Versions of this License.\n\n  The Free Software Foundation may publish revised and/or new versions of\nthe GNU General Public License from time to time.  Such new versions will\nbe similar in spirit to the present version, but may differ in detail to\naddress new problems or concerns.\n\n  Each version is given a distinguishing version number.  If the\nProgram specifies that a certain numbered version of the GNU General\nPublic License \"or any later version\" applies to it, you have the\noption of following the terms and conditions either of that numbered\nversion or of any later version published by the Free Software\nFoundation.  If the Program does not specify a version number of the\nGNU General Public License, you may choose any version ever published\nby the Free Software Foundation.\n\n  If the Program specifies that a proxy can decide which future\nversions of the GNU General Public License can be used, that proxy's\npublic statement of acceptance of a version permanently authorizes you\nto choose that version for the Program.\n\n  Later license versions may give you additional or different\npermissions.  However, no additional obligations are imposed on any\nauthor or copyright holder as a result of your choosing to follow a\nlater version.\n\n  15. Disclaimer of Warranty.\n\n  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY\nAPPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT\nHOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM \"AS IS\" WITHOUT WARRANTY\nOF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,\nTHE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR\nPURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM\nIS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF\nALL NECESSARY SERVICING, REPAIR OR CORRECTION.\n\n  16. Limitation of Liability.\n\n  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING\nWILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS\nTHE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY\nGENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE\nUSE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF\nDATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD\nPARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),\nEVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF\nSUCH DAMAGES.\n\n  17. Interpretation of Sections 15 and 16.\n\n  If the disclaimer of warranty and limitation of liability provided\nabove cannot be given local legal effect according to their terms,\nreviewing courts shall apply local law that most closely approximates\nan absolute waiver of all civil liability in connection with the\nProgram, unless a warranty or assumption of liability accompanies a\ncopy of the Program in return for a fee.\n\n                     END OF TERMS AND CONDITIONS\n\n            How to Apply These Terms to Your New Programs\n\n  If you develop a new program, and you want it to be of the greatest\npossible use to the public, the best way to achieve this is to make it\nfree software which everyone can redistribute and change under these terms.\n\n  To do so, attach the following notices to the program.  It is safest\nto attach them to the start of each source file to most effectively\nstate the exclusion of warranty; and each file should have at least\nthe \"copyright\" line and a pointer to where the full notice is found.\n\n    {one line to give the program's name and a brief idea of what it does.}\n    Copyright (C) {year}  {name of author}\n\n    This program is free software: you can redistribute it and/or modify\n    it under the terms of the GNU General Public License as published by\n    the Free Software Foundation, either version 3 of the License, or\n    (at your option) any later version.\n\n    This program is distributed in the hope that it will be useful,\n    but WITHOUT ANY WARRANTY; without even the implied warranty of\n    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n    GNU General Public License for more details.\n\n    You should have received a copy of the GNU General Public License\n    along with this program.  If not, see [http://www.gnu.org/licenses/].\n\nAlso add information on how to contact you by electronic and paper mail.\n\n  If the program does terminal interaction, make it output a short\nnotice like this when it starts in an interactive mode:\n\n    {project}  Copyright (C) {year}  {fullname}\n    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.\n    This is free software, and you are welcome to redistribute it\n    under certain conditions; type `show c' for details.\n\nThe hypothetical commands `show w' and `show c' should show the appropriate\nparts of the General Public License.  Of course, your program's commands\nmight be different; for a GUI interface, you would use an \"about box\".\n\n  You should also get your employer (if you work as a programmer) or school,\nif any, to sign a \"copyright disclaimer\" for the program, if necessary.\nFor more information on this, and how to apply and follow the GNU GPL, see\n[http://www.gnu.org/licenses/].\n\n  The GNU General Public License does not permit incorporating your program\ninto proprietary programs.  If your program is a subroutine library, you\nmay consider it more useful to permit linking proprietary applications with\nthe library.  If this is what you want to do, use the GNU Lesser General\nPublic License instead of this License.  But first, please read\n[http://www.gnu.org/philosophy/why-not-lgpl.html].\n"
  },
  {
    "path": "README.md",
    "content": "# Easing Functions Cheat Sheet\n\nSimple cheat sheet to help developers pick the right easing function.\n\n<a href=\"https://evilmartians.com/?utm_source=easings.net\">\n<img src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\" alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\">\n</a>\n\n## Contributing\n\nGitHub has great instructions on how to [set up Git], [fork a project] and\n[make pull requests]. If you have a problem with Git, just send your files\ndirectly to <andrey@sitnik.ru>.\n\n[set up Git]:         https://docs.github.com/en/github/getting-started-with-github/set-up-git\n[fork a project]:     https://docs.github.com/en/github/getting-started-with-github/fork-a-repo\n[make pull requests]: https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests\n\n### Translate\n\nJust copy the `i18n/en.yml` file to `i18n/CODE.yml` (where `CODE` is\nthe lowercased [RFC 3066] language code of your target language,\nfor example `fr-ca` for Canadian French) and translate all messages.\n\n[RFC 3066]: http://www.i18nguy.com/unicode/language-identifiers.html\n\n### Test\n\n1. Install project dependencies:\n\n     ```sh\n    yarn install\n     ```\n\n2. That’s all. Run development server:\n\n     ```sh\n    yarn run start\n     ```\n\n3. And open [localhost:1234](https://localhost:1234) in browser.\n"
  },
  {
    "path": "i18n/_af.yml",
    "content": "title: Easing Functions Cheat Sheet\ndescription:\n  Maak animasies meer realisties deur die regte oorgangsfunksie te kies.\nshare:\n  Oorgangsfunksies spesifiseer die spoed van animasie om die beweging\n  meer natuurlik te maak. Regte voorwerpe beweeg nie net teen 'n\n  konstante spoed nie, en begin en stop nie onmiddellik nie. Hierdie\n  bladsy help jou om die regte oorgangsfunksie te kies.\n\nabout: !!format\n  ~Oorgangsfunksies~ (Easing functions) Bepaal die spoed van verandering\n  van 'n sekere waarde oor 'n bepaalde periode.\n\n  Voorwerpe in realiteit begin en stop nie onmiddellik nie, en beweeg\n  amper nooit teen 'n konstante spoed nie. Wanneer ons 'n laai oopmaak\n  beweeg ons eers vinnig en dan stadiger soos dit uit kom. Laat val iets\n  op die vloer en dit sal eers versnel na onderen dan terug hop nadat\n  dit die vloer getref het.\n\n  Hierdie bladsy help jou om die regte oorgangsfunksie te kies.\n\neasings:\n  css: Orals beskikbaar\n  js: Net in JavaScript\n\nhowtos:\n  name: oorgang-naam\n  curve: oorgang-Bézierkurwe\n  js: !!code\n    jQuery met die ^jQuery Easing Plugin^ is die maklikste manier om die\n    animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam\n    (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument,\n    of gebruik dit as waarde van die oorgangsfunksie.\n  scss: !!code\n    Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels\n    voor die 'transition' en 'animation' waardes,\n    <nobr> en die ^Compss Ceaser^</nobr> plugin laat jou toe om die\n    oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe\n    te spesifiseer).\n  css: !!code\n    CSS eienskappe 'transition' en 'animation' laat jou toe om die\n    oorgangsfunksie te kies.\n  css_bad:\n   Ongelukkig ondersteun hulle nie alle oorgangsfunksies nie en jy moet\n    die gewenste oorgangsfunksie self spesifiseer (as 'n Bézierkurwe).\n  css_help:\n    Kies 'n oorgangsfunksie om die Bézierkurwe notasie te wys.\n\neasing:\n  all_easings: Alle oorgange\n  no_css: !!code\n    Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit\n    uitskryf met CSS Animation '@keyframes'.\n  edit: ^Edit^ op cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Help vertaal^ blad in jou taal\n"
  },
  {
    "path": "i18n/_az.yml",
    "content": "title: Yumşaqlıq funksiyaları (easing)\ndescription:\n  Lazım olan yumşaqlıq funksiyasını (easing) seçməklə animasiyaları\n  daha təbii edin.\nshare:\n  Yumşaqlıq funksiyası (easing) animasiyanı daha təbii etmək üçün onun\n  cərəyan sürətini müəyyən edir. Belə ki, təbiətdə heç bir şey dərhal və\n  bərabərsürətli hərəkət etmir. Bu saytdan siz müxtəlif yumşaqlıq\n  funksiyalarını seçə bilərsiniz.\n\nabout: !!format\n  ~Yumşaqlıq funksiyası (easing)~ animasiyanı daha təbii etmək üçün onun\n  cərəyan cürətini müəyyən edir.\n\n  Təbiətdə heç bir şey dərhal və bərabər sürətlə hərəkət etmir.\n  Məsələn, əgər bir yeşiyin qapağını açırıqsa biz əvvəlcə onu\n  artan təcillə açırıq, daha sonra sürəti azaldaraq hərəkəti\n  saxlayırıq. Əgər bir şey yerə düşərsə, əvvəlcə sürəti artaraq\n  yerə düşür, yerə dəydikdən sonra bir az yuxarı tullanır.\n\n  Bu saytdan siz müxtəlif yumşaqlıq funksiyalarını seçə bilərsiniz.\n\neasings:\n  css: Hər yerdə mövcud\n  js: Yalnız JavaScript vasitəsilə mövcud\n\nhowtos:\n  name: funksiyanın adı\n  curve: Bezye əyrisi funksiyaları\n  js: !!code\n    ^jQuery Easing Plugin^ əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı\n    tərtib etmək daha rahat olar. Bundan sonra `.animate` funksiyasında üçüncü\n    arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.\n  scss: !!code\n    Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass\n    `transition` <nobr>və `animation`</nobr> xassələrinin önündəki\n    prefixlərdən bizi azad edir. ^Compass Ceaser^ ilə isə funksiyanın\n    adını Bezye əyrisi olmadan belə göstərmək mümkündür.\n  css: !!code\n    CSS-də `transition` və `animation` xassələri yumşaqlıq funksiyasını\n    göstərməyə imkan verir.\n  css_bad:\n    Təəssüf ki, heç də bütün funksiyalar mövcud deyil, onları Bezye\n    əyrisi olaraq göstərmək lazımdır.\n  css_help:\n    Bezye əyrisi olaraq onu necə tərtib etməyi görmək üçün, funksiyanı\n    seçin.\n\neasing:\n  all_easings: Bütün funksiyalar\n  no_css: !!code\n    Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil.\n    Bunun üçün JavaScript və ya CSS Animation ilə xüsusi `@keyframes`\n    istifadə edin.\n  edit: ^Redaktə et^ на cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: Saytı öz dilinə tərcümə etməyə ^Yardım et^\n\nauthor: Andrey Sitnik\n"
  },
  {
    "path": "i18n/_ca.yml",
    "content": "title: Funcions Easing Guia de Referència\ndescription:\n  Creï animacions més realistes triant la funció 'easing' correcta.\nshare:\n  La funció 'easing' especifica la velocitat de progrés de l'animació\n  per fer-la més realista. L'objecte real no comença el seu movimient\n  de forma instantània i de manera constant. Aquesta pàgina l'ajudarà a\n  triar la funció desitjada.\n\nabout: !!format\n  La ~funció easing~ especifica la velocitat de l'animació per fer-la\n  més realista.\n\n  L'objecte real no comença el seu movimient de forma instantània i de manera\n  constant. Quan obrim el calaix, primer li donem acceleració, i després\n  el frenem. Quan alguna cosa cau, primer baixa ràpidament i després d'arribar\n  a terra rebota.\n\n  Aquesta pàgina l'ajudarà a triar la funció desitjada.\n\neasings:\n  css: Tots disponibles\n  js: Només en JavaScript\n\nhowtos:\n  name: nom easing\n  curve: corba Bezier de l'easing\n  js: !!code\n    jQuery amb ^jQuery Easing Plugin^ és la forma més senzilla de definir una\n    animació amb 'easing'. Únicament necessita ajustar el nom 'easing' al mètode\n    `.animate` com tercer argument o la key `easing`.\n  scss: !!code\n    Sass/SCSS l'ajuden a definir l'animació. Compass elimina els prefixes previs\n    a les propietats `transition` i `animation` i el plugin ^Compass Ceaser^\n    permet fixar l'easing per el seu nom (sense corbes Bezier).\n  css: !!code\n    Les propietats CSS `transition` i `animation` li permeten fixar la funció\n    'easing'.\n  css_bad:\n    Desgraciadament, no estan tots suportats i haurà de fixar la funció\n    amb corba Bezier.\n  css_help:\n    Seleccioni 'easing' per mostrar la seva descripció en la corba Bézier.\n\neasing:\n  all_easings: Tots els easings\n  no_css: !!code\n    Desgraciadament, CSS no suporta aquest 'easing'. Però pot utilitzar-lo amb\n    JavaScript o amb la propietat CSS Animation `@keyframes`.\n  edit: ^Editar^ en cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Ajuda a traduir^ aquesta web al teu idioma\n"
  },
  {
    "path": "i18n/_cs.yml",
    "content": "title:\n  Tahák Easing funkcí\ndescription:\n  Vytvářejte realističtější animace výběrem správné easing funkce.\nshare:\n  Easing funkce definují rychlost animace tak, aby byl \n  pohyb přirozenější. Skutečné objekty se nepohybují konstantní \n  rychlostí a nezrychlují a nezpomalují okamžitě. Tato stránka \n  vám pomůže vybrat správnou easing funkci.\n\nabout: !!format\n  ~Easing funkce~ definují úrověň změny parametru v čase.\n  \n  Objekty reálného života nezrychlují a nezastavují okamžitě a téměř nikdy se\n  nepohybují konstantní rychlostí. Když otevřeme šuplík, nejdříve se pohybuje \n  rychle a jak se otevírá zpomaluje. Upusťe něco na zem a ono to nejprve bude \n  zrychlovat dolů a po nárazu na zem se odrazí zpět nahoru.\n\n  Tato stránka vám pomůže vybrat správnou easing funkci.\neasings:\n  css: Dostupné kdekoliv\n  js: Pouze v JavaScriptu\n\nhowtos:\n  name: jméno easing funkce\n  curve: Bezierova křivka easing funkce\n  js: !!code\n    Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s \n    ^jQuery Easing Pluginem^. Do metody `.animate()` zadejte jako třetí \n    parametr jméno easing funkce (např. `easeInCirc`) nebo jej použijte \n    jako hodnotu parametru `easing`.\n  scss: !!code\n    Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony \n    vlastností `transition` a `animation` a <nobr>^Compass Ceaser^</nobr>\n    plugin vám umožní zadat easing funkci dle jména (aniž byste museli \n    přesně specifikovat Bezierovu křivku).\n  css: !!code\n    CSS vlastnosti `transition` a `animation` vám umožní vybrat easing funkci.\n  css_bad:\n    Naneštěstí nejsou podporovány všechny easing funkce, proto \n    musíte požadovanou easing funkci definovat sami (jako Bezierovu křivku).\n  css_help:\n    Pro zobrazení popisu Bezierovy křivky vyberte easing funkci.\n\neasing:\n  all_easings: Všechny funkce easing \n  no_css: !!code\n    V CSS není podporováno. Lze ovšem použít v JS \n    nebo napsat pomocí CSS Animation `@keyframes`.\n  edit: ^Upravit^ na cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Pomozte přeložit^ stránku do vašeho jazyka.\n"
  },
  {
    "path": "i18n/_cy.yml",
    "content": "title: Coflen Ffrwythianau Easing\ndescription:\n  Gwneud animeiddio yn fwy realistig drwy ddewis y ffrwythiant easeing cywir. \nshare:\n  Mae'r ffrwythiannau easing yn gosod cyflymder yr animeiddio\n  i'w gwneud yn fwy naturiol. Nid yw gwrthrychau yn symud ar \n  gyflymder cyson yn y byd go iawn, nac yn dechrau neu aros ar unwaith. \n  Mae'r dudalen hon yn eich cynorthwyo i ddewis y ffrwythiant cywir. \n  \nabout: !!format\n  Mae ~ffrwythianau easing~ yn gosod cyfradd newid paramedr dros amser.\n\n  Nid yw gwrthrychau yn dechrau neu sdopio symud ar unwaith, a bron byth yn \n  symud ar gyflymder cyson. Pan agorwn ddror, mae'n symud yn gyflym i ddechrau, \n  yna'n arafu fel mae'n dod allan. Os gollyngi rywbeth ar y llawr, bydd yn \n  cyflymu lawr, yna'n adlamu fyny ar ôl taro'r llawr. \n  \n  Mae'r dudalen hon yn eich cynorthwyo i ddewis y ffrwythiant easing cywir. \n\neasings:\n  css: Ar gael ym mhob man\n  js: Dim ond gyda JavaScript\n\nhowtos:\n  name: enw'r easing\n  curve: cromlin Bezier yr easing\n  js: !!code\n    jQuery gyda'r ^jQuery Easing Plugin^ yw'r ffordd orau i ddisgrifio \n    animeiddio gyda easing. Gellir pasio enw'r easing (fel `easeInCirc`) \n    i'r ffrwythiant `.animate()` fel trydydd dadl, neu ei ddefnyddio fel \n    gwerth yr opsiwn `easing`. \n  scss: !!code\n    Gall Sass/SCSS ddisgrifio animeiddio hefyd! Mae Compass yn cael gwared\n    o ragddodiaid cyn y priodweddau `transition` ac `animation`, <nobr> ac \n    mae'r plugin ^Compass Ceaser^</nobr> yn caniatau i basio'r ffrwythiant easing \n    fel enw (heb bennu y gromliniau Bezier). \n  css: !!code\n    Gellir dewis y ffwrythiant easing gyda'r priodweddau CSS `transition` ac \n    `animation`.\n  css_bad:\n    Yn anffodus, nid ydynt yn defnyddio pob math o easing a rhaid pennu'r ffrwythiant \n    easing eich hunain (fel cromlin Bezier).\n  css_help:\n    Dewiser ffrwythiant easing i arddangos ei nodiant cromlin Bezier.\n\neasing:\n  all_easings: Pob easing\n  no_css: !!code\n    Nid yw'n gweithio gyda CSS. Ond gellir ei ddefnyddio gyda JS\n    neu ei nodi gyda CSS Animation `@keyframes`. \n  edit: ^Golygu^ ar cubic-bezier.com.\n\nopensource:\n  title: côd agored\n  translate: ^Cyfieithu'r^ wefan i dy iaith di\n"
  },
  {
    "path": "i18n/_da.yml",
    "content": "title: Reference over easing funktioner\ndescription:\n  Gør animationer mere realistiske ved at vælge den rette easing-funktion.\nshare:\n  Easing-funktionen angiver hvordan animationen forløber for at gøre den mere\n  realistisk. Virkelige objekter bevæger sig ikke med\n  en konstant hastighed, og starter og stopper ikke sine bevægelser øjeblikkeligt. Denne side hjælper dig med at finde den rette\n  easing-funktion.\n\nabout: !!format\n  ~Easing-funktionen~ angiver hvordan animationen forløber for at gøre den mere\n  realistisk.\n\n  Objekter begynder ikke at bevæge sig med det samme eller med en konstant\n  hastighed. Når vi åbner en skuffe er første del af bevægelsen hurtig, og så\n  bremser vi den ned. Når noget falder, ryger det ned hurtigere og hurtigere,\n  og så hopper det op igen efter det har ramt gulvet.\n\n  Denne side hjælper dig med at finde den rette easing-funktion.\n\neasings:\n  css: Tilgængelige alle steder\n  js: Kun i JavaScript\n\nhowtos:\n  name: easing-navn\n  curve: easing-funktionens Bezierkurve\n  js: !!code\n    jQuery med ^jQuery Easing Plugin^ er den letteste måde at angive en\n    animation med easing. Kald metoden `.animate` med easing-navnet (f.eks. `easeInCirc`) som tredje argument\n    eller som værdi af `easing`-parametret.\n  scss: !!code\n    Sass/SCSS hjælper dig med at angive animationer. Compass fjerner\n    de nødvendige prefixes før `transition` og `animation` egenskaber, og med\n    ^Compass Ceaser^ plugin kan du sætte easing-funktioner vha. deres navn\n    (uden at angive specifikke Bezierkurver).\n  css: !!code\n    CSS-egenskaberne `transition` og `animation` giver dig mulighed for at vælge\n    en easing-funktion.\n  css_bad:\n    Desværre understøtter de ikke alle easing-funktioner, og du kan blive nødt til\n    at definere dem via Bezier-kurver.\n  css_help:\n    Vælg easing-funktion for at se beskrivelsen sammen med en Bezierkurve.\n\neasing:\n  all_easings: Alle easing-funktioner\n  no_css: !!code\n    Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i\n    JavaScript eller en speciel CSS-animation vha. `@keyframes`.\n  edit: ^Rediger^ på cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Hjælp med at oversætte^ websitet til dit sprog\n"
  },
  {
    "path": "i18n/_es.yml",
    "content": "title: Funciones Easing Guía de Referencia\ndescription:\n  Cree animaciones más realistas escogiendo la función `easing` correcta.\nshare:\n  La función `easing` especifica la velocidad del progreso de la animación\n  para hacerla más realista. El objeto real no comienza su movimiento\n  instantáneamente y de manera constante. Esta página le ayudará a escoger\n  la función deseada.\n\nabout: !!format\n  La ~función easing~ especifica la velocidad de la animación para hacerla\n  más realista.\n\n  El objeto real no comienza su movimiento instantáneamente y de manera constante.\n  Cuando abrimos el cajón, primero le damos aceleración, y después lo frenamos. Cuando\n  algo se cae, primero baja rápidamente y después de alcanzar el suelo rebota.\n\n  Esta página le ayudará a escoger la función deseada.\n\neasings:\n  css: Disponible en todo\n  js: Solo en JavaScript\n\nhowtos:\n  name: nombre easing\n  curve: curva Bézier del easing\n  js: !!code\n    jQuery con ^jQuery Easing Plugin^ es la manera más sencilla de definir una animación\n    con `easing`. Únicamente necesita ajustar el nombre `easing` al método `.animate` como\n    tercer argumento o la key `easing`.\n  scss: !!code\n    Sass/SCSS le ayudan a definir la animación. Compass elimina los prefijos previos a\n    las propiedades `transition` y `animation` y el plugin ^Compass Ceaser^ permite fijar\n    el `easing` por su nombre (sin curvas Bézier).\n  css: !!code\n    Las propiedades CSS `transition` y `animation` le permiten fijar la función `easing`.\n  css_bad:\n    Desgraciadamente, no están todos soportados y deberá fijar la función\n    con Bezier curve.\n  css_help:\n    Seleccione `easing` para mostrar su descripción en la curva Bézier.\n\neasing:\n  all_easings: Todos los easings\n  no_css: !!code\n    Desgraciadamente, CSS no soporta este `easing`. Pero puede utilizarlo con\n    JavaScript o con la propiedad CSS Animation `@keyframes`.\n  edit: ^Editar^ en cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Ayuda a traducir^ esta web a tu idioma\n"
  },
  {
    "path": "i18n/_nb.yml",
    "content": "title: Easing Functions Referanser\ndescription:\n  Easing-funksjonen bestemmer hurtigheten på en animasjon over tid, for å\n  gjøre den mer realistisk. Et ekte objekt begynner ikke bevegelsen umiddelbart\n  med konstant fart. Denne siden vil hjelpe deg med å velge riktig\n  easing-funksjon.\n\nabout: !!format\n  ~Easing-funksjonen~ bestemmer hurtigheten på en animasjon over tid for å gjøre\n  den mer realisitisk.\n\n  Når vi åpner en skuff, gir vi den først akselerasjon, og så senker vi farten.\n  Når noe faller, vil det gå fortere og fortere, og så spretter det tilbake etter\n  at det har truffet bakken.\n\n  Denne siden vil hjelpe deg med å velge riktig easing-funksjon.\n\neasings:\n  css: Tilgjengelig overalt\n  js: Kun i JavaScript\n\nhowtos:\n  name: easing-navn\n  curve: easing’s Bezier kurve\n  js: !!code\n    jQuery med ^jQuery Easing Plugin^ er den letteste måten å forklare animasjon\n    med easing. Du trenger bare å sette easing-navnet til det tredje argumentet,\n    eller `easing` key.\n  scss: !!code\n    Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser\n    før `transition` og `animation` property'ene, og ^Compass Ceaser^ plugin\n    tillater å sette easings etter navn (uten Bezier curves).\n  css: !!code\n    CSS property-ene `transition` og `animation` setter easing-funksjon.\n  css_bad:\n    Dessverre støttes ikke alle easing-funksjonene, så du må sette\n    funksjonene ved hjelp av en Bezier-kurve med bestemte parametere.\n  css_help:\n    Velg easing-funksjon for å se hvordan den kan beskrives som Bezier-kurve.\n\neasing:\n  all_easings: Alle easing-funksjoner\n  no_css: !!code\n   Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med\n   JavaScript eller spesielle CSS Animation `@keyframes`.\n  edit: ^Rediger^ på cubic-bezier.com.\n\nopensource:\n  title: åpen kildekode\n  translate: ^Hjelp til med oversetting^ av siden\n"
  },
  {
    "path": "i18n/_pt.yml",
    "content": "title: Guia de funções de atenuação\ndescription:\n  Faça animações mais realistas utilizando a função de atenuação mais apropriada.\nshare:\n  As funções de atenuação usam a velocidade da animação\n  de modo a tornar o movimento mais natural. Os objectos na vida real não se movem\n  a uma velocidade constance, e não começam e param num instante.\n  Esta página ajudá-lo-á a escolher a melhor função de atenuação.\n\nabout: !!format\n  ~Funções de atenuação~ especificam a variação de um parâmetro\n  ao longo do tempo.\n\n  Os objectos na vida real não começam e param instantaneamente, e quase nunca\n  se movem a uma velocidade constante. Quando abrimos uma gaveta, começamos com um movimento rápido,\n  e vamos abrandando à medida que vamos abrindo. Quando deixamos cair algo, o objecto\n  inicialmente acelera durante a queda, e depois resalta ao atingir o chão.\n\n  Esta página ajudá-lo-á a escolher a melhor função de atenuação.\n\neasings:\n  css: Amplamente disponíveis\n  js: Apenas em JavaScript\n\nhowtos:\n  name: nome da função de atenuação\n  curve: curva de Bezier\n  js: !!code\n    jQuery com o ^jQuery Easing Plugin^ é fácil de descrever\n    a animação com atenuação. Passamos o nome da função (por exemplo `easeInCirc`)\n    para a função `.animate()` como o terceiro argumento, ou usando como o valor\n    da opção `easing`.\n  scss: !!code\n    Sass/SCSS também podem descrever animações! O Compass remove prefixos antes\n    das propriedades `transition` e `animation`, <nobr>e o\n    plugin ^Compass Ceaser^</nobr> permite passar o nome da função de atenuação\n    (sem especificar exactamente as curvas de Bezier).\n  css: !!code\n    As propriedade CSS `transition` e `animation` permitem escolher a função\n    de atenuação.\n  css_bad:\n    Infelizmente, não suportam todas as transições e terá que\n    especificar a função de atenuação desejada (como uma curva Bezier).\n  css_help:\n    Escolha uma função de atenuação para mostrar a notação da curva de Bezier.\n\neasing:\n  all_easings: Todas as atenuações\n  no_css: !!code\n    Não é suportado em CSS. Mas pode usar em JS\n    ou descreva-a com animações `@keyframes` em CSS.\n  edit: ^Editar^ em cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Ajude a traduzir^ para o seu idioma\n"
  },
  {
    "path": "i18n/_sk.yml",
    "content": "title: Ťahák na easing funkcie\ndescription:\n  Tvorte realistickejšie animácie použitím správnych easing funkcií.\nshare:\n  Easing funkcie určujú rýchlosť animácie aby pohyb vyzeral\n  prirodzenejšie. Reálne objekty sa nepohybujú konštantnou\n  rýchlosťou a ich počiatok a koniec je postupný. Táto stránka\n  vám pomôže vybrať správnu easing funkciu.\n\nabout: !!format\n  ~Easing funkcie~ určujú rýchlosť zmeny parametru v priebehu času.\n\n  Reálne objekty sa nepohybujú konštantnou rýchlosťou a ich počiatok\n  a koniec je postupný. Keď otvárame šuflík, z počiatku ho otvárame\n  rýchlo a postupne spomaľujeme. Keď predmet padne na zem, najprv\n  zrýchľuje a po dopade začne skákať.\n\n  Táto stránka vám pomôže vybrať správnu easing funkciu, ktorá najlepšie\n  zodpovedá realite.\n\neasings:\n  css: Dostupné v CSS aj JS\n  js: Len v JavaScripte\n\nhowtos:\n  name: názov easing funkcie\n  curve: Beziérova krivka funkcie\n  js: !!code\n    jQuery s ^jQuery Easing Pluginom^ je najľahší spôsob ako definovať\n    animáciu s easing funkciou. Stačí určiť názov easing funkcie (napr.\n    `easeInCirc`) ako tretí parameter funkcie `.animate()` alebo ho\n    použiť ako hodnotu pre parameter `easing`.\n  scss: !!code\n    Ak popri Sass/SCSS používate aj Compass, nebudete sklamaný. Stačí\n    použiť ^Compass Ceaser^ plugin a ten vám dovolí pre `transition`\n    a `animation` používať len názov easing funkcií namiesto určovania\n    konkretnej Beziérovej krivky.\n  css: !!code\n    CSS vlastnosti `transition` a `animation` vám dovoľujú použiť easing\n    funkcie.\n  css_bad:\n    Bohužiaľ, podporujú len základné easing funkcie a tak niektoré musíte\n    špecifikovať pomocou Beziérovej krivky danej easing funkcie.\n  css_help:\n    Po kliku na vybranú easing funkciu sa zobrazí jej Beziérova krivka.\n\neasing:\n  all_easings: Všetky easing funkcie\n  no_css: !!code\n    Nepodporované v CSS. Ale môžete ju použiť v JS alebo si ju\n    napísať pomocou CSS Animation `@keyframes`.\n  edit: ^Upraviť^ na cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Pomôžte preložiť^ stránku do vášho jazyka\n"
  },
  {
    "path": "i18n/_sr-latn.yml",
    "content": "title: Puškica za izing (easing) funkcije\ndescription:\n  Načinite animaciju realističnijom tako što ćete izabrati pravu izing funkciju.\nshare:\n  Izing (easing) funkcije određuju stopu promene parametra tokom vremena,\n  čineći kretanje realističnije jer objekti u stvarnom životu ne započinju\n  kretanje i ne zaustavljaju se trenutačno. Ova stranica vam pomaže da\n  izaberete pravu izing funkciju.\nfont: 400,700&subset=latin,cyrillic\n\nabout: !!format\n  ~Izing (easing) funkcije~ određuju stopu promene parametra tokom vremena.\n\n  Objekti u stvarnom životu ne započinju kretanje i ne zaustavljaju se\n  trenutačno, i gotovo nikada se ne kreću konstantnom brzinom. Kada otvorimo\n  ladicu, najpre je pomerimo brzo, a usporimo dok izlazi napolje. Ispustite\n  nešto na pod, i ono će prvo da ubrzava na dole, a zatim da se odbije nazad\n  nakon udaranja u pod.\n\n  Ova stranica vam pomaže da izaberete pravu izing funkciju.\n\neasings:\n  css: Dostupno svuda\n  js: Samo u JavaScript-u\n\nhowtos:\n  name: ime izinga\n  curve: Bezijer kriva izing funkcije\n  js: !!code\n    jQuery sa ^jQuery Easing Plugin^-om je najlakši način da se opiše animacija\n    sa izingom. Unesite izing ime (kao što je `easeInCirc`) u `.animate()`\n    funkciju kao treći argument ili upotrebite kao vrednost opcije `easing`.\n  scss: !!code\n    Sass/SCSS može takođe da opiše animacije! Compass uklanja prefikse pre\n    `transition` <nobr>i `animation`</nobr> svojstva, a ^Compass Ceaser^ plugin\n    vam dozvoljava da predate izing funkciju zadatu sa imenom (bez preciziranja\n    tačnih Bezijerovih kriva).\n  css: !!code\n    CSS svojstva `transition` i `animation` dozvoljavaju da izaberete izing\n    funkciju.\n  css_bad:\n    Nažalost, ova svojstva ne podržavaju sve izinge i morate da precizirate\n    željenu izing funkciju sami (kao Bezijerovu krivu).\n  css_help:\n    Izaberite izing funkciju da biste prikazali njenu notaciju kao Bezijerove\n    krive.\n\neasing:\n  all_easings: Sve funkcije\n  no_css: !!code\n    Nažalost, ovakvu izing funkciju nije moguće odrediti u CSS.\n    Koristite JavaScript ili specijalni `@keyframes` u CSS Animation.\n  edit: ^Uredite^ na cubic-bezier.com.\n\nopensource:\n  title: open source\n  translate: ^Pomozite da prevedete^ stranicu na vaš jezik\n\nauthor: Andrej Sitnik\n"
  },
  {
    "path": "i18n/am.yml",
    "content": "version: 2\nlang_code: am\nlang_name: አማርኛ\nrtl: false\n\ntitle: Easing Functions አጋዥ\ndescription: ትክክለኛውን easing function በመምረጥ አኒሜሽኖችን የበለጠ እውነታዊ ያድርጉ።\nshare: Easing functions የአኒሜሽን እንቅስቃሴን የበለጠ ተፈጥሯዊ ለማስመሰል ይጠቅማሉ።\n  እውነተኛ ነገሮች በቋሚ ፍጥነት ብቻ የሚንቀሳቀሱ አይደሉም፣ እናም በቅጽበት ጀምረው በቅጽበት የሚይቆሙ አይደሉም።\n  ይህ ገጽ ትክክለኛውን easing function መምረጥ ያግዝዎታል።\n\nabout: __format\n  ~~Easing functions~~ በጊዜ ሂደት የአንድ parameter የለውጥ መጠንን ይገልጻሉ።\n\n  እውነተኛ ነገሮች በቅጽበት ጀምረው በቅጽበት የሚይቆሙ አይደሉም፣ እናም በቋሚ ፍጥነት በጭራሽ አይንቀሳቀሱም።\n  የልብስ መሳቢያን ስንከፍት መጀመሪያ በፍጥነት እናንቀሳቅሰዋለን፣ በመውጣት ላይ አያለ ግን ፍጥነቱን አንቀንሰዋለን።\n  አንድ ነገር ወደ መሬት ስንጥል በመጀመሪያ ወደታች በፍጥነት ይወርዳል፣ ወለሉን ከነካ በኋላ ግን ነጥሮ ይመለሳል።\n\n  ይህ ገጽ ትክክለኛውን easing function መምረጥ ያግዝዎታል።\n\nhowtos:\n  css:\n    text: CSS ላይ transition እና animation የሚባሉት ንብረቶች easing function ለመግለጽ ያግዛሉ።\n    edit: ^cubic-bezier.com^ ላይ ያስተካክሉ።\n    with_animation: ይህ ተግባር CSS ላይ በ{{@keyframes}} መከናወን ይችላል።\n    example_size: መጠን\n    example_position: ቦታ\n    example_opacity: ግልፅነት\n\n  postcss:\n    text: በPostCSS የeasing function ተግባርን መግለፅ በጣም ቀላል ነው።\n      የtransition መረጃ ከ^cubic-bezier.com^ የሚወስድ ^postcss-easings^ የሚባል plugin አለ።\n\n    explanation: ይህ መግለጫ ከላይ ወደተገለጸው ተቀይሯል።\n    disabled: እንደ አለመታደል ሆኖ easing function በማንኛውም የPostCSS plugin ማዘጋጀት አይቻልም።\n      በ{{@keyframes}} ሊከናወን ይችላል፣ ከላይ ይመልከቱ።\n\n  gradient:\n    name: ግሬዲየንት\n    text: ^postcss-easing-gradients^ በመጠቀም ግሬዲየንት መሳል ይቻላል።\n\n  mathfunction:\n    name: Math function\n    text: ከዚህ በታች ይህ easing function በTypeScript ተጽፎ ያገኛሉ።\n      x የአኒሜሽኑን absolute progress(ግስጋሴ) በ0 (የአኒሜሽኑ መጀመሪያ) እና በ1 (የአኒሜሽኑ መጨረሻ) ይወክላል።\n\neasing:\n  all_easings: ሁሉም easings\n  check: የeasing ለውጦች ይመልከቱ\n  check_size: መጠኖች\n  check_position: ቦታዎች\n  check_opacity: ግልጽነቶች\n  current_func: This function\n  linear_func: Linear function\n  load: በመጫን ላይ...\n\nopensource:\n  title: Open Source\n  translate: ይህን ድህረ ገጽ ወደ ቋንቋዎት መተርጎም ያግዙን\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: እና\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Auto theme\n  light: Light theme\n  dark: Dark theme\n"
  },
  {
    "path": "i18n/ar.yml",
    "content": "version: 2\nlang_code: ar\nlang_name: العربية\nrtl: true\n\ntitle: ورقة غش للـEasing Functions\ndescription:\n  إجعل الحركة أكثر واقعية باختيار ال easing function المناسبة.\nshare:\n  تحدد ال Easing functions سرعة الحركات (animations)\n  لجعل حركتها أكثر واقعية. ففي الواقع، لا تتحرك الأشياء\n  بسرعة ثابتة، و حركتها لا تبدأ أو تنهي لحظياً.\n  هذه الصفحة تساعدك على إختيار ال easing function المناسبة.\n\nabout: __format\n  ~~Easing functions~~ هي دوال تحدد معدل تغيير خاصية أو قيمة مع الزمن.\n\n  الأشياء في الواقع لا تيدأ أو توقف حركتها فجأة، وغالبا لا تتحرك بسرعة ثابتة.\n  عندما نفتح درجاً، فإننا نحركه بسرعة في البداية، ثم ننقص السرعة أثناء خروجه.\n  أسقط شيئا وستراه يتسارع للأسفل، ثم يرتد للأعلى بعد اصطدامه بالأرض.\n\n  هذه الصفحة تساعدك على إختيار ال easing function المناسبة.\n\nhowtos:\n  css:\n    text: في CSS، خصائص ال transition وال animation تسمح لك بتحديد ال easing function.\n    edit: جربها على ^cubic-bezier.com^.\n    with_animation: في CSS، يمكن التعبير عن هذه الدالة بإستعمال {{@keyframes}}\n    example_size: الحجم\n    example_position: الموضع\n    example_opacity: الشفافية\n\n  postcss:\n    text:\n      في PostCSS، التعبير عن هذه الدالة بشكل أسهل بكثير.\n      هناك إضافة ^postcss-easings^ التي تستعمل معلومات ال transition من هذا الموقع.\n    explanation: يتم تحويل هذا التعبير إلى تعبير CSS المذكور أعلاه\n    disabled:\n      للأسف، لا يمكن استعمال هذه الدالة عن طريق إضافة ل PostCSS.\n      لكن بمكن التعبير عنها عن طريق {{@keyframes}}, أنظر أعلاه.\n\n  gradient:\n    name: Gradient\n    text: يمكن رسم gradient بإستخدام ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: دالة رياضية\n    text:\n      بالأسفل يمكنك رؤية كود هذه الدالة بلغة TypeScript.\n      المتغير x يمثل تقدم الحركة\n      بين 0 (بداية الحركة) و 1 (نهاية الحركة).\n\neasing:\n  all_easings: كل ال easings\n  check: جرب ال easing من أجل تغيرات\n  check_size: الحجم\n  check_position: الموضع\n  check_opacity: الشفافية\n  current_func: هذه الدالة\n  linear_func: الدالة الخطية\n  load: تحميل...\n\nopensource:\n  title: مفتوح المصدر\n  translate: ساهم بترجمة هذه الصفحة للغتك\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: و\n  solovev: Ivan Solovev\n\ntheme:\n  auto: مظهر تلقائي\n  light: مظهر فاتح\n  dark: مظهر داكن \n"
  },
  {
    "path": "i18n/bn.yml",
    "content": "version: 2\nlang_code: bn\nlang_name: বাংলা\nrtl: false\n\ntitle: ইজিং ফাংশনের চিট শিট\ndescription: সঠিক ইজিং ফাংশনটি বেছে নিয়ে অ্যানিমেশনগুলিকে আরও বাস্তবসম্মত করে তুলুন।\nshare: ইজিং ফাংশনেরা স্বাভাবিক চলাচলের জন্য এনিমেশনের স্পিড নির্ধারণ করে। সাধারণ জীবনের বস্তুগুলো ধ্রুব গতিতে চলাফেরা করে না, এমনকি মুহূর্তের মধ্যে চলা শুরু বা শেষ করে না। এই পেজটি আপনাকে সঠিক ইজিং ফাংশন বাছাই করতে সাহায্য করবে।\n\nabout: __format\n  ~~ইজিং ফাংশন~~ সময়ের সাথে সাথে একটি প্যারামিটারের পরিবর্তনের হার নির্দিষ্ট করে\n\n  বাস্তব জীবনের বস্তুগুলো কখনোই চলাচল শুরু বা শেষ মুহূর্তের মধ্যেই শেষ করে না, এবং কখনোই ধ্রুব গতিতে চলে না। যখন আমরা একটি ড্রয়ার খুলি, আমরা প্রথমে এটি দ্রুত টেনে নিই, এবং যখন এটি বেরিয়ে আসে তখন এটির গতি কমিয়ে দেই। মেঝেতে কিছু একটা ফেলে দিলে সেটা প্রথমে নিচের দিকে বেগ পাবে, এবং তারপর মেঝেতে আঘাত করার পর আবার উপরে উঠে আসবে।\n\n  এই পেজটি আপনাকে সঠিক ইজিং ফাংশন বাছাই করতে সাহায্য করবে।\n\nhowtos:\n  css:\n    text: CSS এ, transition এবং animation প্রোপার্টিগুলো আপনাকে একটি ইজিং ফাংশন নির্ধারণ করতে দেয়।\n    edit: এডিট করুন ^cubic-bezier.com^ এ.\n    with_animation: CSS এ, এই ফাংশনটি ব্যাবহার করা যাবে {{@keyframes}} ইমপ্লিমেন্ট করর মাধ্যমে \n    example_size: আকার\n    example_position: অবস্থান\n    example_opacity: স্বচ্ছতা\n\n  postcss:\n    text: PostCSS এ ইজিং ফাংশনটি বর্ণনা করা অনেক সহজ।.\n      ^postcss-easings^ নামে একটি প্লাগইন আছে যা সেই সাইট থেকে ট্রানজিশনের তথ্য নেয়।\n    explanation: সেই ঘোষণাটি উপরে বর্ণিত বর্ণনায় রূপান্তরিত হয়েছে।\n    disabled:\n      দুর্ভাগ্যবশত, কোনও PostCSS প্লাগইন দিয়ে ইজিং ফাংশন সেট করা যাবে না।\n      এটা করা যাবে {{@keyframes}} এর মাধ্যমে, উপরে দেখুন \n\n  gradient:\n    name: গ্রেডিয়েন্ট\n    text: ^postcss-easing-gradients^ ব্যবহার করে একটি গ্রেডিয়েন্ট আঁকা সম্ভব।\n\n  mathfunction:\n    name: গাণিতিক ফাংশন \n    text: নিচে আপনি টাইপস্ক্রিপ্টে লেখা এই ইজিং ফাংশনের কোড দেখতে পাবেন।\n      চলক x অ্যানিমেশনের পরম অগ্রগতিকে প্রতিনিধিত্ব করে 0 (অ্যানিমেশনের শুরু) এবং 1 (অ্যানিমেশনের শেষ) এর সীমানায়।\n\neasing:\n  all_easings: সব ইজিং\n  check: পরিবর্তনের জন্য ইজিং চেক করুন \n  check_size: আকার\n  check_position: অবস্থান\n  check_opacity: স্বচ্ছতা\n  current_func: This ফাংশন\n  linear_func: রৈখিক ফাংশন\n  load: লোড হচ্ছে...\n\nopensource:\n  title: ওপেন সোর্স\n  translate: আপনার ভাষায় সাইটটি অনুবাদ করতে সাহায্য করুন\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: এবং\n  solovev: Ivan Solovev\n\ntheme:\n  auto: অটো থিম\n  light: লাইট থিম\n  dark: ডার্ক থিম\n"
  },
  {
    "path": "i18n/de.yml",
    "content": "version: 2\nlang_code: de\nlang_name: Deutsch\nrtl: false\n\ntitle: Cheat Sheet für Easing-Funktionen\ndescription:\n  Finde passende Übergangsfunktionen (easing functions) und erstelle realistischere Animationen.\nshare:\n  Übergangsfunktionen (engl. easing functions) bestimmen den Geschwindigkeitsverlauf\n  einer Animation, um diese natürlicher wirken zu lassen. Denn reale Gegenstände bewegen sich selten\n  ruckartig oder mit konstanter Geschwindigkeit.\n  Diese Seite hilft Dir, die passende Übergangsfunktionen zu finden.\n\nabout: __format\n  ~~Übergangsfunktionen~~ <i>(engl. easing functions)</i> bestimmen\n  die Änderungsrate eines Parameters im Verlauf der Zeit.\n\n  Gegenstände in der Realität bewegen sich selten ruckartig oder mit konstanter Geschwindigkeit.\n  Öffnen wir eine Schublade, dann ziehen wir erst stark und bremsen diese Bewegung dann ab.\n  Lassen wir einen Ball fallen, wird er zunächst zum Boden hin beschleunigen, um dann vom Boden abzuspringen.\n\n  Diese Seite hilft Dir, passende Übergangsfunktionen zu finden.\n\nhowtos:\n  css:\n    text: In CSS können Übergangfunktionen in den 'transition'- und 'animation'-Properties eingestellt werden.\n    edit: Auf ^cubic-bezier.com^ bearbeiten.\n    with_animation: In CSS kann diese Funktion via {{@keyframes}} implementiert werden\n    example_size: Größe\n    example_position: Position\n    example_opacity: Transparenz\n\n  postcss:\n    text:\n      In PostCSS lässt sich diese Übergangsfunktion weitaus einfacher nutzen.\n      Das Plugin ^postcss-easings^ nutzt die Definitionen der Übergangsfunktionen dieser Seite.\n    explanation: Diese Deklaration wird später in die oben gezeigte umgewandelt.\n    disabled:\n      Diese Funktion kann leider mit keinem PostCSS-Plugin gesetzt werden.\n      Die Verwending von {{@keyframes}} ist jedoch möglich. Siehe oben.\n\n  gradient:\n    name: Gradient\n    text: Mit ^postcss-easing-gradients^ ist es möglich, Gradienten darzustellen.\n\n  mathfunction:\n    name: Berechnungsfunktion\n    text:\n      Untenstehend ist eine Beispielimplementierung dieser Übergangsfunktion in TypeScript dargestellt.\n      Die Variable x repräsentiert den Fortschritt des Übergangs in den Grenzen von\n      0 (Start des Übergangs) bis 1 (Ende des Übergangs).\n\neasing:\n  all_easings: Alle Übergangsfunktionen\n  check: Animation mit dieser Funktion vergleichen für\n  check_size: Größe\n  check_position: Position\n  check_opacity: Transparenz\n  current_func: Diese Funktion\n  linear_func: Lineare Funktion\n  load: Lade...\n\nopensource:\n  title: Open Source\n  translate: Hilf dabei, diese Seite in Deine Sprache zu übersetzen\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: und\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Automatisches Theme\n  light: Helles Theme\n  dark: Dunkles Theme\n"
  },
  {
    "path": "i18n/el-gr.yml",
    "content": "version: 2\nlang_code: el-GR\nlang_name: Greek\nrtl: false\n\ntitle: Σκονάκι μεθόδων ομαλής μετάβασης (easing function)\ndescription:\n  Κάντε τα κινούμενα εφέ (animations) πιο ρεαλιστικά επιλέγοντας την καταλληλότερη μέθοδο ομαλής μετάβασης. \nshare:\n  Οι μέθοδοι ομαλής μετάβασης υποδεικνύουν τον ρυθμό μεταβολής των κινουμένων εφέ\n  ώστε να κάνουν τις αλλαγές να φαίνονται πιο φυσικές. Τα αντικείμενα στον φυσικό\n  κόσμο δεν κινούνται με σταθερή ταχύτητα, και δεν ξεκινούν ή σταματούν αστραπιαία. \n  Αυτή η σελίδα σας βοηθάει να διαλέξετε την καταλληλότερη μέθοδο ομαλής μετάβασης. \n\nabout: __format\n  Οι ~~μέθοδοι ομαλής μετάβασης~~ υποδεικνύουν τον ρυθμό μεταβολής μιας παραμέτρου\n  με το πέρασμα του χρόνου.\n\n  Τα αντικείμενα στον φυσικό κόσμο δεν ξεκινούν ή σταματούν αστραπιαία, και σχεδόν ποτέ\n  κινούνται με σταθερή ταχύτητα. Όταν ανοίγουμε ένα συρτάρι, πρώτα το τραβάμε γρήγορα,\n  και έπειτα επιβραδύνουμε καθώς βγαίνει. Αν ρίξουμε κάτι στο πάτωμα, πρώτα θα επιτυχαύνει\n  κατά την πτώση, και μετά θα αναπηδήσει προς τα επάνω αφού συγκρουστεί με το πάτωμα. \n\n  Αυτή η σελίδα σας βοηθάει να διαλέξετε την καταλληλότερη μέθοδο ομαλής μετάβασης (easing function).\n\nhowtos:\n  css:\n    text: Στη CSS, οι ιδιότητες transition και animation σας επιτρέπουν να προσδιορίσετε μια μέθοδο ομαλής μετάβασης.\n    edit: Επεξεργαστείτε στο ^cubic-bezier.com^.\n    with_animation: Στη CSS, μπορείτε να χρημοποιήσετε αυτή τη μέθοδο εντός {{@keyframes}}\n    example_size: Μέγεθος\n    example_position: Θέση\n    example_opacity: Διαφάνεια\n\n  postcss:\n    text:\n      Στην PostCSS, είναι πιο εύκολο να περιγράψουμε τη μέθοδο ομαλής μετάβασης.\n      Υπάρχει ένα πρόσθετο (plugin), ^postcss-easings^, το οποίο παίρνει πληροφορίες\n      μετάβασης από εκείνον τον ιστότοπο.\n    explanation: Η δήλωση αυτή μετατρέπεται σε αυτήν που περιγράφεται παραπάνω.\n    disabled:\n      Δυστυχώς, αυτή η μέθοδος ομαλής μετάβασης δεν μπορεί να εφαρμοστεί με το PostCSS πρόσθετο.\n      Εναλλακτικά μπορείτε να χρησιμοποιήσετε τη μέθοδο {{@keyframes}}, βλέπε παραπάνω.\n\n  gradient:\n    name: Διαβάθμιση\n    text: Είναι δυνατόν να ζωγγραφίσετε μια διαβάθμιση χρησιμοποιόντας το πρόσθετο ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Μαθηματική συνάρτηση\n    text:\n      Παρακάτω βλέπετε τον κώδικα αυτής της μεθόδου ομαλής μετάβασης γραμμένο σε TypeScript.\n      Η μεταβλητή x αντιπροσωπεύει την (απόλυτη) πρόοδο του κινουμένου εφέ στο εύρος από το\n      0 (αρχή του εφέ) μέχρι το 1 (τέλος εφέ).\n\neasing:\n  all_easings: Όλες οι μέθοδοι ομαλής μετάβασης\n  check: Συγκρίνετε τις αλλαγές με/χωρίς μέθοδους ομαλής μετάβασης για\n  check_size: Μέγεθος\n  check_position: Θέση\n  check_opacity: Διαφάνεια\n  current_func: Αυτή η μέθοδος\n  linear_func: Γραμμική μέθοδος\n  load: Φορτώνει...\n\nopensource:\n  title: Ανοιχτός Κώδικας\n  translate: Βοηθήστε στη μετάφραση αυτής της ιστοσελίδας στη γλώσσα σας\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: και\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Auto theme\n  light: Light theme\n  dark: Dark theme\n"
  },
  {
    "path": "i18n/en.yml",
    "content": "version: 2\nlang_code: en\nlang_name: English\nrtl: false\n\ntitle: Easing Functions Cheat Sheet\ndescription:\n  Make animations more realistic by picking the right easing function.\nshare:\n  Easing functions specify the speed of animation\n  to make the movement more natural. Real objects don’t just move\n  at a constant speed, and do not start and stop in an instant.\n  This page helps you choose the right easing function.\n\nabout: __format\n  ~~Easing functions~~ specify the rate of change of a parameter\n  over time.\n\n  Objects in real life don’t just start and stop instantly, and almost never\n  move at a constant speed. When we open a drawer, we first move it quickly,\n  and slow it down as it comes out. Drop something on the floor, and it will\n  first accelerate downwards, and then bounce back up after hitting the floor.\n\n  This page helps you choose the right easing function.\n\nhowtos:\n  css:\n    text: In CSS, the transition and animation properties allow you to specify an easing function.\n    edit: Edit on ^cubic-bezier.com^.\n    with_animation: In CSS, this function can be implemented using {{@keyframes}}\n    example_size: Size\n    example_position: Position\n    example_opacity: Transparency\n\n  postcss:\n    text:\n      In PostCSS, the easing function is much easier to describe.\n      There is a plugin ^postcss-easings^ that takes the transition information from that site.\n    explanation: That declaration is converted to the one described above.\n    disabled:\n      Unfortunately, the easing function cannot be set with any PostCSS plugin.\n      Can be done with {{@keyframes}}, see above.\n\n  gradient:\n    name: Gradient\n    text: It is possible to draw a gradient using ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Math function\n    text:\n      Below you see the code of this easing function written in TypeScript.\n      The variable x represents the absolute progress of the animation\n      in the bounds of 0 (beginning of the animation) and 1 (end of animation).\n\neasing:\n  all_easings: All easings\n  check: Check easing for changes\n  check_size: Sizes\n  check_position: Positions\n  check_opacity: Transparencies\n  current_func: This function\n  linear_func: Linear function\n  load: Loading...\n\nopensource:\n  title: Open Source\n  translate: Help translate site to your language\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: and\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Auto theme\n  light: Light theme\n  dark: Dark theme\n"
  },
  {
    "path": "i18n/es-mx.yml",
    "content": "version: 2\nlang_code: es-mx\nlang_name: Español\nrtl: false\n\ntitle: Acordeón de Funciones de Suavizado\ndescription:\n  Hacer animaciones más realistas eligiendo la función de suavizado adecuada.\nshare:\n  Las functiones de suavizado especifican la velocidad de la animación\n  para hacer el movimiento más natural. Los objetos reales solo no se mueven\n  a una velocidad constante, y no arrancan y se detienen en un instante.\n  Esta página te ayuda a elegir la función de suavizado correcta.\n\nabout: __format\n  ~~Las funciones de suavizado~~ especifican la razón de cambio de un parámetro\n  sobre el tiempo.\n\n  En la vida real, los objetos no se inician ni se detienen por sí solos instantáneamente, \n  y casi nunca se mueven a una velocidad constante. Por ejemplo, cuando abrimos un cajón, \n  el movimiento de jale o apertura se hace rápidamente al principio, y conforme dicho cajón\n  sale, el movimiento se hace más despacio. También; si se deja caer un objeto al piso, \n  este primero se acelera hacia abajo hasta golpear el piso y luego rebota de vuelta hacia arriba.\n\n  Esta página te ayuda a elegir la función de suavizado correcta para usar en animaciones con CSS.\n\nhowtos:\n  css:\n    text: En CSS, las propiedades 'transition' y 'animation' te permiten especificar una función de suavizado.\n    edit: Editar en ^cubic-bezier.com^.\n    with_animation: En CSS, esta función puede ser implementada usando {{@keyframes}}\n    example_size: Tamaño\n    example_position: Posición\n    example_opacity: Transparencia\n\n  postcss:\n    text:\n      En PostCSS, la función de suavizado es mucho más fácil de describir.\n      Existe un plugin ^postcss-easings^ que toma la información de transición\n      de ese sitio.\n    explanation: Tal declaración es convertida a la que es descrita arriba.\n    disabled:\n      Desafortunadamente, la función de suavizado no puede ser establecida con\n      ningún plugin PostCSS. Puede hacerse con {{@keyframes}}, ver arriba.\n\n  gradient:\n    name: Gradiente\n    text: Es posible dibujar un degradado usando ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Función Matemática\n    text:\n      Abajo verás el código de esta función de suavizado escrito en TypeScript.\n      La variable x representa el progreso absoluto de la animación\n      en los límites de 0 (inicio de la animación) y 1 (fin de la animación).\n\neasing:\n  all_easings: Todos los suavizados\n  check: Comprobar suavizado por cambios\n  check_size: de Tamaño\n  check_position: Posiciones\n  check_opacity: Transparencias\n  current_func: Functión actual\n  linear_func: Función linear\n  load: Cargando...\n\nopensource:\n  title: Open Source\n  translate: Ayuda a traducir el sitio a tu idioma\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: e\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Tema auto\n  light: Tema claro\n  dark: Tema oscuro\n"
  },
  {
    "path": "i18n/fa-ir.yml",
    "content": "version: 2\nlang_code: fa-ir\nlang_name: فارسی\nrtl: true\n\ntitle: برگه تقلب توابع Easing\ndescription: \n  با انتخاب تابع Easing درست انیمیشن‌های طبیعی‌تری بسازید.\nshare: \n  توابع Easing سرعت انیمیشن را مشخص می‌کنند تا حرکت طبیعی‌تری داشته باشند. در دنیای واقعی اشیا با سرعت ثابتی حرکت نمی‌کنند و حرکتشان در یک لحظه شروع و متوقف نمی‌شود.این صفحه به شما کمک می‌کند تا Easing مناسب را برای انیمیشن خود انتخاب کنید.\n\nabout: __format\n  ~~توابع Easing~~ نرخ تغییر یک پارامتر را در طی زمان تعیین می‌کنند\n  \n  حرکت اشیا در دنیای واقعی به طور ناگهانی شروع و متوقف نمی‌شود و تقریبا هیچگاه با سرعت ثابت حرکت نمی‌کنند. هنگامی که یک کشو را باز می‌کنیم، ابتدا آن را به سرعت حرکت می‌دهیم، و سپس همینطور که بیرون می‌آید سرعت آن را کمتر می‌کنیم. اگر جسمی را از ارتفاعی رها کنید، سرعت آن حین حرکت به سمت زمین افزایش پیدا می‌کند و پس از برخورد با زمین دوباره به بالا می‌جهد.\n\n  این صفحه به شما کمک می‌کند تا تابع Easing مناسب را انتخاب کنید.\n\nhowtos:\n  css:\n    text: در CSS، پراپرتی‌های transition و animation به شما اجازه می‌دهند تا یک تابع Easing را مشخص کنید.\n    edit: در ^cubic-bezier.com^ ویرایش کنید.\n    with_animation: در CSS می‌توانید این تابع را به کمک  {{@keyframes}} پیاده سازی کنید.\n    \n    example_size: اندازه\n    example_position: موقعیت\n    example_opacity: شفافیت\n\n  postcss:\n    text:\n      در PostCSS، توصیف تابع Easing بسیار آسان‌تر است. پلاگینی به نام ^postcss-easings^ وجود دارد که اطلاعات جا به جایی را از همان سایت دریافت می‌کند.\n\n    explanation: اعلان بالا به تابع بالا تبدیل می‌شود.\n    disabled:\n      متاسفانه پلاگینی برای استفاده از این تابع Easing وجود ندارد. امکان پیاده سازی با استفاده از {{@keyframes}} وجود دارد. بالا را نگاه کنید.\n\n  gradient:\n    name: گرادینت\n    text: امکان ترسیم گرادینت با استفاده از ^postcss-easing-gradients^ وجود دارد.\n\n  mathfunction:\n    name: تابع ریاضی\n    text: در پایین کد این تابع Easing را به زبان TypeScript می‌بینید. متغیر x پیشرفت مطلق انیمیشن را نشان می‌دهد. دامنه متغیر x بین 0 (شروع انیمیشن) و 1 (پایان انیمیشن) است.\n\neasing:\n  all_easings: همه Easingها\n  check: این تابع Easing را برای تغییرات زیر بررسی کنید\n  check_size: اندازه‌ها\n  check_position: موقعیت‌ها\n  check_opacity: شفافیت‌ها\n  current_func: این تابع\n  linear_func: تابع خطی\n  load: در حال بارگذاری...\n\nopensource:\n  title: منبع باز\n  translate: کمک کنید این وبسایت به زبان شما ترجمه شود.\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: و\n  solovev: Ivan Solovev\n\ntheme:\n  auto: تم خودکار\n  light: تم روشن\n  dark: تم تاریک\n"
  },
  {
    "path": "i18n/fr.yml",
    "content": "version: 2\nlang_code: fr\nlang_name: Français\nrtl: false\n\ntitle: Antisèche pour les courbes d'accélérations (easing functions)\ndescription:\n  Faites des animations plus réalistes en utilisant les bonnes courbes d'accélérations.\nshare:\n  Les courbes d'accélérations (easing functions) décrivent la vitesse d'une animation pour rendre le mouvement plus naturel.\n  Dans la vie, les objets ne se déplacent pas à une vitesse constante, tout comme ils ne s'arrêtent pas instantanément.\n  Cette page vous aide à choisir les bonnes courbes d'accélérations.\n\nabout: __format\n  ~~Les courbes d'accélérations (easing functions)~~ décrivent la vitesse à laquelle un paramètre change en fonction du temps.\n\n  Dans la vie, les objets ne se déplacent pas instantanément et ne bougent pratiquement jamais à vitesse constante.\n  Lorsque nous ouvrons un tiroir, nous le déplaçons d'abord rapidement puis de plus en plus lentement jusqu'à ce qu'il soit complètement ouvert.\n  Lorsque que nous faisons tomber quelque chose au sol, il va premièrement accélérer vers le sol puis rebondir.\n\n  Cette page vous aide à choisir les bonnes courbes d'accélérations.\n\nhowtos:\n  css:\n    text: En CSS, les propriétés de transition ou d'animation vous permettent de définir une courbe d'accélération.\n    edit: Modifier sur ^cubic-bezier.com^.\n    with_animation: En CSS, cette courbe peut être implémentée en utilisant les {{@keyframes}}\n    example_size: Taille\n    example_position: Position\n    example_opacity: Transparence\n\n  postcss:\n    text:\n      En PostCSS, la courbe d'accélération est bien plus simple à décrire.\n      Il y a un plugin ^postcss-easings^ qui prend les informations de transition depuis ce site.\n    explanation: Cette déclaration est convertie par celle décrite plus haut.\n    disabled:\n      Malheureusement, cette courbe d'accélération ne peut pas être définie avec tous les plugins PostCSS.\n      Cela peut être réalisé avec les {{@keyframes}}, pour plus d'informations, regardez plus haut.\n\n  gradient:\n    name: Dégradé\n    text: Il est possible de dessiner un dégradé en utilisant ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Fonction mathématique\n    text:\n      Vous voyez ci-dessous le code de cette fonction d'accélération écrit en TypeScript.\n      La variable x représente la progression de l'animation\n      dans une plage variant de 0 (début de l'animation) à 1 (fin de l'animation).\n\neasing:\n  all_easings: Toutes les accélérations\n  check: Testez cette fonction\n  check_size: Taille\n  check_position: Position\n  check_opacity: Transparence\n  current_func: Fonction sélectionnée\n  linear_func: Fonction linéaire\n  load: Chargement...\n\nopensource:\n  title: Open Source\n  translate: Aidez-nous à traduire ce site dans votre langue\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: et\n  solovev: Ivan Soloviev\n\ntheme:\n  auto: Thème par défaut\n  light: Thème clair\n  dark: Thème sombre\n"
  },
  {
    "path": "i18n/he.yml",
    "content": "version: 2\nlang_code: he\nlang_name: עיברית\nrtl: true\n\ntitle: פונקציית הריכוך (Easing Functions)\ndescription:\n  הפוך את האנימציה ליותר מציאותית על ידי בחירת פונקציית הריכוך הנכונה.\nshare:\n  פונקציית הריכוך (Easing Functions) קובע את מהירות של האנימציה, כך שהיא נראת יותר מציאותית\n  באתר הזה ניתן לראות איך אמורה להיראות עקומה, כך שאובייקט יזוז יותר טבעי וכמה שיותר קרוב למציאות\n\nabout: __format\n  ~~ פונקציית הריכוך (Easing Functions)~~ קובעת את מהירות תזוזה באנימצייה\n\n  דברים אמיתיים לא מתחילים לנוע באופן מיידי ובמהירות קבועה.\n  כשפותחים מגירה, ראשית אנו מאיצים אותה ואז מאיטים.\n  וכאשר הכדור נופל הוא מאיץ כל הזמן, ואחרי שפוגע ברצפה הוא קופץ מעט, עד שעוצר\n\n  האתר הזה יעזור לך למצוא את הפונקצייה שמתאימה לך\n\nhowtos:\n  css:\n    text: ב- CSS, מאפייני המעבר וההנפשה מאפשרים לך לציין פונקציית הקלה.\n    edit: לערוך ב ^cubic-bezier.com^.\n    with_animation: ב- CSS ניתן ליישם פונקציה זו עם {{@keyframes}}\n    example_size: גודל\n    example_position: עמדה\n    example_opacity: שקיפות\n\n  postcss:\n    text:\n      ב- PostCSS להישתמש בפונקצייה פשוט יותר.\n      יש פלגין ^postcss-easings^, שלוקח מידע מהאתר הזה.\n    explanation: הצהרה זו מומרת לזו שתוארה לעיל.\n    disabled:\n      למרבה הצער, לא ניתן להגדיר פונקציית החלקה זו באמצעות תוסף כלשהו PostCSS.\n      ניתן לעשות זאת עם {{@keyframes}}.\n\n  gradient:\n    name: מדרון צבעים\n    text: אפשר לצייר שיפוע עם ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: פונקציית מתמטיקה\n    text:\n      להלן מופיע הקוד לפונקציית המעבר שנכתב TypeScript.\n      משתנה X זו התקדמות של האנימציה, איפה ש 0 זה תחילת אנימציה ו 1 – זה סופה\n\neasing:\n  all_easings: כל הפונקציות\n  check: לבדוק את השינוי של האטה\n  check_size: גודל\n  check_position: מיקום\n  check_opacity: שקיפות\n  current_func: פונקציה נוככית\n  linear_func: פונקציה לינארית\n  load: טעינה...\n\nopensource:\n  title: Open Source\n  translate: Help translate site to your language\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: and\n  solovev: Ivan Solovev\n\ntheme:\n  auto: אוטומטי\n  light: בצבע בהיר\n  dark: צבע קהה\n"
  },
  {
    "path": "i18n/hi.yml",
    "content": "version: 2\nlang_code: hi\nlang_name: हिन्दी\nrtl: false\n\ntitle: ईजिंग फंक्शन प्रवंचक पत्रक\ndescription:\n  सही ईजिंग फंक्शन को चुनकर एनिमेशन को अधिक स्वाभाविक बनाएं।\nshare:\n  ईजिंग फंक्शन एनिमेशन की गति निर्दिष्ट करते हैं\n  गति को और अधिक स्वाभाविक बनाने के लिए। वास्तविक वस्तुएं केवल स्थिर\n  गति से नहीं चलती, और एक पल में शुरू और बंद नहीं होती।\n  यह पेज आपको सही ईजिंग फंक्शन चुनने में मदद करता है।\n\nabout: __format\n  ~~ईजिंग फंक्शन~~ एक पैरामीटर के परिवर्तन की दर निर्दिष्ट करें\n  अधिक समय तक।\n\n  वास्तविक वस्तुएं एक पल में शुरू और बंद नहीं होती।, और स्थिर\n  गति से नहीं चलती। जब हम एक दराज खोलते हैं, तो हम पहले उसे जल्दी से घुमाते हैं,\n  और जैसे ही यह बाहर आता है इसे धीमा कर देते है। फर्श पर कुछ गिरा दो, और यह होगा\n  पहले नीचे की ओर गति करेंगा, और फिर फर्श से टकराने के बाद वापस ऊपर की ओर उछालेंगा।\n\n  यह पेज आपको सही ईजिंग फंक्शन चुनने में मदद करता है।\n\nhowtos:\n  css:\n    text: CSS में, ट्रांज़िशन और ऐनिमेशन गुण आपको एक सहजता फ़ंक्शन निर्दिष्ट करने की अनुमति देते हैं।\n    edit: संपादित करें ^cubic-bezier.com^.\n    with_animation: CSS में, इस फ़ंक्शन का उपयोग करके कार्यान्वित किया जा सकता है {{@keyframes}}\n    example_size: आकार\n    example_position: स्थान\n    example_opacity: पारदर्शिता\n\n  postcss:\n    text:\n      PostCSS में, ईजिंग फंक्शन का वर्णन करना बहुत आसान है।\n      एक प्लगइन ^postcss-easings^ है जो उस साइट से संक्रमण की जानकारी लेता है।\n    explanation: उस घोषणा को ऊपर वर्णित एक में बदल दिया गया है।\n    disabled:\n      दुर्भाग्य से, ईज़िंग फ़ंक्शन को किसी भी PostCSS प्लगइन के साथ सेट नहीं किया जा सकता है।\n      {{@keyframes}} के साथ किया जा सकता है, ऊपर देखें।\n\n  gradient:\n    name: ढाल\n    text: का उपयोग करके एक ढाल खींचना संभव है ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: गणित समारोह\n    text:\n      नीचे आप टाइपस्क्रिप्ट में लिखे इस ईजिंग फंक्शन का कोड देख सकते हैं।\n      चर x एनीमेशन की पूर्ण प्रगति का प्रतिनिधित्व करता है\n      0 (एनीमेशन की शुरुआत) और 1 (एनीमेशन का अंत) की सीमा में।\n\neasing:\n  all_easings: सभी ईजिंग\n  check: परिवर्तनों के लिए ईजिंग की जाँच करें\n  check_size: आकार\n  check_position: स्थान\n  check_opacity: पारदर्शिता\n  current_func: यह फंक्शन\n  linear_func: रैखिक फंक्शन\n  load: लोड हो रहा है...\n\nopensource:\n  title: ओपन सोर्स\n  translate: साइट को अपनी भाषा में अनुवाद करने में सहायता करें\n\nauthors:\n  sitnik: एंड्री सिटनिक\n  separator: और\n  solovev: इवान सोलोवेव\n\ntheme:\n  auto: ऑटो थीम\n  light: लाइट थीम\n  dark: डार्क थीम\n"
  },
  {
    "path": "i18n/hu.yml",
    "content": "version: 2\nlang_code: hu\nlang_name: Magyar\nrtl: false\n\ntitle: Átmeneti Függvények Gyűjteménye\ndescription:\n  Animációk valósághűbbé tétele a megfelelő átmeneti függvénnyel (easing functions).\nshare:\n  Átmeneti függvények (easing functions) meghatározzák az animációnak a gyorsaságát, a természetesebb hatás élérése érdekében.\n  A valós tárgyak sem csak állandó sebességgel mozognak, nem indulnak, nem állnak meg hirtelen.\n  Ez az oldal segít a megfelelő átmeneti függvények kiválasztásában.\n\nabout: __format\n  ~~Átmeneti függvények (easing functions)~~ meghatározzák egy paraméter időbeli változásának mértékét.\n\n  A valódi tárgyak sem csak állandó sebességgel mozognak, nem indulnak, nem állnak meg hirtelen, azonnal.\n  A fiók kinyitásakor is először gyorsuló mozgással húzzunk, majd fokozatosan lassítjuk addig amíg teljes egészében kijön.\n  Bármilyen tárgyat ledobunk a padlóra, először lefelé kezd el gyorsulni, majd a padlóra érkezés után, (ruganyos test esetén) visszaugrik.\n\n  Ez az oldal segít a megfelelő átmeneti függvény kiválasztásában.\n\nhowtos:\n  css:\n    text: A CSS-ben az átmenetnek és az animációnak a tulajdonságai lehetővé teszik az átmeneti függvény meghatározását.\n    edit: Szerkesztés a ^cubic-bezier.com^ oldalán.\n    with_animation: CSS-ben az átmeneti függvények a {{@keyframes}} használatával érhetőek el\n    example_size: Méret\n    example_position: Pozíció\n    example_opacity: Átlátszóság\n\n  postcss:\n    text:\n      A PostCSS-ben az átmeneti függvényeket könnyebb használni, leírni.\n      Ehhez létezik egy ^postcss-easings^ plugin, amely tartalmazza az átmeneti információkat erről az oldalról\n    explanation: Ezt a meghatározást a PostCSS átalakítja a fent leírtakhoz\n    disabled:\n      Sajnos, ez az átmeneti függvény nem érhető el semmilyen PostCSS pluginban\n      Az átmenet a {{@keyframes}} használatával elvégezhető, lásd fentebb\n\n  gradient:\n    name: Színátmenet\n    text: Lehetőség van színátmenet létrehozására a ^postcss-easing-gradients^ segítségével.\n\n  mathfunction:\n    name: Math function\n    text:\n      Below you see the code of this easing function written in TypeScript.\n      The variable x represents the absolute progress of the animation\n      in the bounds of 0 (beginning of the animation) and 1 (end of animation).\n\neasing:\n  all_easings: Összes átmenet\n  check: Átmenetek előnézete\n  check_size: Méret\n  check_position: Pozíció\n  check_opacity: Átlátszóság\n  current_func: Jelenlegi átmenet\n  linear_func: Lineáris átmenet\n  load: Betöltés...\n\nopensource:\n  title: Nyílt forrású\n  translate: Segíts lefordítani ezt az oldalt a saját nyelvedre\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: és\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Automatikus téma\n  light: Világos téma\n  dark: Sötét téma\n"
  },
  {
    "path": "i18n/id.yml",
    "content": "version: 2\nlang_code: id\nlang_name: Bahasa Indonesia\nrtl: false\n\ntitle: Contekan Fungsi Easing\ndescription:\n  Jadikan animasi lebih realistis dengan memilih fungsi easing yang tepat.\nshare:\n  Fungsi easing digunakan untuk menentukan kecepatan animasi\n  untuk menjadikan gerakan yang lebih alami. Benda nyata tidak bergerak pada\n  kecepatan konstan, tidak bergerak dan tidak juga berhenti dalam sekejap.\n  Halaman ini membantu anda memilih fungsi easing yang tepat.\n\nabout: __format\n  ~~Fungsi easing~~ menentukan laju perubahan sebuah parameter dari waktu\n  ke waktu.\n\n  Objek pada kehidupan nyata tidak bergerak dan berhenti dalam sekejap, dan\n  hampir tidak pernah bergerak pada kecepatan konstan. Ketika kita membuka laci,\n  pertama kita lakukan secara cepat lalu pelan setelah hampir keluar.\n  Menjatuhkan benda ke lantai, pertama akan ke bawah kemudian memantul kembali.\n\n  Halaman ini membantu anda memilih fungsi easing yang tepat.\n\nhowtos:\n  css:\n    text: Di CSS, properti transisi dan animasi memungkinkan anda untuk memilih menentukan fungsi easing.\n    edit: Ubah di ^cubic-bezier.com^.\n    with_animation: Di CSS, fungsi ini dapat diimplementasikan dengan {{@keyframes}}\n    example_size: Ukuran\n    example_position: Posisi\n    example_opacity: Transparansi\n\n  postcss:\n    text:\n      Di PostCSS, fungsi easing ini lebih mudah digunakan. \n      Terdapat plugin ^postcss-easings^ yang memudahkan untuk mengambil informasi tentang transisi dari website tersebut.\n    explanation: Deklarasinya diubah menjadi seperti diatas ini.\n    disabled:\n      Sayangnya, fungsi easing ini tidak dapat digunakan dengan PostCSS plugin apapun.\n      Tetapi dapat diselesaikan dengan {{@keyframes}}, lihat diatas.\n\n  gradient:\n    name: Gradien\n    text: Memungkinkan untuk membuat gradien dengan menggunakan ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Fungsi matematika\n    text:\n      Dibawah ini kamu melihat kode untuk fungsi easing ini yang ditulis dengan TypeScript.\n      Variabel x merepresentasikan proses animasi yang absolut\n      diantara 0 (awal dari animasi) dan 1 (akhir dari animasi).\n\neasing:\n  all_easings: Semua easings\n  check: Cek perubahan easing\n  check_size: Ukuran\n  check_position: Posisi\n  check_opacity: Transparansi\n  current_func: Fungsi ini\n  linear_func: Fungsi linear\n  load: Memuat...\n\nopensource:\n  title: Sumber Terbuka\n  translate: Bantu terjemahkan situs ini ke bahasa anda.\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: dan\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Tema otomatis\n  light: Tema terang\n  dark: Tema gelap\n"
  },
  {
    "path": "i18n/it.yml",
    "content": "version: 2\nlang_code: it\nlang_name: Italiano\nrtl: false\n\ntitle: Guida alle Funzioni di Interpolazione\ndescription:\n  Rendi le animazioni più realistiche scegliendo la corretta funzione\n  di interpolazione.\nshare:\n  Le funzioni di interpolazione specificano la velocità di un'animazione\n  rendendone il movimento più naturale. Nella vita reale un oggetto non inizia\n  a muoversi istantaneamente e la sua velocità non rimane costante.\n  Questa pagina ti aiuta a scegliere la corretta funzione di interpolazione.\n\nabout: __format\n  ~~Le funzioni di interpolazione~~ specificano il cambiamento di un parametro\n  con il passare del tempo.\n\n  Gli oggetti nella vita reale non si muovono istantaneamente, e non hanno quasi mai\n  una velocità costante. Quando apriamo un cassetto, all'inizio lo spostiamo rapidamente ed\n  andiamo rallentando alla fine. Fai cadere un oggetto e lo vedrai\n  accelerare verso il basso, per poi rimbalzare all'impatto con il pavimento.\n\n  Questa pagina ti aiuta a scegliere la giusta funzione di interpolazione.\n\nhowtos:\n  css:\n    text: In CSS, le proprietà transition e animation ti permettono di specificare una funzione di interpolazione.\n    edit: Modifica su ^cubic-bezier.com^.\n    with_animation: In CSS, questa funzione può essere implementata utilizzando {{@keyframes}}\n    example_size: Dimensione\n    example_position: Posizione\n    example_opacity: Trasparenza\n\n  postcss:\n    text:\n      In PostCSS, una funzione di interpolazione è molto più facile da descrivere.\n      Esiste un plugin ^postcss-easings^ che estrapola le informazioni di transizione dal sito stesso.\n    explanation: La dichiarazione viene convertita in quella descritta sopra.\n    disabled:\n      Purtroppo, questa funzione di interpolazione non può essere impostata con alcun plugin PostCSS.\n      Può essere implementata con {{@keyframes}}, vedi sopra.\n\n  gradient:\n    name: Gradiente\n    text: È possibile tracciare un gradiente utilizzando ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Funzione matematica\n    text:\n      Sotto puoi vedere il codice di questa funzione di interpolazione, scritto in TypeScript.\n      La variabile x rappresenta il progresso (assoluto) dell'animazione \n      tra i valori 0 (inizio dell'animazione) e 1 (fine dell'animazione).\n\neasing:\n  all_easings: Tutte le interpolazioni\n  check: Visualizza interpolazione\n  check_size: Dimensione\n  check_position: Posizione\n  check_opacity: Trasparenza\n  current_func: Funzione selezionata\n  linear_func: Funzione lineare\n  load: Caricamento...\n\nopensource:\n  title: Open Source\n  translate: Aiutaci a tradurre il sito nella tua lingua\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: e\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Tema automatico\n  light: Tema chiaro\n  dark: Tema scuro"
  },
  {
    "path": "i18n/ja.yml",
    "content": "version: 2\nlang_code: ja\nlang_name: 日本語\nrtl: false\n\ntitle: イージング関数チートシート\ndescription: 適切なイージング関数を選択して、アニメーションをよりリアルにします。\nshare: イージング関数はアニメーションの速度を指定して、動きをより自然にします。現実のオブジェクトは単に一定の速度で動かず、即座に動いたり止まったりしません。このページは、適切なイージング関数の選択に役立ちます。\n\nabout: __format\n  ~~イージング関数~~は、時間の経過に伴うパラメーターの変化率を指定します。\n\n  現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。\n\n  あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。\n\nhowtos:\n  css:\n    text: CSSでは、transitionプロパティとanimationプロパティでイージング関数を指定できます。\n    edit: ^cubic-bezier.com^で編集できます。\n    with_animation: CSSでは、この関数は{{@keyframes}}を使用して実行できます。\n    example_size: サイズ\n    example_position: 位置\n    example_opacity: 透明度\n\n  postcss:\n    text: PostCSSは、イージング関数の記述がより簡単です。このサイトからtransition情報を取得するプラグイン^postcss-easings^があります。\n    explanation: その宣言は上記のものに変換されます。\n    disabled: 残念ながら、このイージング関数はPostCSSプラグインでは設定できません。{{@keyframes}}で実行できます。上記を参照してください。\n\n  gradient:\n    name: グラデーション\n    text: ^postcss-easing-gradients^を使用してグラデーションを描くことができます。\n\n  mathfunction:\n    name: 数学関数\n    text: 以下に、TypeScriptで書かれたイージング関数のコードを示します。変数xはアニメーションの絶対的な進行度を0（アニメーションの開始）と1（アニメーションの終了）の範囲で表します。\n\neasing:\n  all_easings: すべてのイージング\n  check: イージングの確認\n  check_size: サイズ\n  check_position: 位置\n  check_opacity: 透明度\n  current_func: 現在の関数\n  linear_func: 線形関数\n  load: 読み込み中です...\n\nopensource:\n  title: オープンソース\n  translate: サイトの翻訳にご協力ください\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: と\n  solovev: Ivan Solovev\n\ntheme:\n  auto: 自動\n  light: ライトモード\n  dark: ダークモード\n"
  },
  {
    "path": "i18n/ko.yml",
    "content": "version: 2\nlang_code: ko\nlang_name: 한국어\nrtl: false\n\ntitle: Easing 함수 치트 시트\ndescription:\n  적절한 easing 함수를 선택해 좀 더 자연스러운 애니메이션을 만들어보세요.\nshare:\n  실제 사물들은 일정한 속도로 이동하지 않고, 즉시 시작하거나 즉시 멈추지도 않습니다.\n  Easing 함수는 실제 사물들 같이, 이동 속도를 지정하여 움직임을 좀 더 자연스럽도록 만듭니다.\n  이 페이지에서는 여러분이 알맞은 easing 함수를 고를 수 있도록 도와드립니다.\n\nabout: __format\n  ~~Easing 함수~~는 시간 흐름에 따른 매개변수의 변화율을 지정합니다.\n\n  대부분의 실제 사물들은 일정한 속도로 이동하지 않고, 즉시 시작하거나 즉시 멈추지도 않습니다.\n  서랍을 예로 들자면, 처음에는 빠르게 열다가 거의 다 열었을 때쯤에는 천천히 엽니다.\n  사물을 바닥에 떨어트렸을 때는 사물이 아래로 가속하다 사물이 바닥을 쳤을 때 튕겨 올라옵니다.\n\n  이 페이지에서는 여러분이 알맞은 easing 함수를 고를 수 있도록 도와드립니다.\n\nhowtos:\n  css:\n    text: CSS에서는 transition 속성과 animation 속성을 사용하여 easing 함수를 지정할 수 있습니다.\n    edit: 이 함수를 ^cubic-bezier.com^에서 수정해 볼 수 있습니다.\n    with_animation: CSS에서, 이 함수는 {{@keyframes}}를 사용하여 구현할 수 있습니다.\n    example_size: 크기\n    example_position: 위치\n    example_opacity: 불투명도\n\n  postcss:\n    text:\n      PostCSS의 easing 함수는 이 사이트에서 transition 정보를 가져오는\n      ^postcss-easings^라는 플러그인이 있어 구현하기 간편합니다.\n    explanation: 이 PostCSS 구현은 컴파일 시 CSS로 구현된 코드로 변환됩니다.\n    disabled:\n      아쉽게도 현재 함수는 PostCSS로 지정할 수 없습니다.\n      대신, {{@keyframes}}로 구현할 수 있으니 위를 확인해보세요.\n\n  gradient:\n    name: 그라디언트\n    text: ^postcss-easing-gradients^를 사용하여 그라디언트를 그릴 수 있습니다.\n\n  mathfunction:\n    name: 수학 함수\n    text:\n      아래에 있는 코드는 TypeScript로 작성된 Easing 함수입니다.\n      변수 x는 0 (움직임의 시작)에서 1 (움직임의 끝) 사이의 움직임 진척도입니다.\n\neasing:\n  all_easings: 목록\n  check: easing 비교\n  check_size: 크기\n  check_position: 위치\n  check_opacity: 불투명도\n  current_func: 현재 함수\n  linear_func: 선형 함수\n  load: 로딩 중...\n\nopensource:\n  title: Open Source\n  translate: 사이트 번역을 도와주세요.\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: 및\n  solovev: Ivan Solovev\n\ntheme:\n  auto: 자동 테마 선택\n  light: 라이트 테마\n  dark: 다크 테마\n"
  },
  {
    "path": "i18n/lb.yml",
    "content": "version: 2\nlang_code: lb\nlang_name: Lëtzebuergesch\nrtl: false\n\ntitle: Cheat Sheet fir Easing-Funktiounen\ndescription:\n  Maacht Animatioune méi realistesch andeems Dir déi richteg Iwwergangsfunktioun (easing function) wielt.\nshare:\n  Iwwergangsfunktiounen (engl. easing functions) bestëmmen de Geschwindegkeetsverlaf\n  vun enger Animatioun fir se méi natierlech ze maachen. Well real Objete beweegen\n  sech selte ruckelzeg oder mat enger konstanter Geschwindegkeet.\n  Dës Säit hëlleft Iech déi richteg Iwwergangsfunktiounen ze fannen.\n\nabout: __format\n  ~~Iwwergangsfunktiounen~~ <i>(engl. easing functions)</i> bestëmmen den Taux vun\n  der Ännerung vun engem Parameter iwwer Zäit.\n\n  An der Realitéit beweegen sech Objete seele ruckelzeg oder mat enger konstanter Geschwindegkeet.\n  Wann mir een Tirang opmaachen, dann zeien mir fir d'éischt staark a bremsen eis Beweegung dann of.\n  Loosse mir ee Ball falen, da beschleunegt dee fir d'éischt a Richtung Buedem fir da vum Buedem ofzesprangen.\n\n  Des Säit hëlleft Dir, eng passend Iwwergangsfunktioun ze fannen.\n\nhowtos:\n  css:\n    text: An CSS kënnen Iwwergangsfunktiounen an den 'transition' an 'animation' Eegenschafte benotzt ginn.\n    edit: Op ^cubic-bezier.com^ beaarbechten.\n    with_animation: An CSS kann des Funktioun via {{@keyframes}} implementéiert ginn.\n    example_size: Gréisst\n    example_position: Positioun\n    example_opacity: Transparenz\n\n  postcss:\n    text:\n      An PostCSS léisst sech des Iwwergangsfunktioun vill mei einfach notzen.\n      De Plugin ^postcss-easings^ notzt d'Definitioun fir d'Iwwergangsfunktioun vun dëser Säit.\n    explanation: Dës Deklaratioun gëtt spéider an déi uewe gewisen ëmgewandelt.\n    disabled:\n      Leider kann dës Funktioun mat kengem PostCSS Plugin agestallt ginn.\n      D'Verwendung vun {{@keyframes}} , wei uewe gewisen, ass awer méiglech.\n\n  gradient:\n    name: Gradient\n    text: Mat ^postcss-easing-gradients^ ass et méiglech Gradienten duerzestellen.\n\n  mathfunction:\n    name: Berechnungsfunktioun\n    text:\n      Hei ënne gesitt Dir de Code vun dëser Iwwergangsfunktioun am TypeScript geschriwwen.\n      D'Variabel x representéiert den absolutte Fortschrëtt vun der Animatioun an de Grenze vun\n      0 (Ufank vun der Animatioun) an 1 (Enn vun der Animatioun).\n\neasing:\n  all_easings: All Iwwergangsfunktiounen\n  check: Animatioun mat dëser Funktioun vergläiche fir\n  check_size: Gréisst\n  check_position: Positioun\n  check_opacity: Transparenz\n  current_func: Des Funktioun\n  linear_func: Linear Funktioun\n  load: Um Lueden...\n\nopensource:\n  title: Open Source\n  translate: Hëlleft dobäi dëse Site op Är Sprooch ze iwwersetzen\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: an\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Automatescht Theme\n  light: Hellt Theme\n  dark: Däischtert Theme\n"
  },
  {
    "path": "i18n/ml.yml",
    "content": "version: 2\nlang_code: ml\nlang_name: Malayalam\nrtl: false\n\ntitle: ഈസിങ് ഫങ്ക്ഷൻസ് ചീറ്റ് ഷീറ്റ്\ndescription:\n  ശരിയായ ഈസിങ് ഫങ്ക്ഷൻ തിരഞ്ഞെടുത്ത് ആനിമേഷനുകൾ കൂടുതൽ സ്വാഭാവികം ആക്കാം.\nshare:\n  ഈസിങ് ഫങ്ക്ഷൻസ് ആനിമേഷന്റെ വേഗത ക്രമീകരിച് ചലനം കൂടുതൽ സ്വാഭാവികമാക്കുന്നു. \n  യഥാർത്ഥ വസ്‌തുക്കൾ ഒരേ വേഗതയിൽ ചലിക്കുകയോ ഒരേ സമയം ചലനം തുടങ്ങി തീരുകയോ ചെയ്യുന്നില്ല.\n  ശരിയായ ഈസിങ് ഫങ്ക്ഷൻ തിരഞ്ഞെടുക്കാൻ ഈ പേജ് നിങ്ങളെ സഹായിക്കുന്നു.\n\nabout: __format\n  ~~ഈസിങ് ഫങ്ക്ഷൻസ്~~ ഒരു ഘടകത്തിൻ്റെ (പാരാമീറ്ററിന്റെ) മാറ്റത്തിന്റെ നിരക്ക് വ്യക്തമാക്കുന്നു.\n\n  യഥാർത്ഥ ജീവിതത്തിലെ വസ്തുക്കൾ ഒരേ സമയം ചലനം തുടങ്ങി തീരുകയോ, മിക്കവാറും ഒരിക്കലും\n  സ്ഥിരമായ വേഗതയിൽ ചലിക്കുകയോ ചെയ്യുന്നില്ല. നമ്മൾ ഒരു ഡ്രോയർ തുറക്കുമ്പോൾ, ആദ്യം അത് വേഗത്തിൽ നീക്കുന്നു,\n  അത് പുറത്തുവരുമ്പോൾ വേഗത കുറയുന്നു. തറയിലേക്ക്  എന്തെങ്കിലും ഇട്ടാൽ അത് ആദ്യം താഴേക്ക് ദ്രുതഗതിയിൽ നീങ്ങുകയും, \n  തുടർന്ന് തറയിൽ തട്ടിയ ശേഷം തിരികെ പൊന്തുകയും ചെയ്യും.\n\n  ശരിയായ ഈസിങ് ഫങ്ക്ഷൻ തിരഞ്ഞെടുക്കാൻ ഈ പേജ് നിങ്ങളെ സഹായിക്കുന്നു.\n\nhowtos:\n  css:\n    text: സി‌എസ്‌എസിൽ‌, ട്രാന്സിഷൻ, ആനിമേഷൻ‌ എന്നീ ഘടകങ്ങൾ ഈസിങ് ഫങ്ക്ഷൻസ് നിര്‍ദ്ദേശിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു.\n    edit: ^cubic-bezier.com^ ഇൽ എഡിറ്റുചെയ്യുക.\n    with_animation: സി‌എസ്‌എസിൽ, ഈ ഫങ്ക്ഷൻ {{@keyframes}} ഉപയോഗിച് ചെയ്യാം. \n    example_size: വലുപ്പം\n    example_position: സ്ഥാനം\n    example_opacity: സുതാര്യത\n\n  postcss:\n    text:\n      PostCSS- ൽ, ഈസിങ് ഫങ്ക്ഷൻസ് വിവരിക്കാൻ വളരെ എളുപ്പമാണ്.\n      ആ സൈറ്റിൽ നിന്ന് ട്രാന്സിഷൻ വിവരങ്ങൾ എടുക്കുന്ന ഒരു പ്ലഗിൻ ^postcss-easings^ ഉണ്ട്.\n    explanation: അത് മുകളിൽ വിവരിച്ചതിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു.\n    disabled:\n      നിർഭാഗ്യവശാൽ, ഏതെങ്കിലും പോസ്റ്റ് സി‌എസ്‌എസ് പ്ലഗിൻ ഉപയോഗിച്ച് ഈസിങ് ഫങ്ക്ഷൻ സജ്ജമാക്കാൻ കഴിയില്ല.\n      പക്ഷേ {{@keyframes}} ഉപയോഗിച് ചെയ്യാം, മുകളിൽ കാണുക.\n\n  gradient:\n    name: ഗ്രീഡിയൻറ്റ്\n    text: ^postcss-easing-gradients^ ഉപയോഗിച്ച് ഒരു ഗ്രേഡിയന്റ് വരയ്ക്കാൻ കഴിയും.\n\n  mathfunction:\n    name: മാത്ത് ഫങ്ങ്ഷൻ \n    text:\n      ടൈപ്പ്സ്ക്രിപ്റ്റിൽ എഴുതിയ ഈസിങ് ഫങ്ക്ഷൻ്റെ കോഡ് ആണ് ചുവടെ നിങ്ങൾ കാണുന്നത്.\n      x, 0 നും(ആനിമേഷന്റെ ആരംഭം) 1 നും (ആനിമേഷന്റെ അവസാനം) \n      ഇടക്കുള്ള അനിമേഷൻ്റെ പുരോഗതിയെ കുറിക്കുന്നു.\n\neasing:\n  all_easings: എല്ലാ ഈസിങ് കളും\n  check: ഈസിങ് ൻ്റെ വെത്യാസം കാണുവാൻ ക്കിക്ക് ചെയ്യുക \n  check_size: വലുപ്പം\n  check_position: സ്ഥാനം\n  check_opacity: സുതാര്യത\n  current_func: ഈ ഫങ്ക്ഷൻ\n  linear_func: നേർരേഖാ ഫങ്ക്ഷൻ\n  load: ലോഡിംഗ്...\n\nopensource:\n  title: ഓപ്പൺ സോഴ്‌സ്\n  translate: നിങ്ങളുടെ ഭാഷയിലേക്ക് സൈറ്റ് വിവർത്തനം ചെയ്യാൻ സഹായിക്കുക\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: and\n  solovev: Ivan Solovev\n\ntheme:\n  auto: സ്വയം പ്രേരിതമായ തീം\n  light: ലൈറ്റ് തീം\n  dark: ഇരുണ്ട തീം\n"
  },
  {
    "path": "i18n/nl.yml",
    "content": "version: 2\nlang_code: nl\nlang_name: Nederlands\nrtl: false\n\ntitle: Easing-functies Cheatsheet\ndescription:\n  Maak animaties realistischer door de juiste easing-functie te kiezen.\nshare:\n  Easing-functies beïnvloeden de snelheid van een animatie, om de beweging\n  natuurlijker te laten lijken. De snelheid van fysieke objecten is niet constant,\n  en de beweging start en stopt niet abrupt. Deze pagina helpt je de juiste\n  easing-functie te kiezen.\n\nabout: __format\n  ~~Easing-functies~~ bepalen de mate van verandering van een waarde, gedurende een\n  bepaalde periode.\n\n  Objecten in het dagelijks leven bewegen niet met een constante snelheid, en hun\n  beweging start en stopt niet abrupt. Als je een lade opent begint de beweging snel,\n  maar als de lade bijna helemaal open is vertraagt de beweging. Wanneer je iets laat vallen\n  beweegt het sneller en sneller, tot het de grond aanraakt en terug omhoog stuitert.\n\n  Deze pagina helpt je bij het kiezen van de juiste easing-functie.\n\nhowtos:\n  css:\n    text: In CSS kun je met de overgangs- en animatie-eigenschappen de easing-functie specificeren.\n    edit: Bewerk op ^cubic-bezier.com^.\n    with_animation: In CSS kan deze functie geïmplementeerd worden met {{@keyframes}}\n    example_size: Grootte\n    example_position: Positie\n    example_opacity: Transparantie\n\n  postcss:\n    text:\n      In PostCSS is de easing-functie veel makkelijker te beschrijven.\n      Er bestaat een plug-in ^postcss-easings^ die de overgangsinformatie van die site neemt.\n    explanation: Die declaratie wordt geconverteerd naar degene die hierboven is uitgelegd.\n    disabled:\n      Helaas kan de easing-functie niet worden ingesteld met een PostCSS-plug-in.\n      Dit kan gedaan worden met {{@keyframes}}, zie bovenstaande.\n\n  gradient:\n    name: Kleurovergang\n    text: Het is mogelijk om een kleurovergang te maken met ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Wiskundige functie\n    text:\n      Hieronder zie je de code van deze easing-functie, geschreven in TypeScript.\n      Variable x staat voor de absolute voortgang van de animatie\n      van 0 (start animatie) tot 1 (einde animatie).\n\neasing:\n  all_easings: Alle easings\n  check: Test deze en lineare functie\n  check_size: Grootte\n  check_position: Positie\n  check_opacity: Transparantie\n  current_func: Deze functie\n  linear_func: Lineare functie\n  load: Laden...\n\nopensource:\n  title: Open-source\n  translate: Help site te vertalen naar jouw taal\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: en\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Automatisch thema\n  light: Licht thema\n  dark: Donker thema\n"
  },
  {
    "path": "i18n/no-bok.yml",
    "content": "version: 2\nlang_code: no-bok\nlang_name: Norsk bokmål\nrtl: false\n\ntitle: Overgangsfunksjoner Jukselapp\ndescription:\n  Gjør animasjoner mer realistisk ved å velge den riktige overgangsfunksjonen.\nshare:\n  Overgangsfunksjoner spesifiserer animasjonshastigheten\n  for å gjøre en bevegelse mer naturlig. Ekte objekter flytter seg ikke\n  med en konstant hastighet, og starter og stopper ikke øyeblikkelig.\n  Denne siden hjelper deg med å velge riktig overgangsfunksjon.\n\nabout: __format\n  ~~Overgangsfunksjoner~~ spesifiser endringsraten til et parameter \n  over tid\n\n  Objekter i virkeligheten starter og stopper ikke øyeblikkelig, og nesten aldri\n  har de en konstant hastighet. Når vi åpner en skoff, starter vi raskt,\n  og avslutter sakte mens den kommer ut. Slipp noe på gulvet, og den vil\n  først akselerere nedover, så sprette opp igjen etter å ha truffet gulvet.\n\n  Denne siden hjelper deg med å velge riktig overgangsfunksjon.\n\nhowtos:\n  css:\n    text: I CSS, overgangs- og animasjonsegenskapene lar deg spesifisere en overgangsfunksjon.\n    edit: Rediger på ^cubic-bezier.com^.\n    with_animation: I CSS kan denne funksjonen bli implementert ved bruk av {{@keyframes}}\n    example_size: Størrelse\n    example_position: Posisjon\n    example_opacity: Gjennomsiktighet\n\n  postcss:\n    text:\n      I PostCSS er overgangsfunksjonen mye lettere å beskrive.\n      Det finnes en plugin ^poscss-easings^ som tar overgansinformasjon fra den siden.\n    explanation: Den deklareringen er gjort om til den beskrevet over.\n    disabled:\n      Uheldigvis kan ikke overgangsfunksjonen settes med noen PostCSS pluginer.\n      Kan bli gjort med {{@keyframes}}, se over.\n\n  gradient:\n    name: Overgang\n    text: Det er mulig å tegne en overgang med ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Mattefunksjon\n    text:\n      Under ser du koden av denne overgangsfunksjonen skrevet i TypeScript.\n      Variabelen x representerer den absolutte progresjonen av animasjonen\n      i området mellom 0 (starten av animasjonen) og 1 (sluttet av animasjonen).\n\neasing:\n  all_easings: Alle overganger\n  check: Sjekk overgang for endringer\n  check_size: Størrelser\n  check_position: Posisjoner\n  check_opacity: Gjennomsiktigheter\n  current_func: Denne funksjonen\n  linear_func: Lineær funksjon\n  load: Laster inn...\n\nopensource:\n  title: Openkildet\n  translate: Hjelp med å oversette siden til ditt språk\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: og\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Automatisk tema\n  light: Lyst tema\n  dark: Mørkt tema"
  },
  {
    "path": "i18n/pl.yml",
    "content": "version: 2\nlang_code: pl\nlang_name: Polish\nrtl: false\n\ntitle: Ściąga z Funkcji Przejścia\ndescription:\n  Spraw, że animacja wygląda na bardziej realistyczną, dobierając dla niej odpowiednią funkcję przejścia (tzw. easing).\nshare:\n  Funkcje przejścia opisują tempo animacji, aby ruch wyglądał naturalniej. Prawdziwe obiekty bowiem nie poruszają się tak po prostu, ze stałą prędkością a także nie ruszają i nie zatrzymują się natychmiastowo.\n  Ta strona pomaga wybrać Ci odpowiednią funkcję przejścia.\n\nabout: __format\n  ~~Funkcje przejścia~~ zadaj tempo zmian parametru w czasie.\n\n  Obiekty w prawdziwym życiu nie ruszają i nie zatrzymują się natychmiastowo i prawie nigdy nie poruszają się ze stałą prędkością. Kiedy wysuwamy szufladę, najpierw nadajemy jej energiczny, szybki ruch, zaś kiedy już się wysuwa, spowalniamy ją. Upuść coś na podłogę, a to najpierw zacznie przyspieszać w dół, po czym, gdy trafi w podłogę, odbije się od niej z powrotem.\n\n  Ta strona pomaga wybrać Ci odpowiednią funkcję przejścia.\n\nhowtos:\n  css:\n    text: W CSS-ie, takie właściwości jak przemiana (transition) oraz animacja (animation) pozwalają na określenie dla nich funkcji przejścia.\n    edit: Edytuj na ^cubic-bezier.com^.\n    with_animation: W CSS-ie, taka funkcja może zostać zaimplementowana za pomocą {{@keyframes}}\n    example_size: Rozmiar\n    example_position: Pozycja\n    example_opacity: Przezroczystość\n\n  postcss:\n    text:\n      Funkcje przejścia są znacznie łatwiejsze do opisania w PostCSS.\n      Istnieje plugin ^postcss-easings^, który pobiera informacje o przejściach z tejże strony.\n    explanation: Tamta deklaracja została skonwertowana do tej opisanej powyżej.\n    disabled:\n      Niestety nie można ustawić funkcji przejścia za pomocą żadnego pluginu do PostCSS-a.\n      Zobacz powyżej, jak można to zrobić przy użyciu {{@keyframes}}.\n\n  gradient:\n    name: Gradient\n    text: Można narysować gradient przy użyciu ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Funkcje matematyczne\n    text:\n      Poniżej widzisz kod dla funkcji przejścia napisany w  TypeScriptcie.\n      Zmienna x odzwierciedla absolutny postęp animacji w zakresie od 0 (początek animacji) do 1 (koniec animacji).\n\neasing:\n  all_easings: Wszystkie przejścia\n  check: Sprawdź, jaką zmianę daje to przejście\n  check_size: Rozmiar\n  check_position: Pozycja\n  check_opacity: Przezroczystość\n  current_func: Ta funkcja\n  linear_func: Funkcja liniowa\n  load: Ładowanie...\n\nopensource:\n  title: Open Source\n  translate: Pomóż przetłumaczyć stronę na twój język!\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: i\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Motyw domyślny\n  light: Jasny motyw\n  dark: Ciemny motyw\n"
  },
  {
    "path": "i18n/pt-br.yml",
    "content": "version: 2\nlang_code: pt-br\nlang_name: Português (Brasil)\nrtl: false\n\ntitle: Cheat Sheet para funções de easing\ndescription:\n  Torne animações mais realistas escolhendo a função de easing correta.\nshare:\n  Funções de easing especificam a velocidade da animação\n  para tornar o movimento mais natural. Objetos reais não se movem\n  a uma velocidade constante e não começam e param em um instante.\n  Esta página ajuda a escolher a função de easing correta.\n\nabout: __format\n  ~~Funções de easing~~ especificam a taxa de alteração de um parâmetro ao longo do tempo.\n\n  Objetos na vida real não começam e param instantaneamente e quase nunca se movem\n  a uma velocidade constante. Quando abrimos uma gaveta, primeiro a movemos rapidamente\n  e diminuímos a velocidade à medida que sai. Deixe algo cair no chão e ele primeiro\n  acelerará caindo e saltará depois de bater no chão.\n\n  Esta página ajuda a escolher a função de easing correta.\n\nhowtos:\n  css:\n    text: Em CSS, as propriedades 'transition' e 'animation' permitem especificar uma função de easing.\n    edit: Editar em ^cubic-bezier.com^.\n    with_animation: Em CSS, esta função pode ser implementada usando {{@keyframes}}\n    example_size: Tamanho\n    example_position: Posição\n    example_opacity: Transparência\n\n  postcss:\n    text:\n      No PostCSS, a função de easing é muito mais fácil de descrever.\n      Há um plugin, ^postcss-easings^, que tira a informação de transição deste site.\n    explanation: Tal declaração é convertida para a descrita acima.\n    disabled:\n      Infelizmente, esta função de easing não pode ser feita com um PostCSS plugin.\n      Pode ser feita com {{@keyframes}}, veja acima.\n\n  gradient:\n    name: Gradiente\n    text: É possível desenhar um gradiente usando o plugin ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Função matemática\n    text:\n      Abaixo está o código desta função de easing escrito em TypeScript.\n      A variável x representa o progresso absoluto da animação\n      nos limites de 0 (começo da animação) e 1 (fim da animação).\n\neasing:\n  all_easings: Todos os easings\n  check: Verificar o easing para mudanças de\n  check_size: Tamanho\n  check_position: Posição\n  check_opacity: Transparência\n  current_func: Função atual\n  linear_func: Função linear\n  load: Carregando...\n\nopensource:\n  title: Open Source\n  translate: Ajude a traduzir o site para seu idioma\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: e\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Tema auto\n  light: Tema claro\n  dark: Tema escuro\n"
  },
  {
    "path": "i18n/ro.yml",
    "content": "version: 2\nlang_code: ro\nlang_name: Română\nrtl: false\n\ntitle: Easing Functions Cheat Sheet\ndescription:\n  Faceți animațiile mai realiste alegând funcția de relaxare potrivită.\nshare:\n  Funcțiile de relaxare specifică viteza animației pentru a\n  face mișcarea mai naturală. Obiectele reale nu se mișcă doar\n  la o viteză constantă și nu pornesc sau se opresc instant.\n  Această pagină vă ajută să alegeți funcția de relaxare potrivită.\n\nabout: __format\n  ~~Funcțiile de relaxare~~ specifică rata de modificare a unui parametru\n  în timp.\n\n  Obiectele din viața reală nu pornesc sau se opresc instantaneu și aproape niciodată\n  nu se deplasează cu viteză constantă. Când deschidem un sertar, mai întâi îl mișcăm rapid,\n  și îl încetinim pe măsură ce iese. Aruncă ceva pe podea și mai întâi\n  va accelera în jos, apoi revenind în sus după ce a lovit podeaua.\n\n  Această pagină vă ajută să alegeți funcția de relaxare potrivită.\n\nhowtos:\n  css:\n    text: În CSS, proprietățile de tranziție și animație vă permit să specificați o funcție de relaxare.\n    edit: Editați pe ^cubic-bezier.com^.\n    with_animation: În CSS, această funcție poate fi implementată folosind {{@keyframes}}\n    example_size: Dimensiune\n    example_position: Poziție\n    example_opacity: Transparență\n\n  postcss:\n    text:\n      În PostCSS, funcția de relaxare este mult mai ușor de descris.\n      Există un plugin ^postcss-easings^ care preia informațiile de tranziție de pe acel site.\n    explanation: Acea declarație este abordată în descrierea de mai sus.\n    disabled:\n      Din păcate, funcția de relaxare nu poate fi setată cu niciun plugin PostCSS.\n      Se poate face cu {{@keyframes}}, vezi mai sus.\n\n  gradient:\n    name: Gradient\n    text: Este posibil să desenați un gradient folosind ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Funcția matematică\n    text:\n      Mai jos vedeți codul acestei funcții de simplificare scris în TypeScript.\n      Variabila x reprezintă progresul absolut al animației în limitele\n      lui 0 (începutul animației) și 1 (sfârșitul animației).\n\neasing:\n  all_easings: Toate relaxările\n  check: Verificați relaxarea pentru modificări\n  check_size: Mărimi\n  check_position: Poziții\n  check_opacity: Transparente\n  current_func: Această funcție\n  linear_func: Funcție liniară\n  load: Se încarcă...\n\nopensource:\n  title: Open Source\n  translate: Ajută la traducerea site-ului în limba ta\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: și\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Tema automată\n  light: Temă luminoasă\n  dark: Temă întunecată\n"
  },
  {
    "path": "i18n/ru.yml",
    "content": "version: 2\nlang_code: ru\nlang_name: Русский\nrtl: false\n\ntitle: Шпаргалка по функциям плавности (easing)\ndescription:\n  Сделайте анимацию более реалистичной, подобрав нужную функцию плавности (easing).\nshare:\n  Функция плавности (easing) определяет скорость анимации, делая её\n  более реалистичной. Объекты в реальности не движутся с постоянной скоростью,\n  не начинают движение и не останавливаются в одно мгновение. Этот сайт поможет\n  подобрать нужную функцию плавности.\n\nabout: __format\n  ~~Функция плавности (easing)~~ определяет скорость течения анимации, делая её\n  более реалистичной.\n\n  Объекты в реальной жизни не начинают двигаться мгновенно и с постоянной скоростью.\n  Открывая ящик стола, мы в начале ускоряем его, а затем тормозим.\n  Уроните что-нибудь на пол, оно сначала ускорится вниз, а затем отскочит вверх после удара об пол.\n\n  Этот сайт поможет подобрать нужную функцию плавности.\n\nhowtos:\n  css:\n    text: В CSS свойства transition и animation позволяют указывать функцию плавности.\n    edit: Редактировать на ^cubic-bezier.com^.\n    with_animation: В CSS эту функцию можно реализовать с помощью {{@keyframes}}\n    example_size: Размер\n    example_position: Положение\n    example_opacity: Прозрачность\n\n  postcss:\n    text:\n      В PostCSS функцию плавности описывать сильно проще.\n      Есть плагин ^postcss-easings^, который берёт информацию о переходе с этого сайта.\n    explanation: Эта декларация преобразуется в подобную, которая описана выше.\n    disabled:\n      К сожалению, такую функцию плавности нельзя задать с помощью какого-либо плагина PostCSS.\n      Это можно сделать с помощью {{@keyframes}}, смотрите выше.\n\n  gradient:\n    name: Градиент\n    text: Нарисовать градиент возможно с помощью ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Математическая функция\n    text:\n      Ниже вы видите код функции перехода, написанный на TypeScript.\n      Переменная x — это абсолютный прогресс анимации, где 0 (начало анимации) и 1 (конец анимации).\n\neasing:\n  all_easings: Все функции\n  check: Проверить плавность на изменение\n  check_size: Размера\n  check_position: Положения\n  check_opacity: Прозрачности\n  current_func: Текущая функция\n  linear_func: Линейная функция\n  load: Загрузка...\n\nopensource:\n  title: Открытый код\n\nauthors:\n  sitnik: Андрей Ситник\n  separator: и\n  solovev: Иван Соловьев\n\ntheme:\n  auto: Тема автоматич.\n  light: Светлая тема\n  dark: Темная тема\n"
  },
  {
    "path": "i18n/si.yml",
    "content": "version: 1\nlang_code: si\nlang_name: Slovenian\nrtl: false\n\ntitle: Zapisi funkcij za blaženje gibanja\ndescription:\n  Oživite animacije z izbiro pravilne funkcije za blaženje gibanja.\nshare:\n  Funkcije za blaženje gibanja določajo hitrost animacije,\n  da gibanje postane bolj naravno. Resnični predmeti se ne premikajo\n  s konstantno hitrostjo, in ne začnejo in ne ustavijo se v trenutku.\n  Ta stran vam pomaga izbrati pravilno funkcijo za blaženje gibanja.\n\nabout: __format\n  ~~Funkcije blaženja~~ določajo hitrost spremembe parametra\n  s časom.\n\n  Predmeti v resničnem življenju se ne začnejo in ne ustavijo v trenutku, in skoraj nikoli\n  se ne premikajo s konstantno hitrostjo. Ko odpremo predal, ga najprej hitro premaknemo\n  in ga nato upočasnimo, ko se odpre. Nečesa, kar vržemo na tla, se bo najprej pospeševalo navzdol,\n  nato pa se bo odbilo nazaj gor, ko se dotakne tal.\n\n  Ta stran vam pomaga izbrati pravilno funkcijo za blaženje gibanja.\n\nhowtos:\n  css:\n    text: V CSS-ju lastnosti prehoda in animacije omogočajo določitev funkcije za blaženje gibanja.\n    edit: Uredi na ^cubic-bezier.com^.\n    with_animation: V CSS-ju lahko to funkcijo izvedemo z uporabo {{@keyframes}}\n    example_size: Velikost\n    example_position: Položaj\n    example_opacity: Prosojnost\n\n  postcss:\n    text:\n      V PostCSS-ju je funkcijo za blaženje gibanja veliko lažje opisati.\n      Obstaja vtičnik ^postcss-easings^, ki prevzame informacije o prehodu s te strani.\n    explanation: Ta deklaracija se pretvori v opisano zgoraj.\n    disabled:\n      Na žalost funkcije za blaženje gibanja ni mogoče nastaviti z nobenim vtičnikom PostCSS.\n      Lahko pa se izvede s pomočjo {{@keyframes}}, glej zgoraj.\n\n  gradient:\n    name: Gradient\n    text: Mogoče je narisati gradient s pomočjo ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Matematična funkcija\n    text:\n      Spodaj vidite kodo te funkcije za blaženje gibanja, zapisane v TypeScriptu.\n      Spremenljivka x predstavlja absolutni napredek animacije\n      v mejah od 0 (začetek animacije) do 1 (konec animacije).\n\neasing:\n  all_easings: Vse funkcije za blaženje gibanja\n  check: Check easing for changes\n  check_size: Velikost\n  check_position: Pozicija\n  check_opacity: Prosojnost\n  current_func: Trenutna funkcija\n  linear_func: Linearna funkcija\n  load: Nalaganje...\n\nopensource:\n  title: Odprtokodno\n  translate: Pomagaj prevesti to stran v svoj jezik\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: in\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Automatska tema\n  light: Svetla tema\n  dark: Temna tema\n"
  },
  {
    "path": "i18n/sq.yml",
    "content": "version: 2\nlang_code: sq\nlang_name: Shqip\nrtl: false\n\ntitle: Lista e funksioneve të shpejtësisë për animacione\ndescription:\n  Bëji funksionet më realiste duke zgjedhur shpejtësinë e duhur të animacionit.\nshare:\n  Funksionet e shpejtësisë specifikojnë shpejtësine e animacioneve\n  për t'i bërë më të natyrshme. Objektet reale nuk lëvizin vetëm\n  me shpejtësi konstante, gjithashtu nuk fillojnë dhe ndalen menjëherë.\n  Kjo faqe ju ndihmon të zgjidhni funksionin e duhur të shpejtësisë së animacionit.\n\nabout: __format\n  ~~Funksionet e shpejtësisë~~ specifikojnë ndryshimin e parametrit\n  në varësi të kohës.\n\n  Objektet reale nuk fillojnë dhe ndalen menjëherë, dhe pothuajse asnjëherë \n  nuk lëvizin me shpejtësi konstante. Kur hapim një sirtar, në fillim e lëvizim shpejt,\n  dhe ngadalsojmë kur e nxjerrim jashtë. Nëse hedhim diçka në tokë,\n  fillimisht bie poshtë me shpejtësi dhe pastaj kthehet lart pasi godet dyshemenë.\n\n  Kjo faqe ju ndihmon të zgjidhni funksionin e duhur të animacionit.\n\nhowtos:\n  css:\n    text: Në CSS, cilësimet e 'transition' dhe 'animation' të lejojnë të specifikosh një funksion shpejtësie.\n    edit: Redakto në ^cubic-bezier.com^.\n    with_animation: Në CSS, këto funksione mund të implementohen duke përdorur {{@keyframes}}\n    example_size: Madhësitë\n    example_position: Pozicionet\n    example_opacity: Transparenca\n\n  postcss:\n    text:\n      Në PostCSS, funksionet e shpejtësisë janë më të thjeshta per t'u përshkruar.\n      Ekziston një plugin ^postcss-easings^ që merr informacionin e tranzicionit nga ky sajt. \n    explanation: Kjo deklaratë konvertohet në atë të përshkruar më lart.\n    disabled:\n      Fatkeqësisht, funksionet e shpejtësisë nuk mund të vendosen me një plugin PostCSS\n      Mund të arrihet me {{@keyframes}}, shihni më lart.\n\n  gradient:\n    name: Gradienti\n    text: Është e mundur të vizatojmë një gradient duke përdorur ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Funksion matematikor\n    text:\n      Më poshtë do të shihni funksionet e shpejtësisë të shkruara në TypeScript.\n      Variabla x përfaqëson progresin absolut të animacionit\n      në kufijtë e 0 (fillimi i animacionit) dhe 1 (fundit e animacionit).\n\neasing:\n  all_easings: Të gjitha funksionet e shpejtësitë\n  check: Kontrolloni shpejtësinë për ndryshime\n  check_size: Madhësitë\n  check_position: Pozicionet\n  check_opacity: Transparenca\n  current_func: Funksioni aktual\n  linear_func: Funksioni linear\n  load: Ngarkimi...\n\nopensource:\n  title: Open Source\n  translate: Ndihmo përkthimin në gjuhën tënde\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: dhe\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Modaliteti automatik\n  light: Modaliteti i hapur\n  dark: Modaliteti i errët\n"
  },
  {
    "path": "i18n/sv-se.yml",
    "content": "version: 2\nlang_code: sv\nlang_name: Svenska\nrtl: false\n\ntitle: Lättnadsfunktioner\ndescription:\n  Gör animationer mer realistiska genom att välja rätt lättnadsfunktion.\nshare:\n  Lättringsfunktioner anger hastigheten på animeringen\n  för att göra rörelsen mer naturlig. Verkliga föremål rör sig inte bara\n  med konstant hastighet och startar och stannar inte på ett ögonblick.\n  Den här sidan hjälper dig att välja rätt lättnadsfunktion.\n\nabout: __format\n  ~~Lättningsfunktioner~~ anger förändringshastigheten för en parameter\n  över tid.\n\n  Objekt i verkliga livet startar och stannar inte bara direkt, och nästan aldrig\n  rör sig med en konstant hastighet. När vi öppnar en låda flyttar vi först den snabbt,\n  och sen sakta ner den när den kommer ut. Släpp något på golvet och det kommer först accelerera\n  nedåt och studsar sedan upp igen efter att ha träffat golvet.\n\n  Den här sidan hjälper dig att välja rätt lättnadsfunktion.\n\nhowtos:\n  css:\n    text: I CSS låter övergångs- och animeringsegenskaperna dig att ange en lättnadsfunktion.\n    edit: Redigera på ^cubic-bezier.com^.\n    with_animation: I CSS kan den här funktionen implementeras med {{@keyframes}}\n    example_size: Storlek\n    example_position: Position\n    example_opacity: Genomskinlighet\n\n  postcss:\n    text:\n      I PostCSS är lättnadsfunktionen mycket lättare att beskriva.\n      Det finns ett plugin ^postcss-easings^ som tar övergångsinformationen från den platsen.\n    explanation: Deklarationen konverteras till den som beskrivs ovan.\n    disabled:\n      Tyvärr kan lättnadsfunktionen inte ställas in med något PostCSS-plugin.\n      Kan göras med {{@keyframes}}, se ovan.\n\n  gradient:\n    name: Gradient\n    text: Det är möjligt att rita en gradient med ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Matematisk funktion\n    text:\n      Nedan ser du koden för denna lättnadsfunktion skriven i TypeScript.\n      Variabeln x representerar animeringens absoluta progressionen inom\n      gränserna 0 (animeringens början) och 1 (animeringens slut).\n\neasing:\n  all_easings: Alla lättnader\n  check: Kontrollera lättnad för ändringar\n  check_size: Storlekar\n  check_position: Positioner\n  check_opacity: Genomskinligheter\n  current_func: Denna funktion\n  linear_func: Linjär funktion\n  load: Laddar...\n\nopensource:\n  title: Öppen källkod\n  translate: Hjälp till att översätta webbplatsen till ditt språk\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: och\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Autotema\n  light: Ljust tema\n  dark: Mörkt tema\n"
  },
  {
    "path": "i18n/tr.yml",
    "content": "version: 2\nlang_code: tr\nlang_name: Türkçe\nrtl: false\n\ntitle: Geçiş Fonksiyonları Hızlı Başvuru\ndescription:\n  Animasyonları doğru geçiş fonksiyonlarını seçerek daha gerçekçi kılın.\nshare:\n  Geçiş fonksiyonları, hareketlerin daha doğal gözükmesi için animasyonun hızını ayarlar.\n  Gerçekte objeler harekete birden başlayıp durmazlar ve neredeyse hiçbir zaman sabit hızda ilerlemezler.\n  Bu site size doğru geçiş fonksiyonunu seçmenizde yardımcı olur.\n\nabout: __format\n  ~~Geçiş Fonksiyonları~~ bir parametrenin zaman çizelgesinde değişim oranını kontrol eder.\n\n  Gerçek hayatta objeler hareket etmeye birden başlayıp durmazlar ve neredeyse hiçbir zaman sabit hızda ilerlemezler.\n  Bir çekmeceyi açarken önce hızlıca çekeriz ve açıldıkça yavaşlatırız. Yere bir şey attığınızda\n  önce aşağı doğru hızlanır ve sonra yere çarparak seker.\n\n  Bu site size doğru geçiş fonksiyonunu seçmenizde yardımcı olur.\n\nhowtos:\n  css:\n    text: CSS içindeki `transition` ve `animation` değerleri geçiş fonksiyonunu seçmenizi sağlar.\n    edit: ^cubic-bezier.com^ sitesinde düzenle.\n    with_animation: CSS içinde, bu fonksiyon {{@keyframes}} kullanılarak uygulanabilir.\n    example_size: Boyut\n    example_position: Pozisyon\n    example_opacity: Şeffaflık\n\n  postcss:\n    text:\n      PostCSS'de, hareket hızı işlevini tanımlamak çok daha kolaydır.\n      Bu siteden geçiş bilgilerini alan bir ^ postcss-easings ^ eklentisi vardır.\n    explanation: Bu beyan, yukarıda anlatılana dönüştürülür.\n    disabled:\n      Maalesef, hareket hızı işlevi herhangi bir PostCSS eklentisiyle ayarlanamaz.\n      {{@Keyframes}} ile yapılabilir, yukarıya bakın.\n\n  gradient:\n    name: Geçiş\n    text: ^postcss-easing-gradients^ kullanarak bir geçiş çizmek mümkündür.\n\n  mathfunction:\n    name: Matematik fonksiyonu\n    text:\n      Aşağıda bu hareket hızı işlevinin TypeScript ile yazılmış kodunu görüyorsunuz.\n      X değişkeni, animasyonun mutlak ilerlemesini temsil eder\n      0 (animasyonun başlangıcı) ve 1 (animasyonun sonu) sınırlarında.\n\neasing:\n  all_easings: Tüm geçişler\n  check: Değişiklikler için geçişi kontrol edin\n  check_size: Boyut\n  check_position: Pozisyon\n  check_opacity: Şeffaflık\n  current_func: Bu fonksiyon\n  linear_func: Doğrusal fonksiyon\n  load: Yükleniyor...\n\nopensource:\n  title: Açık kaynak\n  translate: Siteyi dilinize çevirmeye yardımcı olun.\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: ve\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Oto tema\n  light: Aydınlık tema\n  dark: Karanlık tema\n"
  },
  {
    "path": "i18n/uk.yml",
    "content": "version: 2\nlang_code: uk\nlang_name: Українська\nrtl: false\n\ntitle: Шпаргалка функцій пом`якшення (easing)\ndescription:\n  Зроби анімацію більш реалістичною, підібравши потрібну пом`якшуючу функцію\n  (easing).\nshare:\n  Функція пом`якшення (easing) визначає швидкість протікання анімації, роблячи її\n  більш реалістичною, тому що реальні речі не починають рухатися миттєво і\n  з постійною швидкістю. Цей сайт допоможе підібрати потрібну\n  пом`якшуючу фінкцію.\n\nabout: __format\n  ~~Функція пом`якшення (easing)~~ визначає швидкість перетікання анімації, роблячи її\n  більш реалістичною.\n\n  Реальні речі не починають рухатися миттєво та з постійною швидкістю.\n  Відкриваючи ящик столу, ми спочатку прискорюємо його, а лише на другій\n  половині шляху — гальмуємо. Коли щось падає, то спочатку воно прискорюється, а відбившись від підлоги — підстрибує вгору.\n\n  Цей сайт допоможе підібрати потрібну функцію пом`якшення.\n\nhowtos:\n  css:\n    text: CSS властивості transition та animation дозволяють задати функцію пом'якшення.\n    edit: Редагувати на ^cubic-bezier.com^.\n    with_animation: У CSS цю функцію можна реалізувати, використовуючи {{@keyframes}}\n    example_size: Розмір\n    example_position: Позиція\n    example_opacity: Прозорість\n\n  postcss:\n    text:\n      PostCSS функцію пом`якшення описати набагато простіше.\n      Існує плагін ^postcss-easings^, який бере інформацію про перехід з цього сайту.\n    explanation: Ця декларація перетворюється на подібну до тої яка описана вище.\n    disabled:\n      На жаль, таку функцію пом`якшення неможливо встановити жодним плагіном PostCSS.\n      Це можна зробити за допомогою {{@keyframes}}, див. Вище.\n\n  gradient:\n    name: Градієнт\n    text: Можна намалювати градієнт, використовуючи ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Математична функція\n    text:\n      Нижче подано код цієї функцій пом'якшення на TypeScript.\n      Змінна x представляє абсолютний поступ анімації\n      в межах від 0 (початок анімації) до 1 (кінець анімації).\n\neasing:\n  all_easings: Всі функції\n  check: Подивитись пом`якшення при зміні\n  check_size: Розміру\n  check_position: Положення\n  check_opacity: Прозорості\n  current_func: Вибрана функція\n  linear_func: Лінійна функція\n  load: Завантаження...\n\nopensource:\n  title: Open Source\n  translate: Перекладіть своєю мовою\n\nauthors:\n  sitnik: Андрєй Сітнік\n  separator: та\n  solovev: Іван Соловйов\n\ntheme:\n  auto: Auto theme\n  light: Light theme\n  dark: Dark theme\n"
  },
  {
    "path": "i18n/vi.yml",
    "content": "version: 2\nlang_code: vi\nlang_name: Tiếng Việt\nrtl: false\n\ntitle: Bảng Tổng Hợp Hiệu Ứng Chuyển Động (Easing)\ndescription:\n  Tạo các hiệu ứng chuyển động thực tế hơn bằng cách chọn đúng easing.\nshare:\n  Các hàm easing sẽ điều chỉnh tốc độ để chuyển động của animation\n  nhìn tự nhiên hơn. Trong thực tế, các vật thể không di chuyển với một tốc độ\n  cố định, và cũng không bắt đầu hay kết thúc một cách tức thì.\n\nabout: __format  \n  ~~Các hàm easing~~ xác định tỉ lệ của một tham số biến đổi theo thời gian.\n\n  Các vật thể trong thực tế không bao giờ khởi đầu hay kết thúc một cách đột\n  ngột, và cũng không di chuyển với tốc độ cố định. Khi bạn mở một ngăn kéo, \n  ban đầu ta kéo nó nhanh, sau đó chậm dần cho đến khi mở ra hoàn toàn. \n  Khi thả một vật gì đó xuống sàn nhà, nó sẽ bật ngược lại với độ cao thấp hơn, \n  và cứ bật như vậy, mỗi lần độ cao lại giảm đi cho tới khi nó đứng im.\n\n  Trang web này sẽ giúp bạn chọn ra hàm easing phù hợp để diễn tả vật thể mà bạn cần.\n\nhowtos:\n  css:\n    text: Trong CSS, ta có thể sử dụng thuộc tính transition và animation để xác định easing.\n    edit: Tuỳ chỉnh tại ^cubic-bezier.com^.\n    with_animation: Trong CSS, chức năng này có thể được thực hiện với {{@keyframes}}\n    example_size: Kích thước\n    example_position: Vị trí\n    example_opacity: Độ trong suốt\n\n  postcss:\n    text:\n      Miêu tả một hàm ease trong PostCSS dễ dàng hơn nhiều.\n      Bạn có thể lấy thông số transition từ plugin ^postcss-easings^.\n    explanation: Câu lệnh này được chuyển đổi từ hàm bên trên.\n    disabled:\n      Rất tiếc, hàm gia tốc không được thiết lập với bất kỳ plugin PostCSS nào.\n      Tuy nhiên, vẫn có thể làm được bằng cách sử dụng {{@keyframes}}, xem bên trên.\n\n  gradient:\n    name: Gradient\n    text: Có thể tạo màu gradient với ^postcss-easing-gradients^.\n\n  mathfunction:\n    name: Công thức Toán học\n    text:\n      Dưới đây là code được viết bằng TypeScript cho hàm easing này.\n      Biến x thể hiện quá trình chuyển động từ 0 (bắt đầu) cho đến 1 (kết thúc) của animation.\n\neasing:\n  all_easings: Tất cả các hàm\n  check: Kiểm tra easing để thấy sự thay đổi\n  check_size: Kích thước\n  check_position: Vị trí\n  check_opacity: Độ trong suốt\n  current_func: Hàm này\n  linear_func: Hàm tuyến tính\n  load: Xin chờ...\n\nopensource:\n  title: Mã nguồn mở\n  translate: Hỗ trợ dịch trang này sang ngôn ngữ của bạn\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: và\n  solovev: Ivan Solovev\n\ntheme:\n  auto: Tự động\n  light: Ban ngày\n  dark: Ban đêm\n"
  },
  {
    "path": "i18n/yue.yml",
    "content": "version: 2\nlang_code: yue\nlang_name: 粵語\nrtl: false\n\ntitle: 緩動函數小冊子\ndescription:\n  揀啱緩動函數，令動畫更加真實。\nshare:\n  緩動函數嘅作用係控制動畫嘅速度，令到佢更加有真實性。\n  現實生活嘅嘢唔會穩定速度郁動，並且唔會忽然之間挑起或者停低。\n  呢個網頁會幫你揀返啱嘅緩動函數。\n\nabout: __format\n  ~~緩動函數 (Easing function)~~ 嘅用途係順住時間控制一個數目嘅變化。\n\n  現實生活嘅嘢唔會忽然之間挑起或者停低，而且基本上冇可能以穩定速度郁動。\n  當我哋開櫃桶嘅時候，我哋會先快速地掹佢出嚟，再慢返落嚟，直至佢出晒嚟為止。\n  如果你跌低嘢嘅話，嗰樣嘢會首先慢慢往下加速，之後由地上彈返上嚟。\n\n  呢個網頁會幫你揀返啱嘅緩動函數。\n\nhowtos:\n  css:\n    text: 用 CSS 嘅時候，你可以用 transition 同埋 animation 元素嚟指定一個緩動函數。\n    edit: 喺 ^cubic-bezier.com^ 編輯。\n    with_animation: 呢個函數可以用 {{@keyframes}} 造成：\n    example_size: 大細\n    example_position: 位置\n    example_opacity: 透明度\n\n  postcss:\n    text:\n      用 PostCSS 整緩動函數就容易好多。\n      你可以用 ^postcss-easings^ 呢個插件嚟指定你想要嘅函數，佢會由呢個網頁抽出相關嘅資訊。\n    explanation: 呢個會被轉換成上面嘅 CSS 碼。\n    disabled:\n      呢個函數唔好彩地冇可能用任何 PostCSS 插件嚟製造。\n      你須要用上面嘅 {{@keyframes}} 方法。\n\n  gradient:\n    name: 漸變式\n    text: 你可以用 ^postcss-easing-gradients^ 嚟畫漸變式。\n\n  mathfunction:\n    name: 公式\n    text:\n      以下係呢個函數嘅 TypeScript 版。\n      裡面嘅變數 x 代表動畫嘅進度，由 0（動畫開始）至 1（動畫完結）。\n\neasing:\n  all_easings: 全部函數\n  check: 睇吓變化\n  check_size: 大細\n  check_position: 位置\n  check_opacity: 透明度\n  current_func: 呢個函數\n  linear_func: 線性函數\n  load: 載入緊…\n\nopensource:\n  title: 開源\n  translate: 幫手將呢個網頁翻譯成你嘅語言\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: 同埋\n  solovev: Ivan Solovev\n\ntheme:\n  auto: 自動\n  light: 亮色\n  dark: 暗色\n"
  },
  {
    "path": "i18n/zh-cn.yml",
    "content": "version: 2\nlang_code: zh-cn\nlang_name: 简体中文\nrtl: false\n\ntitle: 缓动函数速查表\ndescription:\n  使用正确的缓动函数，让动画效果更加真实。\nshare:\n  缓动函数可以自定义动画在执行中的速度\n  使得物体的移动更加自然。现实生活中，\n  物体当然不是匀速移动，同样也不会立刻启动或结束。\n  这个页面将帮助你选择正确的缓动函数。\n\nabout: __format\n  ~~缓动函数~~ 自定义参数随时间变化的速率。\n  现实生活中，物体并不是突然启动或者停止，\n  当然也不可能一直保持匀速移动。就像我们\n  打开抽屉的过程那样，刚开始拉的那一下动作很快，\n  但是当抽屉被拉出来之后我们会不自觉的放慢动作。\n  或是掉落在地板上的物体，一开始下降的速度很快，\n  接着就会在地板上来回反弹直到停止。\n  这个页面将帮助你选择正确的缓动函数。\n\nhowtos:\n  css:\n    text: 在 CSS 中，transition 和 animation 属性允许你自定义缓动函数。\n    edit: 在 ^cubic-bezier.com^ 上编辑。\n    with_animation: 在 CSS 中，使用 {{@keyframes}} 来实现这个函数\n    example_size: 大小\n    example_position: 位置\n    example_opacity: 不透明度\n\n  postcss:\n    text:\n      在 PostCSS 中，使用缓动函数就变得方便多了。\n      可以使用这个插件 ^postcss-easings^ 来定义 transition 的属性值。\n    explanation: 这种形式和上面的贝塞尔曲线函数一致。\n    disabled:\n      可惜的是，这个缓动函数不能使用 PostCSS plugin 插件。\n      但可以用 {{@keyframes}} 实现，查阅上方。\n\n  gradient:\n    name: 渐变\n    text: 可以使用工具 ^postcss-easing-gradients^ 来实现渐变。\n\n  mathfunction:\n    name: 函数\n    text:\n      下面的代码由 TypeScript 实现。\n      变量 x 表示 0（动画开始）到 1（动画结束）范围内的值。\n\neasing:\n  all_easings: 所有缓动函数\n  check: 观看缓动变化\n  check_size: 大小\n  check_position: 位置\n  check_opacity: 不透明度\n  current_func: 当前函数\n  linear_func: 线性函数\n  load: 加载中...\n\nopensource:\n  title: 开源\n  translate: 帮助我们将此页面翻译成你的语言\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: 和\n  solovev: Ivan Solovev\n\ntheme:\n  auto: 自动主题\n  light: 亮色主题\n  dark: 深色主题\n"
  },
  {
    "path": "i18n/zh-tw.yml",
    "content": "version: 2\nlang_code: zh-tw\nlang_name: 繁體中文\nrtl: false\n\ntitle: 緩動函數 (Easing function) 小抄\ndescription:\n  使用正確的緩動函數，讓動畫更加真實。\nshare:\n  緩動函數指定了動畫效果在執行時的進度，讓它看起來更加真實。現實生活中的物體不會以等速移動，也不會突然開始或停止。\n  本頁可以在每次你需要時，幫助你找到想要的函數。\n\nabout: __format\n  ~~緩動函數 (Easing function)~~ 能夠調整數值變化的速度。\n\n  現實生活中的物體不會以等速移動，也不會突然開始或停止。例如我們打開抽屜時，首先會加速，\n  然後慢下來。又或是當某個物體由高處往下掉時，首先是越掉越快，撞到地上彈回，最後才又回到地板。\n\n  本頁可以在每次你需要時，幫助你找到想要的函數。\n\nhowtos:\n  css:\n    text: 在 CSS 中，transition 和 animation 這兩個屬性允許您指定緩動函數。\n    edit: 在 ^cubic-bezier.com^ 編輯。\n    with_animation: 在 CSS 中，這個函數可以透過 {{@keyframes}} 實現。\n    example_size: 大小\n    example_position: 位置 \n    example_opacity: 透明度\n\n  postcss:\n    text:\n      在 PostCSS 中，使用緩動函數就方便多了。\n      這個插件 ^postcss-easings^ 能夠將這個網頁的函數名稱轉換為貝茲曲線數值，您只需要輸入名稱就好了。\n    explanation: 等同於 CSS 的程式碼。\n    disabled: \n      很不幸的，這個函數不能透過 PostCSS 插件設定。請使用上方的 {{@keyframes}} 來實現。\n\n  gradient:\n    name: 漸層\n    text: 您可以使用 ^postcss-easing-gradients^ 來繪製漸層。\n\n  mathfunction:\n    name: 公式\n    text:\n      以下是此函數的程式碼，以 TypeScript 編寫。\n      變數 x 表示動畫的進度，範圍在 0 (動畫開始) 到 1 (動畫結束) 之間。\n\neasing:\n  all_easings: 所有函數\n  check: 查看變化\n  check_size: 大小\n  check_position: 位置\n  check_opacity: 透明度\n  current_func: 此函數\n  linear_func: 線性函數\n  load: 載入中...\n\nopensource:\n  title: 開源\n  translate: 幫助我們將此網頁翻譯成您的語言\n\nauthors:\n  sitnik: Andrey Sitnik\n  separator: 和\n  solovev: Ivan Solovev\n\ntheme:\n  auto: 系統預設\n  light: 亮色主題\n  dark: 暗色主題\n"
  },
  {
    "path": "package.json",
    "content": "{\n\t\"name\": \"easings.net\",\n\t\"scripts\": {\n\t\t\"start\": \"node ./scripts/start.js\",\n\t\t\"build\": \"NODE_ENV=production node ./scripts/build.js\",\n\t\t\"lint\": \"eslint ./src/**/*.{ts,js} ./scripts/*.js\"\n\t},\n\t\"browserslist\": [\n\t\t\"defaults\",\n\t\t\"not ie 11\",\n\t\t\"not ie_mob 11\"\n\t],\n\t\"postcss\": {\n\t\t\"plugins\": {\n\t\t\t\"postcss-dark-theme-class\": {},\n\t\t\t\"postcss-pxtorem\": {\n\t\t\t\t\"rootValue\": 16,\n\t\t\t\t\"mediaQuery\": true,\n\t\t\t\t\"propList\": [\n\t\t\t\t\t\"font\",\n\t\t\t\t\t\"font-size\",\n\t\t\t\t\t\"line-height\",\n\t\t\t\t\t\"letter-spacing\",\n\t\t\t\t\t\"margin\",\n\t\t\t\t\t\"padding\"\n\t\t\t\t]\n\t\t\t},\n\t\t\t\"postcss-flexbugs-fixes\": {},\n\t\t\t\"postcss-font-family-system-ui\": {},\n\t\t\t\"autoprefixer\": {}\n\t\t}\n\t},\n\t\"devDependencies\": {\n\t\t\"@babel/core\": \"^7.11.4\",\n\t\t\"@babel/preset-env\": \"^7.11.0\",\n\t\t\"@typescript-eslint/eslint-plugin\": \"^3.9.1\",\n\t\t\"@typescript-eslint/parser\": \"^3.9.1\",\n\t\t\"autoprefixer\": \"^9.8.6\",\n\t\t\"css-mqpacker\": \"^7.0.0\",\n\t\t\"eslint\": \"^7.7.0\",\n\t\t\"eslint-config-prettier\": \"^6.11.0\",\n\t\t\"eslint-plugin-babel\": \"^5.3.1\",\n\t\t\"eslint-plugin-import\": \"^2.22.0\",\n\t\t\"eslint-plugin-prettier\": \"^3.1.4\",\n\t\t\"express\": \"^4.17.1\",\n\t\t\"htmlnano\": \"^0.2.6\",\n\t\t\"js-yaml\": \"^3.14.0\",\n\t\t\"mustache\": \"^4.0.1\",\n\t\t\"parcel-bundler\": \"^1.12.4\",\n\t\t\"postcss\": \"^7.0.32\",\n\t\t\"postcss-dark-theme-class\": \"^0.4.0\",\n\t\t\"postcss-flexbugs-fixes\": \"^4.2.1\",\n\t\t\"postcss-font-family-system-ui\": \"^4.3.0\",\n\t\t\"postcss-preset-env\": \"^6.7.0\",\n\t\t\"postcss-pxtorem\": \"^5.1.1\",\n\t\t\"posthtml\": \"^0.13.3\",\n\t\t\"prettier\": \"^2.1.0\",\n\t\t\"pug\": \"^3.0.0\",\n\t\t\"terser\": \"^5.2.1\",\n\t\t\"typescript\": \"^4.0.2\"\n\t},\n\t\"dependencies\": {\n\t\t\"focus-visible\": \"^5.1.0\"\n\t}\n}\n"
  },
  {
    "path": "scripts/build.js",
    "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst { promisify } = require(\"util\");\nconst yamlParse = require(\"js-yaml\");\nconst Mustache = require(\"mustache\");\n\nconst readFile = promisify(fs.readFile);\nconst writeFile = promisify(fs.writeFile);\nconst unlink = promisify(fs.unlink);\nconst copyFile = promisify(fs.copyFile);\n\nconst Parcel = require(\"parcel-bundler\");\n\nconst PostHTML = require(\"posthtml\");\nconst PostHTMLNano = require(\"htmlnano\");\nconst MQPacker = require(\"css-mqpacker\");\nconst PostCSS = require(\"postcss\");\nconst Terser = require(\"terser\");\n\nconst format = require(\"./helpers/format\");\nconst i18nDir = path.join(process.cwd(), \"i18n\");\n\n/**\n * @type {Lang[]}\n */\nconst langList = fs\n\t.readdirSync(i18nDir)\n\t.filter((filename) => !/^_/.test(filename) && /\\.ya?ml$/i.test(filename))\n\t.map((filename) => fs.readFileSync(path.join(i18nDir, filename)))\n\t.map((file) => yamlParse.load(file))\n\t.filter((dic) => dic.version && dic.version > 1 && dic.lang_name);\n\nconst addedSelectors = [\n\t\"js-info-name\",\n\t\"js-info-func\",\n\t\"js-info-simple\",\n\t\"js-info-complex\",\n\t\"js-info-maths\",\n\t\"js-cubic-bezier\",\n\t\"example-copy__icon-action\",\n\t\"footer__theme\",\n];\n\nconst ignoreSelectors = [\"is-light\", \"is-dark\"];\n\nconst htmlMinifyOptions = {\n\tmergeScripts: false,\n\tminifySvg: false,\n};\n\nconst shortCssClassName = generateCssClassName();\n\nconst bundler = new Parcel(\"./src/index.pug\", {\n\tsourceMaps: false,\n\tscopeHoist: true,\n\tpublicUrl: \"./\",\n});\n\nconst errorBundler = new Parcel(\"./src/404.pug\", {\n\tsourceMaps: false,\n\tscopeHoist: true,\n\tpublicUrl: \"./\",\n});\n\nasync function build() {\n\tawait errorBundler.bundle();\n\n\tlet serviceWorkerCode = await readFile(\"./src/sw.js\", \"utf8\");\n\tconst bundleHome = await bundler.bundle();\n\tconst bundleAssets = findAssets(bundleHome);\n\n\tconst cssFile = bundleAssets.find(\n\t\t(item) => item.type === \"css\" && item.entryName === \"index.css\"\n\t);\n\tconst keyframesFile = bundleAssets.find(\n\t\t(item) => item.type === \"css\" && item.entryName === \"keyframes.css\"\n\t);\n\tconst jsFile = bundleAssets.find(\n\t\t(item) => item.type === \"js\" && item.entryName === \"index.ts\"\n\t);\n\n\tlet cssData = await readFile(cssFile.name, \"utf8\");\n\tlet keyframesData = await readFile(keyframesFile.name, \"utf8\");\n\tlet jsData = await readFile(jsFile.name, \"utf8\");\n\n\tawait Promise.all([\n\t\tunlink(cssFile.name),\n\t\tunlink(keyframesFile.name),\n\t\tunlink(jsFile.name),\n\t]);\n\n\tconst classesList = {};\n\n\tignoreSelectors.forEach((item) => {\n\t\tclassesList[item] = item;\n\t});\n\n\taddedSelectors.forEach((item) => {\n\t\tclassesList[item] = shortCssClassName.next().value;\n\t});\n\n\tfunction cssPlugin(root) {\n\t\troot.walkRules((rule) => {\n\t\t\trule.selector = rule.selector.replace(/\\.[\\w_-]+/g, (str) => {\n\t\t\t\tconst kls = str.substr(1);\n\n\t\t\t\tif (!classesList[kls]) {\n\t\t\t\t\tclassesList[kls] = shortCssClassName.next().value;\n\t\t\t\t}\n\n\t\t\t\treturn \".\" + classesList[kls];\n\t\t\t});\n\t\t});\n\t}\n\n\tconst stylesKeyframe = await PostCSS().process(keyframesData, {\n\t\tfrom: keyframesFile.name,\n\t});\n\n\tawait writeFile(keyframesFile.name, stylesKeyframe.css);\n\n\tawait copyFile(\"./src/favicon.ico\", \"./dist/favicon.ico\");\n\n\tconst styles = await PostCSS([cssPlugin, MQPacker]).process(cssData, {\n\t\tfrom: cssFile.name,\n\t});\n\n\tObject.keys(classesList).forEach((origin) => {\n\t\tconst startSelector = `[\"'.]`;\n\t\tconst endSelector = `[\"'\\\\s\\\\[):,+~>]`;\n\n\t\tjsData = jsData.replace(\n\t\t\tnew RegExp(`(${startSelector})${origin}(${endSelector})`, \"g\"),\n\t\t\t`$1${classesList[origin]}$2`\n\t\t);\n\t});\n\n\tjsData = jsData\n\t\t.replace(\n\t\t\t/parcelRequire=function.*\\(function \\(require\\)\\s?{/i,\n\t\t\t\"(function(window,document){\"\n\t\t)\n\t\t.replace(/}\\);$/, \"})(window,document);\");\n\n\tconst minifyJS = await Terser.minify(jsData, {\n\t\ttoplevel: true,\n\t});\n\n\tawait writeFile(jsFile.name, minifyJS.code);\n\n\tbundleAssets.forEach((asset) => {\n\t\tserviceWorkerCode = serviceWorkerCode.replace(\n\t\t\tnew RegExp(`['\"]${asset.entryName}['\"]`, \"g\"),\n\t\t\t`\"/${path.basename(asset.name)}\"`\n\t\t);\n\t});\n\n\tserviceWorkerCode = (await Terser.minify(serviceWorkerCode)).code;\n\n\tfunction htmlPlugin(lang = \"en\") {\n\t\treturn (tree) => {\n\t\t\ttree.match({ attrs: { class: true } }, (i) => ({\n\t\t\t\ttag: i.tag,\n\t\t\t\tcontent: i.content,\n\t\t\t\tattrs: {\n\t\t\t\t\t...i.attrs,\n\t\t\t\t\tclass: i.attrs.class\n\t\t\t\t\t\t.split(\" \")\n\t\t\t\t\t\t.map((origin) => {\n\t\t\t\t\t\t\tif (!(origin in classesList)) {\n\t\t\t\t\t\t\t\tconsole.error(`Class \"${origin}\" don't use`);\n\t\t\t\t\t\t\t\treturn \"\";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn classesList[origin];\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.join(\" \"),\n\t\t\t\t},\n\t\t\t}));\n\n\t\t\ttree.match({ tag: \"link\", attrs: { rel: \"stylesheet\" } }, (file) => {\n\t\t\t\tif (file.attrs.href.includes(\"src.\")) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\ttag: \"style\",\n\t\t\t\t\t\tcontent: styles.css,\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn file;\n\t\t\t});\n\n\t\t\ttree.match({ tag: \"link\", attrs: { rel: \"manifest\" } }, (file) => ({\n\t\t\t\ttag: \"link\",\n\t\t\t\tattrs: {\n\t\t\t\t\t...file.attrs,\n\t\t\t\t\thref: `manifest.${lang}.json`,\n\t\t\t\t},\n\t\t\t}));\n\n\t\t\ttree.match({ tag: \"meta\", attrs: { property: \"og:image\" } }, (file) => ({\n\t\t\t\ttag: \"meta\",\n\t\t\t\tattrs: {\n\t\t\t\t\t...file.attrs,\n\t\t\t\t\tcontent: `https://easings.net/${file.attrs.content}`,\n\t\t\t\t},\n\t\t\t}));\n\t\t};\n\t}\n\n\tconst manifest = bundleAssets.find((asset) => asset.type === \"webmanifest\");\n\tconst manifestFile = await readFile(manifest.name, \"utf8\");\n\n\tawait bundleAssets\n\t\t.filter((i) => i.type === \"html\")\n\t\t.map(async (item) => {\n\t\t\tconst file = await readFile(item.name);\n\t\t\tconst html = PostHTML([]).process(file, { sync: true }).html;\n\n\t\t\tif (/\\/index\\.html$/i.test(item.name)) {\n\t\t\t\tconst distDirName = path.dirname(item.name);\n\n\t\t\t\tawait langList.map(async (lang) => {\n\t\t\t\t\tconst viewData = format(\n\t\t\t\t\t\tlang,\n\t\t\t\t\t\tlangList.map((dic) => ({\n\t\t\t\t\t\t\tcode: dic.lang_code,\n\t\t\t\t\t\t\tname: dic.lang_name,\n\t\t\t\t\t\t}))\n\t\t\t\t\t);\n\n\t\t\t\t\tconst htmlFragment = Mustache.render(html, viewData);\n\t\t\t\t\tconst manifestLang = Mustache.render(manifestFile, viewData);\n\n\t\t\t\t\tawait writeFile(\n\t\t\t\t\t\tpath.join(distDirName, `sw.${lang.lang_code}.js`),\n\t\t\t\t\t\tserviceWorkerCode.replace(\"/:lang\", `/${lang.lang_code}`)\n\t\t\t\t\t);\n\n\t\t\t\t\tawait writeFile(\n\t\t\t\t\t\tpath.join(distDirName, `manifest.${lang.lang_code}.json`),\n\t\t\t\t\t\tmanifestLang\n\t\t\t\t\t);\n\n\t\t\t\t\tconst htmlMinFragment = await PostHTML([\n\t\t\t\t\t\tPostHTMLNano(htmlMinifyOptions),\n\t\t\t\t\t])\n\t\t\t\t\t\t.use(htmlPlugin(lang.lang_code))\n\t\t\t\t\t\t.process(htmlFragment);\n\n\t\t\t\t\tawait writeFile(\n\t\t\t\t\t\tpath.join(distDirName, `${lang.lang_code}.html`),\n\t\t\t\t\t\thtmlMinFragment.html.replace(/>\\s</g, \"><\")\n\t\t\t\t\t);\n\t\t\t\t});\n\n\t\t\t\tconst engLang = langList.find((lang) => lang.lang_code === \"en\");\n\t\t\t\tconst htmlFragment = Mustache.render(\n\t\t\t\t\thtml,\n\t\t\t\t\tformat(\n\t\t\t\t\t\tengLang,\n\t\t\t\t\t\tlangList.map((dic) => ({\n\t\t\t\t\t\t\tcode: dic.lang_code,\n\t\t\t\t\t\t\tname: dic.lang_name,\n\t\t\t\t\t\t}))\n\t\t\t\t\t)\n\t\t\t\t);\n\n\t\t\t\tconst htmlMinFragment = await PostHTML([\n\t\t\t\t\tPostHTMLNano(htmlMinifyOptions),\n\t\t\t\t])\n\t\t\t\t\t.use(htmlPlugin())\n\t\t\t\t\t.process(htmlFragment);\n\n\t\t\t\tawait writeFile(item.name, htmlMinFragment.html.replace(/>\\s</g, \"><\"));\n\t\t\t} else {\n\t\t\t\tawait writeFile(\n\t\t\t\t\titem.name,\n\t\t\t\t\tPostHTML([]).use(htmlPlugin()).process(file, { sync: true }).html\n\t\t\t\t);\n\t\t\t}\n\t\t});\n}\n\nbuild().catch((error) => {\n\tprocess.stderr.write(error.stack + \"\\n\");\n\tprocess.exit(1);\n});\n\nfunction findAssets(bundle) {\n\treturn Array.from(bundle.childBundles).reduce(\n\t\t(all, item) => all.concat(findAssets(item)),\n\t\t[\n\t\t\t{\n\t\t\t\tname: bundle.name,\n\t\t\t\tentryName: bundle.entryAsset.basename,\n\t\t\t\ttype: bundle.type,\n\t\t\t},\n\t\t]\n\t);\n}\n\nfunction* generateCssClassName() {\n\tconst options = {\n\t\talphabet: \"abcefghijklmnopqrstuvwxyz0123456789-_\",\n\t\tlength: 1,\n\t\tindex: 0,\n\t};\n\n\tconst getClassName = () => {\n\t\tlet result = \"\";\n\n\t\tfor (let i = options.length - 1; i >= 0; i--) {\n\t\t\tconst x = Math.pow(options.alphabet.length, i);\n\t\t\tconst n = Math.floor(options.index / x);\n\t\t\tresult += options.alphabet[n % options.alphabet.length];\n\t\t}\n\n\t\toptions.index++;\n\t\tif (options.index > Math.pow(options.alphabet.length, options.length) - 1) {\n\t\t\toptions.length++;\n\t\t\toptions.index = 0;\n\t\t}\n\n\t\treturn result;\n\t};\n\n\twhile (true) {\n\t\tlet result = getClassName();\n\n\t\twhile (/^[0-9-].*$/.test(result)) {\n\t\t\tresult = getClassName();\n\t\t}\n\n\t\tyield result;\n\t}\n}\n\n/**\n * @typedef {Object} Lang\n * @property {string} lang_code\n * @property {string} lang_name\n * @property {string} version\n */\n"
  },
  {
    "path": "scripts/helpers/format.js",
    "content": "const { join } = require(\"path\");\nconst { readFileSync } = require(\"fs\");\nconst yamlParse = require(\"js-yaml\");\n\nconst fileDefaultDictionary = readFileSync(\n\tjoin(process.cwd(), \"i18n\", \"en.yml\")\n);\nconst defaultDictionary = yamlParse.load(fileDefaultDictionary);\n\nfunction format(dictionary, langList) {\n\tconst helpers = {\n\t\tdir: dictionary.rtl ? \"rtl\" : \"ltr\",\n\t\tshort_name: \"Easings.net\",\n\n\t\tlink: renderLink,\n\t\tlangList: langList.map((item) =>\n\t\t\t[\n\t\t\t\t`<li>`,\n\t\t\t\titem.code === dictionary.lang_code\n\t\t\t\t\t? `<span>${item.name}</span>`\n\t\t\t\t\t: `<a href=\"/${item.code}\" rel=\"alternate\" hreflang=\"${item.code}\">${item.name}</a>`,\n\t\t\t\t`</li>`,\n\t\t\t].join(\"\")\n\t\t),\n\t\tredirect_script: !dictionary.lang_code\n\t\t\t? renderRedirectScript(langList.map((item) => item.code))\n\t\t\t: \"\",\n\n\t\tservice_worker:\n\t\t\tprocess.env.NODE_ENV === \"production\"\n\t\t\t\t? renderRegisterServiceWorker(dictionary.lang_code)\n\t\t\t\t: \"\",\n\t};\n\n\tconst newDictionary = joinDictionary(defaultDictionary, dictionary);\n\treturn Object.assign(formatObject(newDictionary), helpers);\n}\n\nfunction joinDictionary(defaultDictionary, dictionary) {\n\tconst result = {};\n\n\tObject.keys(defaultDictionary).forEach((key) => {\n\t\tif (typeof defaultDictionary[key] !== \"object\") {\n\t\t\tresult[key] =\n\t\t\t\tdictionary !== undefined && dictionary[key] !== undefined\n\t\t\t\t\t? dictionary[key]\n\t\t\t\t\t: defaultDictionary[key];\n\t\t} else {\n\t\t\tresult[key] = joinDictionary(defaultDictionary[key], dictionary[key]);\n\t\t}\n\t});\n\n\treturn result;\n}\n\nfunction formatObject(dictionary) {\n\tconst newDictionary = Object.assign({}, dictionary);\n\n\tfor (let field in newDictionary) {\n\t\tif ({}.hasOwnProperty.call(newDictionary, field)) {\n\t\t\tif (typeof newDictionary[field] !== \"object\") {\n\t\t\t\tnewDictionary[field] = formatString(newDictionary[field]);\n\t\t\t} else {\n\t\t\t\tnewDictionary[field] = formatObject(newDictionary[field]);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn newDictionary;\n}\n\nfunction formatString(source) {\n\tconst text = source.toString().replace(/{{([^}]{2,})}}/g, \"<code>$1</code>\");\n\n\tif (/^__format/i.test(text)) {\n\t\tconst newText = text\n\t\t\t.replace(/^__format?\\s/i, \"\")\n\t\t\t.replace(/~~([^~]{2,})~~/g, \"<strong>$1</strong>\")\n\t\t\t.replace(/\\n/g, \"</p><p>\");\n\n\t\treturn `<p>${newText}</p>`;\n\t}\n\n\treturn text;\n}\n\nfunction renderLink() {\n\treturn (fragment, render) => {\n\t\tconst [text, linkAttr] = fragment.match(/(\\([^)]+\\)|\\[[^\\]]+\\])/g);\n\t\tconst renderText = render(text.replace(/\\(([^)]+)\\)/, \"{{$1}}\"));\n\n\t\treturn renderText\n\t\t\t.replace(/\\((.*)\\)/, \"$1\")\n\t\t\t.replace(\n\t\t\t\t/\\^([^^]+)\\^/,\n\t\t\t\t`<a ${linkAttr.replace(/^\\[(.*)\\]$/, \"$1\")}>$1</a>`\n\t\t\t);\n\t};\n}\n\nfunction renderRedirectScript(langList) {\n\treturn `\n\t\t<script>\n\t\t\t(function () {\n\t\t\t\tvar translations = ${JSON.stringify(langList)};\n\n\t\t\t\tvar system = navigator.userLanguage || navigator.language;\n\t\t\t\tvar dialect = system.toLowerCase();\n\t\t\t\tvar language = dialect.replace(/-\\\\w+$/, \"\");\n\n\t\t\t\tif (language === \"no\") {\n\t\t\t\t\tlanguage = \"nb\";\n\t\t\t\t} else if (language === \"zh\") {\n\t\t\t\t\tlanguage = \"zh-cn\";\n\t\t\t\t}\n\n\t\t\t\tfunction find(user) {\n\t\t\t\t\tfor (var i = 0; i < translations.length; i++) {\n\t\t\t\t\t\tif (user === translations[i]) {\n\t\t\t\t\t\t\tlocation.replace('/' + translations[i])\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tfind(dialect);\n\t\t\t\tfind(language);\n\t\t\t})();\n\t\t</script>\n\t`;\n}\n\nfunction renderRegisterServiceWorker(lang) {\n\treturn `\n\t\t<script>\n\t\t\tif (\"serviceWorker\" in navigator) {\n\t\t\t\tnavigator\n\t\t\t\t\t.serviceWorker\n\t\t\t\t\t.register(\"./sw.${lang}.js\")\n\t\t\t\t\t.then(() => navigator.serviceWorker.ready)\n\t\t\t\t\t.then((worker) => worker.sync.register(\"syncdata\"))\n\t\t\t\t\t.catch((error) => console.log(error))\n\t\t\t}\n\t\t</script>\n\t`;\n}\n\nmodule.exports = format;\n"
  },
  {
    "path": "scripts/start.js",
    "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst yamlParse = require(\"js-yaml\");\n\nconst Parcel = require(\"parcel-bundler\");\nconst app = require(\"express\")();\nconst Mustache = require(\"mustache\");\n\nconst format = require(\"./helpers/format\");\n\nconst i18nDir = path.join(process.cwd(), \"i18n\");\nconst langList = fs\n\t.readdirSync(i18nDir)\n\t.filter((filename) => !/^_/.test(filename))\n\t.filter((filename) => /\\.ya?ml$/i.test(filename))\n\t.map((filename) => fs.readFileSync(path.join(i18nDir, filename)))\n\t.map((file) => yamlParse.load(file))\n\t.filter((dic) => dic.version && dic.version > 1 && dic.lang_name)\n\t.map((dic) => ({\n\t\tcode: dic.lang_code,\n\t\tname: dic.lang_name,\n\t}));\n\nconst bundler = new Parcel(\"./src/*.pug\", {\n\twatch: true,\n\thmr: true,\n});\n\napp.use(\"/\", renderIndexPage);\napp.use(\"/:lang\", renderIndexPage);\n\napp.use(bundler.middleware());\napp.listen(1234);\n\nfunction renderIndexPage(req, res, next) {\n\tif (\n\t\treq.originalUrl === \"/\" ||\n\t\t(req.params.lang && req.params.lang.match(/^[a-zA-Z]{2}$/))\n\t) {\n\t\tconst lang = req.params.lang;\n\n\t\tbundler.bundle().then((data) => {\n\t\t\tlet indexHtml = \"\";\n\n\t\t\tif (data.type === \"html\") {\n\t\t\t\tindexHtml = data.entryAsset.generated.html;\n\t\t\t} else {\n\t\t\t\tdata.childBundles.forEach((item) => {\n\t\t\t\t\tif (item.entryAsset.id === \"index.pug\") {\n\t\t\t\t\t\tindexHtml = item.entryAsset.generated.html;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst langFile = fs.readFileSync(\n\t\t\t\t\t`./i18n/${lang ? lang : \"en\"}.yml`,\n\t\t\t\t\t\"utf8\"\n\t\t\t\t);\n\t\t\t\tconst viewData = yamlParse.load(langFile);\n\n\t\t\t\tif (viewData.version >= 2) {\n\t\t\t\t\tres.send(Mustache.render(indexHtml, format(viewData, langList)));\n\t\t\t\t} else {\n\t\t\t\t\tres.writeHead(406);\n\t\t\t\t\tres.end(\"The translation must be at least the 2nd version!\");\n\t\t\t\t}\n\t\t\t} catch (e) {\n\t\t\t\tconsole.log(e);\n\t\t\t\tres.writeHead(404);\n\t\t\t\tres.end(\"The translation does not exist!\");\n\t\t\t}\n\t\t});\n\t} else {\n\t\tnext();\n\t}\n}\n"
  },
  {
    "path": "src/404.css",
    "content": "@import \"./variables/variables.css\";\n@import \"./core/core.css\";\n@import \"./error/error.css\";\n"
  },
  {
    "path": "src/404.pug",
    "content": "include error/error\n\ndoctype html\nhtml(lang=\"en\")\n\thead\n\t\tmeta(charset=\"utf-8\")\n\t\tmeta(name=\"viewport\" content=\"width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover\")\n\t\tmeta(http-equiv=\"x-ua-compatible\" content=\"ie=edge\")\n\n\t\ttitle Page not found\n\t\tmeta(name=\"theme-color\" content=\"#1473e6\")\n\t\tlink(rel=\"manifest\" href=\"./manifest.webmanifest\")\n\t\tlink(rel=\"icon\" type=\"image/png\" href=\"./icons/96.png\")\n\t\tlink(rel=\"mask-icon\" href=\"./icons/mask.svg\" color=\"#1473e6\" sizes=\"any\")\n\n\t\tmeta(property=\"og:url\" content=\"http://easings.net/\")\n\t\tmeta(property=\"og:image\" content=\"./icons/192.png\")\n\n\t\tlink(href=\"./404.css\" rel=\"stylesheet\")\n\n\tbody\n\t\t+error\n"
  },
  {
    "path": "src/animation/easeInBounce.css",
    "content": "@keyframes opacity-easeInBounce {\n\t0% {\n\t\topacity: 1;\n\t}\n\n\t4% {\n\t\topacity: 0.985;\n\t}\n\n\t8% {\n\t\topacity: 0.995;\n\t}\n\n\t18% {\n\t\topacity: 0.938;\n\t}\n\n\t26% {\n\t\topacity: 0.9837;\n\t}\n\n\t46% {\n\t\topacity: 0.78;\n\t}\n\n\t64% {\n\t\topacity: 0.98;\n\t}\n\n\t76% {\n\t\topacity: 0.436;\n\t}\n\n\t88% {\n\t\topacity: 0.109;\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes scale-easeInBounce {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\n\t4% {\n\t\ttransform: scale(0.984);\n\t}\n\n\t8% {\n\t\ttransform: scale(0.995);\n\t}\n\n\t18% {\n\t\ttransform: scale(0.938);\n\t}\n\n\t26% {\n\t\ttransform: scale(0.9837);\n\t}\n\n\t46% {\n\t\ttransform: scale(0.78);\n\t}\n\n\t64% {\n\t\ttransform: scale(0.98);\n\t}\n\n\t76% {\n\t\ttransform: scale(0.436);\n\t}\n\n\t88% {\n\t\ttransform: scale(0.109);\n\t}\n\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n\n@keyframes translate-easeInBounce {\n\t0% {\n\t\ttransform: translateX(0%);\n\t}\n\n\t4% {\n\t\ttransform: translateX(-1.6%);\n\t}\n\n\t8% {\n\t\ttransform: translateX(-0.5%);\n\t}\n\n\t18% {\n\t\ttransform: translateX(-6.8%);\n\t}\n\n\t26% {\n\t\ttransform: translateX(-1.7%);\n\t}\n\n\t46% {\n\t\ttransform: translateX(-22%);\n\t}\n\n\t64% {\n\t\ttransform: translateX(-2%);\n\t}\n\n\t76% {\n\t\ttransform: translateX(-56.4%);\n\t}\n\n\t88% {\n\t\ttransform: translateX(-89.1%);\n\t}\n\n\t100% {\n\t\ttransform: translateX(-100%);\n\t}\n}\n\n@keyframes cursor-easeInBounce {\n\t0% {\n\t\ttop: 101%;\n\t\tcolor: var(--main-text-color);\n\t}\n\n\t4% {\n\t\ttop: 99%;\n\t}\n\n\t8% {\n\t\ttop: 101%;\n\t}\n\n\t18% {\n\t\ttop: 95%;\n\t}\n\n\t26% {\n\t\ttop: 99%;\n\t}\n\n\t46% {\n\t\ttop: 76%;\n\t}\n\n\t64% {\n\t\ttop: 99%;\n\t\tcolor: var(--main-text-color);\n\t}\n\n\t76% {\n\t\ttop: 45%;\n\t}\n\n\t88% {\n\t\ttop: 12%;\n\t}\n\n\t100% {\n\t\ttop: 1%;\n\t\tcolor: var(--second-color);\n\t}\n}\n"
  },
  {
    "path": "src/animation/easeInElastic.css",
    "content": "@keyframes opacity-easeInElastic {\n\t0%, 2%, 18%, 32%, 48%, 62%, 78%, 88% {\n\t\topacity: 1;\n\t}\n\n\t8%, 14% {\n\t\topacity: 0.99;\n\t}\n\n\t40%, 42% {\n\t\topacity: 0.98;\n\t}\n\n\t70%, 72% {\n\t\topacity: 0.87;\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes scale-easeInElastic {\n\t0%, 4%, 18% {\n\t\ttransform: scale(1);\n\t}\n\n\t8%, 14% {\n\t\ttransform: scale(0.99);\n\t}\n\n\t26%, 28% {\n\t\ttransform: scale(1.01);\n\t}\n\n\t40%, 42% {\n\t\ttransform: scale(0.98);\n\t}\n\n\t56%, 58% {\n\t\ttransform: scale(1.05);\n\t}\n\n\t72% {\n\t\ttransform: scale(0.87);\n\t}\n\n\t86% {\n\t\ttransform: scale(1.37);\n\t}\n\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n\n@keyframes translate-easeInElastic {\n\t0%, 4%, 18% {\n\t\ttransform: translateX(0%);\n\t}\n\n\t8%, 14% {\n\t\ttransform: translateX(-0.2%);\n\t}\n\n\t26%, 28% {\n\t\ttransform: translateX(0.6%);\n\t}\n\n\t40%, 42% {\n\t\ttransform: translateX(-1.6%);\n\t}\n\n\t56%, 58% {\n\t\ttransform: translateX(4.6%);\n\t}\n\n\t72% {\n\t\ttransform: translateX(-13.1%);\n\t}\n\n\t86% {\n\t\ttransform: translateX(37.1%);\n\t}\n\n\t100% {\n\t\ttransform: translateX(-100%);\n\t}\n}\n\n@keyframes cursor-easeInElastic {\n\t0%, 4%, 18% {\n\t\ttop: 101%;\n\t\tcolor: var(--main-text-color);\n\t}\n\n\t8%, 14% {\n\t\ttop: 100%;\n\t}\n\n\t26%, 28% {\n\t\ttop: 102%;\n\t}\n\n\t40%, 42% {\n\t\ttop: 99%;\n\t}\n\n\t56%, 58% {\n\t\ttop: 105%;\n\t}\n\n\t72% {\n\t\ttop: 88%;\n\t}\n\n\t86% {\n\t\ttop: 138%;\n\t\tcolor: var(--main-text-color);\n\t}\n\n\t100% {\n\t\ttop: 1%;\n\t\tcolor: var(--second-color);\n\t}\n}\n"
  },
  {
    "path": "src/animation/easeInOutBounce.css",
    "content": "@keyframes opacity-easeInOutBounce {\n\t0% {\n\t\topacity: 1;\n\t}\n\n\t2%, 14%, 32% {\n\t\topacity: 0.99;\n\t}\n\n\t4% {\n\t\topacity: 0.997;\n\t}\n\n\t10% {\n\t\topacity: 0.97;\n\t}\n\n\t22% {\n\t\topacity: 0.876;\n\t}\n\n\t42% {\n\t\topacity: 0.597;\n\t}\n\n\t50% {\n\t\topacity: 0.5;\n\t}\n\n\t58% {\n\t\topacity: 0.403;\n\t}\n\n\t68%, 86%, 98% {\n\t\topacity: 0.01;\n\t}\n\n\t78% {\n\t\topacity: 0.124;\n\t}\n\n\t90% {\n\t\topacity: 0.03;\n\t}\n\n\t96% {\n\t\topacity: 0.003;\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes scale-easeInOutBounce {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\n\t2%, 14%, 32% {\n\t\ttransform: scale(0.99);\n\t}\n\n\t4% {\n\t\ttransform: scale(0.997);\n\t}\n\n\t10% {\n\t\ttransform: scale(0.97);\n\t}\n\n\t22% {\n\t\ttransform: scale(0.876);\n\t}\n\n\t42% {\n\t\ttransform: scale(0.597);\n\t}\n\n\t50% {\n\t\ttransform: scale(0.5);\n\t}\n\n\t58% {\n\t\ttransform: scale(0.403);\n\t}\n\n\t68%, 86%, 98% {\n\t\ttransform: scale(0.01);\n\t}\n\n\t78% {\n\t\ttransform: scale(0.124);\n\t}\n\n\t90% {\n\t\ttransform: scale(0.03);\n\t}\n\n\t96% {\n\t\ttransform: scale(0.003);\n\t}\n\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n\n@keyframes translate-easeInOutBounce {\n\t0% {\n\t\ttransform: translateX(0%);\n\t}\n\n\t2%, 14%, 32% {\n\t\ttransform: translateX(-1%);\n\t}\n\n\t4% {\n\t\ttransform: translateX(-0.3%);\n\t}\n\n\t10% {\n\t\ttransform: translateX(-3%);\n\t}\n\n\t22% {\n\t\ttransform: translateX(-12.4%);\n\t}\n\n\t42% {\n\t\ttransform: translateX(-40.3%);\n\t}\n\n\t50% {\n\t\ttransform: translateX(-50%);\n\t}\n\n\t58% {\n\t\ttransform: translateX(-59.7%);\n\t}\n\n\t68%, 86%, 98% {\n\t\ttransform: translateX(-99%);\n\t}\n\n\t78% {\n\t\ttransform: translateX(-87.6%);\n\t}\n\n\t90% {\n\t\ttransform: translateX(-97%);\n\t}\n\n\t96% {\n\t\ttransform: translateX(-99.7%);\n\t}\n\n\t100% {\n\t\ttransform: translateX(-100%);\n\t}\n}\n\n@keyframes cursor-easeInOutBounce {\n\t0% {\n\t\ttop: 101%;\n\t\tcolor: var(--brand-color);\n\t}\n\n\t2%, 14%, 32% {\n\t\ttop: 100%;\n\t}\n\n\t4% {\n\t\ttop: 101%;\n\t}\n\n\t10% {\n\t\ttop: 98%;\n\t}\n\n\t22% {\n\t\ttop: 89%;\n\t\tcolor: var(--brand-color);\n\t}\n\n\t42% {\n\t\ttop: 63%;\n\t}\n\n\t50% {\n\t\ttop: 51%;\n\t}\n\n\t58% {\n\t\ttop: 39%;\n\t}\n\n\t68%, 86%, 98% {\n\t\ttop: 2%;\n\t}\n\n\t78% {\n\t\ttop: 13%;\n\t\tcolor: var(--second-color);\n\t}\n\n\t90% {\n\t\ttop: 4%;\n\t}\n\n\t96% {\n\t\ttop: 1%;\n\t}\n\n\t100% {\n\t\ttop: 1%;\n\t\tcolor: var(--second-color);\n\t}\n}\n"
  },
  {
    "path": "src/animation/easeInOutElastic.css",
    "content": "@keyframes opacity-easeInOutElastic {\n\t0%, 16%, 22%, 36% {\n\t\topacity: 1;\n\t}\n\n\t4%, 8% {\n\t\topacity: 0.95;\n\t}\n\n\t28%, 32% {\n\t\topacity: 0.9;\n\t}\n\n\t70%, 72% {\n\t\topacity: 0.1;\n\t}\n\n\t90%, 92% {\n\t\topacity: 0.05;\n\t}\n\n\t76%, 86%, 96%, 100% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes scale-easeInOutElastic {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\n\t4%, 8% {\n\t\ttransform: scale(0.999);\n\t}\n\n\t18%, 20% {\n\t\ttransform: scale(1.01);\n\t}\n\n\t28%, 30% {\n\t\ttransform: scale(0.97);\n\t}\n\n\t38%, 40% {\n\t\ttransform: scale(1.1);\n\t}\n\n\t60%, 62% {\n\t\ttransform: scale(-0.1);\n\t}\n\n\t70%, 72% {\n\t\ttransform: scale(0.03);\n\t}\n\n\t80%, 82% {\n\t\ttransform: scale(-0.01);\n\t}\n\n\t90%, 92% {\n\t\ttransform: scale(0.001);\n\t}\n\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n\n@keyframes translate-easeInOutElastic {\n\t0% {\n\t\ttransform: translateX(0%);\n\t}\n\n\t4%, 8% {\n\t\ttransform: translateX(-0.1%);\n\t}\n\n\t18%, 20% {\n\t\ttransform: translateX(0.5%);\n\t}\n\n\t28%, 30% {\n\t\ttransform: translateX(-2.4%);\n\t}\n\n\t38%, 40% {\n\t\ttransform: translateX(10%);\n\t}\n\n\t60%, 62% {\n\t\ttransform: translateX(-110%);\n\t}\n\n\t70%, 72% {\n\t\ttransform: translateX(-97.6%);\n\t}\n\n\t80%, 82% {\n\t\ttransform: translateX(-100.5%);\n\t}\n\n\t90%, 92% {\n\t\ttransform: translateX(-99.9%);\n\t}\n\n\t100% {\n\t\ttransform: translateX(-100%);\n\t}\n}\n\n@keyframes cursor-easeInOutElastic {\n\t0% {\n\t\ttop: 101%;\n\t\tcolor: var(--brand-color);\n\t}\n\n\t4%, 8% {\n\t\ttop: 100%;\n\t}\n\n\t18%, 20% {\n\t\ttop: 102%;\n\t}\n\n\t28%, 30% {\n\t\ttop: 99%;\n\t}\n\n\t38%, 40% {\n\t\ttop: 113%;\n\t\tcolor: var(--brand-color);\n\t}\n\n\t60%, 62% {\n\t\ttop: -11%;\n\t}\n\n\t70%, 72% {\n\t\ttop: 3.3%;\n\t\tcolor: var(--second-color);\n\t}\n\n\t80%, 82% {\n\t\ttop: 0%;\n\t}\n\n\t90%, 92% {\n\t\ttop: 2%;\n\t}\n\n\t100% {\n\t\ttop: 1%;\n\t\tcolor: var(--second-color);\n\t}\n}\n"
  },
  {
    "path": "src/animation/easeOutBounce.css",
    "content": "@keyframes opacity-easeOutBounce {\n\t0% {\n\t\topacity: 1;\n\t}\n\n\t12% {\n\t\topacity: 0.891;\n\t}\n\n\t24% {\n\t\topacity: 0.564;\n\t}\n\n\t36% {\n\t\topacity: 0.02;\n\t}\n\n\t54% {\n\t\topacity: 0.25;\n\t}\n\n\t74% {\n\t\topacity: 0.016;\n\t}\n\n\t82% {\n\t\topacity: 0.0625;\n\t}\n\n\t92% {\n\t\topacity: 0.007;\n\t}\n\n\t96% {\n\t\topacity: 0.015;\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes scale-easeOutBounce {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\n\t12% {\n\t\ttransform: scale(0.891);\n\t}\n\n\t24% {\n\t\ttransform: scale(0.564);\n\t}\n\n\t36% {\n\t\ttransform: scale(0.02);\n\t}\n\n\t54% {\n\t\ttransform: scale(0.25);\n\t}\n\n\t74% {\n\t\ttransform: scale(0.016);\n\t}\n\n\t82% {\n\t\ttransform: scale(0.0625);\n\t}\n\n\t92% {\n\t\ttransform: scale(0.007);\n\t}\n\n\t96% {\n\t\ttransform: scale(0.015);\n\t}\n\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n\n@keyframes translate-easeOutBounce {\n\t0% {\n\t\ttransform: translateX(0%);\n\t}\n\n\t12% {\n\t\ttransform: translateX(-10.89%);\n\t}\n\n\t24% {\n\t\ttransform: translateX(-43.56%);\n\t}\n\n\t36% {\n\t\ttransform: translateX(-98%);\n\t}\n\n\t54% {\n\t\ttransform: translateX(-75%);\n\t}\n\n\t74% {\n\t\ttransform: translateX(-98.4%);\n\t}\n\n\t82% {\n\t\ttransform: translateX(-93.75%);\n\t}\n\n\t92% {\n\t\ttransform: translateX(-99.3%);\n\t}\n\n\t96% {\n\t\ttransform: translateX(-98.5%);\n\t}\n\n\t100% {\n\t\ttransform: translateX(-100%);\n\t}\n}\n\n@keyframes cursor-easeOutBounce {\n\t0% {\n\t\ttop: 101%;\n\t\tcolor: var(--brand-color);\n\t}\n\n\t12% {\n\t\ttop: 90%;\n\t}\n\n\t24% {\n\t\ttop: 56%;\n\t}\n\n\t36% {\n\t\ttop: 3%;\n\t\tcolor: var(--main-text-color);\n\t}\n\n\t54% {\n\t\ttop: 25%;\n\t}\n\n\t74% {\n\t\ttop: 3%;\n\t}\n\n\t82% {\n\t\ttop: 7%;\n\t}\n\n\t92% {\n\t\ttop: 1%;\n\t}\n\n\t96% {\n\t\ttop: 3%;\n\t}\n\n\t100% {\n\t\ttop: 1%;\n\t\tcolor: var(--main-text-color);\n\t}\n}\n"
  },
  {
    "path": "src/animation/easeOutElastic.css",
    "content": "@keyframes opacity-easeOutElastic {\n\t0% {\n\t\topacity: 1;\n\t}\n\n\t28% {\n\t\topacity: 0.13;\n\t}\n\n\t56% {\n\t\topacity: 0.014;\n\t}\n\n\t86%, 92% {\n\t\topacity: 0.002;\n\t}\n\n\t8%, 22%, 68%, 82%, 100% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes scale-easeOutElastic {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\n\t16% {\n\t\ttransform: scale(-0.323);\n\t}\n\n\t28% {\n\t\ttransform: scale(0.131);\n\t}\n\n\t44% {\n\t\ttransform: scale(-0.046);\n\t}\n\n\t59% {\n\t\ttransform: scale(0.017);\n\t}\n\n\t73% {\n\t\ttransform: scale(-0.007);\n\t}\n\n\t88% {\n\t\ttransform: scale(0.002);\n\t}\n\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n\n@keyframes translate-easeOutElastic {\n\t0% {\n\t\ttransform: translateX(0%);\n\t}\n\n\t14% {\n\t\ttransform: translateX(-137.1%);\n\t}\n\n\t28% {\n\t\ttransform: translateX(-86.9%);\n\t}\n\n\t44% {\n\t\ttransform: translateX(-104.6%);\n\t}\n\n\t59% {\n\t\ttransform: translateX(-98%);\n\t}\n\n\t73% {\n\t\ttransform: translateX(-100.8%);\n\t}\n\n\t88% {\n\t\ttransform: translateX(-99.8%);\n\t}\n\n\t100% {\n\t\ttransform: translateX(-100%);\n\t}\n}\n\n@keyframes cursor-easeOutElastic {\n\t0% {\n\t\ttop: 101%;\n\t\tcolor: var(--brand-color);\n\t}\n\n\t16% {\n\t\ttop: -31%;\n\t\tcolor: var(--main-text-color);\n\t}\n\n\t28% {\n\t\ttop: 14%;\n\t}\n\n\t44% {\n\t\ttop: -4%;\n\t}\n\n\t59% {\n\t\ttop: 2.6%;\n\t}\n\n\t73% {\n\t\ttop: 0.4%;\n\t}\n\n\t88% {\n\t\ttop: 1.2%;\n\t}\n\n\t100% {\n\t\ttop: 1%;\n\t\tcolor: var(--main-text-color);\n\t}\n}\n"
  },
  {
    "path": "src/animation/index.css",
    "content": "@import \"./easeInElastic.css\";\n@import \"./easeOutElastic.css\";\n@import \"./easeInOutElastic.css\";\n@import \"./easeInBounce.css\";\n@import \"./easeOutBounce.css\";\n@import \"./easeInOutBounce.css\";\n"
  },
  {
    "path": "src/button/button.css",
    "content": ".button {\n\tfont-family: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n\tborder: none;\n\toverflow: visible;\n\ttext-transform: none;\n\toutline: none;\n\theight: auto;\n\tbox-sizing: border-box;\n\n\tposition: relative;\n\tbackground: var(--button-background-color);\n\tcolor: var(--brand-color-text);\n\tfont-stretch: 100%;\n\tfont-weight: 500;\n\ttext-align: center;\n\ttext-decoration: none;\n\tline-height: var(--line-height);\n\tpadding: 1em 1.25em;\n\tdisplay: inline-block;\n\tborder-radius: 0;\n\tcursor: pointer;\n\ttransition: var(--transition-time);\n\tbox-shadow: 0 2px 8px var(--transparent-color-5);\n}\n\n\t.button::after {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\ttop: -4px;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tleft: -4px;\n\t\tpointer-events: none;\n\t\tbox-shadow: 0 0 1px 4px var(--brand-color);\n\t\ttransition: var(--transition-time);\n\t\topacity: 0;\n\t}\n\n\t.button:hover {\n\t\tbackground: var(--brand-darken-color);\n\t\tcolor: var(--brand-darken-color-text);\n\t}\n\n\t.button:focus {\n\t\tbackground: var(--brand-darken-color);\n\t\tcolor: var(--brand-darken-color-text);\n\t}\n\n\t.button:active {\n\t\tbackground: var(--brand-color);\n\t\ttransition: none;\n\t}\n\n\t.button.focus-visible {\n\t\tbox-shadow: none;\n\t}\n\n\t.button.focus-visible::after {\n\t\topacity: 1;\n\t}\n\n\n.button--small {\n\tfont-size: 14px;\n\tpadding: 0.75em 1em;\n}\n"
  },
  {
    "path": "src/card/card.css",
    "content": ".card {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n\t.card__image {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n\n\t.card__wrap {\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-end;\n\t\talign-items: flex-start;\n\t\tbackground: var(--card-overlay);\n\t\tcolor: var(--card-overlay-text);\n\t\tbox-sizing: border-box;\n\t\tpadding: 10px 15px;\n\n\t\ttransition: var(--transition-card-time) linear;\n\t}\n\n\t\t\t.card__wrap--no-transition {\n\t\t\t\ttransition: none;\n\t\t\t}\n\n\t\t\t.card__wrap--opacity {\n\t\t\t\topacity: 0;\n\t\t\t}\n\n\t\t\t.card__wrap--scale {\n\t\t\t\ttransform: scale(0);\n\t\t\t}\n\n\t\t\t.card__wrap--translate {\n\t\t\t\ttransform: translateX(-100%);\n\t\t\t}\n"
  },
  {
    "path": "src/card/card.pug",
    "content": "mixin card(name, isTarget)\n\t.card\n\t\timg.card__image(src=\"./card/card.jpg\" alt=\"\")\n\t\t.card__wrap(data-target=(isTarget ? \"true\" : \"false\"))= name\n"
  },
  {
    "path": "src/card/card.ts",
    "content": "import { forNodeList } from \"../helpers/forNodeList\";\nimport { getTransitionTime } from \"../helpers/getTransitionTime\";\nimport { getElement, getElementsList } from \"../helpers/getElement\";\n\nconst cardTarget = getElement(\".card__wrap[data-target=false]\");\nconst cardTargetWithFunc = getElement(\".card__wrap[data-target=true]\");\nconst casesButtonsList = getElementsList(\".cases__action\");\n\nconst cardTargetClassList: { [key: string]: string } = {\n\topacity: \"card__wrap--opacity\",\n\tscale: \"card__wrap--scale\",\n\ttranslate: \"card__wrap--translate\",\n};\n\nconst cardClassWithoutTransition = \"card__wrap--no-transition\";\n\nlet isReverse = false;\nlet currentName: string;\nlet currentFunc: string;\nlet currentType: string;\n\nforNodeList(casesButtonsList, (button) => {\n\tbutton.addEventListener(\"click\", () => {\n\t\tconst newType = button.getAttribute(\"data-type\");\n\n\t\tsetTransition(cardTarget, newType);\n\n\t\tif (currentName) {\n\t\t\tsetAnimation(newType);\n\t\t} else {\n\t\t\tcardTargetWithFunc.style.transitionTimingFunction = currentFunc;\n\t\t\tsetTransition(cardTargetWithFunc, newType);\n\t\t}\n\n\t\tcurrentType = newType;\n\t});\n});\n\nexport function setFuncForCard(cssFunc: string, name: string): void {\n\tif (cssFunc === \"no\") {\n\t\tcurrentName = name;\n\t} else {\n\t\tcurrentName = null;\n\t\tcurrentFunc = cssFunc;\n\t}\n}\n\nexport function clearTransition(): void {\n\tcardTarget.classList.add(cardClassWithoutTransition);\n\tcardTargetWithFunc.classList.add(cardClassWithoutTransition);\n\tcardTargetWithFunc.removeAttribute(\"style\");\n\n\tcardTarget.classList.remove(\n\t\tcardTargetClassList.opacity,\n\t\tcardTargetClassList.scale,\n\t\tcardTargetClassList.translate\n\t);\n\tcardTargetWithFunc.classList.remove(\n\t\tcardTargetClassList.opacity,\n\t\tcardTargetClassList.scale,\n\t\tcardTargetClassList.translate\n\t);\n\n\trequestAnimationFrame(() => {\n\t\tcardTarget.classList.remove(cardClassWithoutTransition);\n\t\tcardTargetWithFunc.classList.remove(cardClassWithoutTransition);\n\t});\n}\n\nfunction setTransition(target: HTMLElement, newType: string): void {\n\ttarget.classList.add(cardClassWithoutTransition);\n\n\tif (newType !== currentType) {\n\t\ttarget.classList.remove(cardTargetClassList[currentType]);\n\n\t\tvoid target.offsetWidth;\n\t\ttarget.classList.remove(cardClassWithoutTransition);\n\t\ttarget.classList.add(cardTargetClassList[newType]);\n\t} else {\n\t\tvoid target.offsetWidth;\n\t\ttarget.classList.remove(cardClassWithoutTransition);\n\t\ttarget.classList.toggle(cardTargetClassList[newType]);\n\t}\n}\n\nfunction setAnimation(animationType: string): void {\n\tconst time = getTransitionTime(cardTargetWithFunc);\n\tconst animationName = `${animationType}-${currentName}`;\n\tconst styles = window.getComputedStyle(cardTargetWithFunc);\n\n\tif (styles.animationName === animationName) {\n\t\tisReverse = !isReverse;\n\t} else {\n\t\tisReverse = false;\n\t}\n\n\tcardTargetWithFunc.style.animation = \"none\";\n\n\tvoid cardTargetWithFunc.offsetWidth;\n\tcardTargetWithFunc.style.animation = `\n\t\t${animationName} ${time}ms both ${isReverse ? \"reverse\" : \"\"} linear\n\t`;\n}\n"
  },
  {
    "path": "src/case/case.css",
    "content": ".case {\n\tpadding: calc(1.5 * var(--general-line-height)) calc(var(--general-line-height) / 2) 0;\n\tmin-width: 200px;\n\tbox-sizing: border-box;\n\tflex: 1 1 auto;\n}\n\n\t.case__title {\n\t\tpadding: 0 0 calc(var(--general-line-height) / 2);\n\t}\n"
  },
  {
    "path": "src/case/case.pug",
    "content": "include ../card/card\n\nmixin case(name, isTarget)\n\t.case\n\t\t.case__title= `${name}:`\n\t\t+card(name, isTarget)\n"
  },
  {
    "path": "src/cases/cases.css",
    "content": ".cases {}\n\n\t.cases__title {\n\t\tfont-size: 22px;\n\t\tline-height: calc(var(--line-height) - 0.2);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.cases__actions {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: flex-start;\n\t\tmargin: 0 calc(-0.25 * var(--general-line-height));\n\t\ttransition: 0.5s;\n\t}\n\n\t\t.cases__action {\n\t\t\tmargin: calc(var(--general-line-height) / 2) calc(var(--general-line-height) / 4) 0;\n\t\t}\n\n\t.cases__list {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tmargin: 0 calc(-0.5 * var(--general-line-height));\n\t}\n"
  },
  {
    "path": "src/chart/chart.css",
    "content": ".chart {\n\tdisplay: flex;\n\tmax-width: 107px;\n\ttext-decoration: none;\n\theight: 100%;\n\tmin-height: 70px;\n}\n\n\t\t.chart:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t.chart__wrap {\n\t\tposition: relative;\n\t}\n\n\t\t\t.chart__wrap--offset_top {\n\t\t\t\theight: 55px;\n\t\t\t\tmargin-top: auto;\n\t\t\t}\n\n\t\t\t.chart__wrap--offset_bottom {\n\t\t\t\theight: 55px;\n\t\t\t}\n\n\t\t.chart__image {\n\t\t\twidth: 100%;\n\t\t\tmin-width: 50px;\n\t\t\theight: 100%;\n\t\t\toverflow: visible;\n\t\t\tdisplay: block;\n\t\t\tmargin: 0 auto;\n\t\t}\n\n\t\t\t.chart__explanations {\n\t\t\t\topacity: 0;\n\t\t\t\ttransition: var(--transition-time);\n\t\t\t}\n\n\t\t\t\t\t.chart--active .chart__explanations {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\n\t\t\t\t.chart__axis {\n\t\t\t\t\tfill: none;\n\t\t\t\t\tstroke-width: 1px;\n\t\t\t\t\tstroke: var(--gray-lighten-color);\n\t\t\t\t}\n\n\t\t\t\t.chart__text {\n\t\t\t\t\tfill: var(--gray-lighten-color);\n\t\t\t\t\tfont-size: 10px;\n\t\t\t\t}\n\n\n\t\t\t.chart__curve {\n\t\t\t\tfill: none;\n\t\t\t\tstroke-width: 3px;\n\t\t\t\tstroke-linecap: round;\n\t\t\t\ttransition: var(--transition-time);\n\t\t\t\ttransform: translate(1px, -1px);\n\t\t\t}\n\n\t\t\t\t\t.chart__wrap--offset_top .chart__curve,\n\t\t\t\t\t.chart__wrap--offset_bottom .chart__curve {\n\t\t\t\t\t\tstroke-width: 4px;\n\t\t\t\t\t}\n\n\t\t.chart__cursor {\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tright: -17px;\n\t\t\topacity: 0;\n\t\t\twill-change: top;\n\t\t\ttransition: top 0s, color 0s, opacity 0s;\n\t\t\ttransition-delay: 0s, 0s, 0s;\n\t\t\ttransform: translateY(-7px);\n\t\t\tcolor: var(--brand-color);\n\t\t}\n\n\t\t\t\t.chart__cursor--func-in {\n\t\t\t\t\tcolor: var(--main-text-color);\n\t\t\t\t}\n\n\t\t\t\t.chart__cursor--func-out,\n\t\t\t\t.chart__cursor--func-in-out {\n\t\t\t\t\tcolor: var(--brand-color);\n\t\t\t\t}\n\n\t\t\t.chart__cursor::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 0 50% 50% 50%;\n\t\t\t\tbackground: currentColor;\n\t\t\t\ttransform: rotate(-45deg);\n\t\t\t}\n\n\t\t\t\t.chart--active .chart__cursor {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttop: 1%;\n\t\t\t\t\ttransition: top var(--transition-show-time),  color var(--transition-show-time), opacity var(--transition-time);\n\t\t\t\t\ttransition-delay: var(--transition-time), var(--transition-time), 0s;\n\t\t\t\t}\n\n\t\t\t\t\t.chart--active .chart__cursor--func-in,\n\t\t\t\t\t.chart--active .chart__cursor--func-in-out {\n\t\t\t\t\t\tcolor: var(--second-color);\n\t\t\t\t\t}\n\n\t\t\t\t\t.chart--active .chart__cursor--func-out {\n\t\t\t\t\t\tcolor: var(--main-text-color);\n\t\t\t\t\t}\n\n\n@media (max-width: 550px) {\n\t.chart {\n\t\twidth: 100px;\n\t}\n}\n"
  },
  {
    "path": "src/code/code.css",
    "content": ".code__maths {\n\tpadding-left: 25px;\n\ttab-size: 25px;\n\tdisplay: inline-block;\n}\n"
  },
  {
    "path": "src/code/codeCss.pug",
    "content": "mixin codeCss()\n\tpre\n\t\t| #[span.u-color-second .block] {\n\t\t| \t#[span.u-color-second transition]: transform 0.6s #[span.u-color-brand.js-info-func];\n\t\t| }\n"
  },
  {
    "path": "src/code/codeGradient.pug",
    "content": "mixin codeGradient\n\tpre\n\t\t| #[span.u-color-second .block] {\n\t\t| \t#[span.u-color-second background]: linear-gradient(\n\t\t| \t\tto bottom,\n\t\t| \t\t#1473e6,\n\t\t| \t\t#[span.u-color-brand.js-info-func],\n\t\t| \t\t#247b5e\n\t\t| \t);\n\t\t| }\n"
  },
  {
    "path": "src/code/codeMaths.pug",
    "content": "mixin codeMaths()\n\tpre\n\t\t| #[span.u-color-second function #[span.u-color-brand.js-info-name]](x: number): number {\n\t\t| #[div.code__maths.js-info-maths]\n\t\t| }\n"
  },
  {
    "path": "src/code/codePostCss.pug",
    "content": "mixin codePostCss()\n\tpre\n\t\t| #[span.u-color-second .block] {\n\t\t| \t#[span.u-color-second transition]: transform 0.6s #[span.u-color-brand.js-info-name];\n\t\t| }\n"
  },
  {
    "path": "src/columns/columns.css",
    "content": ".columns {\n\tbox-sizing: border-box;\n\tpadding: 0.25rem 0 0;\n\ttransition: var(--transition-time);\n}\n\t\t.columns--hide {\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\topacity: 0;\n\t\t\tvisibility: hidden;\n\t\t}\n\n\t.columns__wrap {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: flex-start;\n\t\tjustify-content: center;\n\t\tmargin: 0 -15px;\n\t}\n\n\t\t.columns__group {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\talign-items: stretch;\n\t\t\tjustify-content: center;\n\t\t\twidth: calc(50% - var(--general-line-height));\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0 calc(var(--general-line-height) / 2) var(--general-line-height);\n\t\t}\n\n\n@media (max-width: 900px) {\n\t.columns__group {\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t}\n}\n\n@media (max-width: 550px) {\n\t.columns__wrap {\n\t\tmargin: 0 -0.3125rem;\n\t}\n\n\t.columns__group {\n\t\tmargin: 0 0 30px;\n\t}\n}\n"
  },
  {
    "path": "src/columns/columns.pug",
    "content": "include ../function/function\n\nmixin columns\n\t-\n\t\tvar easings = all_easings.reduce(function(resultArray, item, index) {\n\t\t\tvar chunkIndex = Math.floor(index / 3);\n\n\t\t\tif(!resultArray[chunkIndex]) {\n\t\t\t\tresultArray[chunkIndex] = [];\n\t\t\t}\n\n\t\t\tresultArray[chunkIndex].push(item);\n\t\t\treturn resultArray;\n\t\t}, []);\n\n\t.columns\n\t\t.columns__wrap\n\t\t\teach group in easings\n\t\t\t\t.columns__group\n\t\t\t\t\teach item, index in group\n\t\t\t\t\t\t+function(item, index)\n"
  },
  {
    "path": "src/core/core.css",
    "content": "html {\n\tline-height: var(--line-height);\n\ttext-size-adjust: 100%;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\n\tfont-family: system-ui, sans-serif;\n\tfont-size: 100%;\n\tcolor: var(--main-text-color);\n}\n\nbody {\n\tline-height: var(--line-height);\n\tposition: relative;\n\tbox-sizing: border-box;\n\tbackground: var(--main-background);\n\tmargin: 0;\n}\n\na {\n\tcolor: var(--brand-color);\n\ttext-decoration: none;\n\ttransition: var(--transition-time);\n\toutline: none;\n\tborder-bottom: 1px solid;\n}\n\n\ta:hover,\n\ta:focus {\n\t\tcolor: var(--brand-darken-color);\n\t}\n\n\ta:active {\n\t\tcolor: var(--brand-color);\n\t\ttransition: none;\n\t}\n\n\ta.focus-visible {\n\t\tbox-shadow: 0 0 1px 4px var(--brand-color);\n\t}\n\n\ta.focus-visible {\n\t\tbox-shadow: 0 0 1px 4px var(--brand-color);\n\t}\n\npre {\n\tfont-family: var(--code-fonts);\n\tmargin: 0;\n\ttab-size: 25px;\n}\n"
  },
  {
    "path": "src/details/details.css",
    "content": ".details {\n\tmargin: calc(var(--general-line-height) / 2) 0 0;\n}\n\n\t.details__summary {\n\t\toutline: none;\n\t\tuser-select: none;\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t}\n\n\t\t.details__summary::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: -4px;\n\t\t\tright: -4px;\n\t\t\tbottom: -4px;\n\t\t\tleft: -4px;\n\t\t\tpointer-events: none;\n\t\t\tbox-shadow: 0 0 1px 4px var(--brand-color);\n\t\t\ttransition: var(--transition-time);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t.details__summary.focus-visible::after {\n\t\t\topacity: 1;\n\t\t}\n\n\t.details__content {\n\t\tmargin: calc(var(--general-line-height) / 2) 0 var(--general-line-height);\n\t}\n\n\t\t.details__code {\n\t\t\toutline: none;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 250px;\n\t\t\tdisplay: block;\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0 var(--general-line-height);\n\t\t\ttransition: var(--transition-time);\n\n\t\t\tdirection: ltr;\n\t\t\twhite-space: pre;\n\t\t\tword-wrap: break-word;\n\t\t\tfont-family: var(--code-fonts);\n\t\t\tfont-size: 13px;\n\t\t\tline-height: var(--line-height-code);\n\t\t\ttab-size : 25px;\n\n\t\t\toverflow: auto;\n\t\t\t-webkit-overflow-scrolling: touch;\n\t\t\tborder: 1px solid var(--gray-color);\n\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t\tbackground-color: var(--second-background);\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-image: radial-gradient(farthest-side at 50% 0, var(--transparent-color-20), var(--transparent-color)),\n\t\t\t\tradial-gradient(farthest-side at 50% 100%, var(--transparent-color-20), var(--transparent-color));\n\t\t\tbackground-position: 0 0, 0 100%;\n\t\t\tbackground-size: 100% 10px;\n\t\t}\n\n\t\t\t.details__code::before,\n\t\t\t.details__code::after {\n\t\t\t\tcontent: \"\";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: -1;\n\t\t\t\tdisplay: block;\n\n\t\t\t\tmargin: 0 0 -15px;\n\t\t\t\theight: 30px;\n\t\t\t\tbackground: linear-gradient(to bottom, var(--second-background), var(--second-background) 30%, var(--second-background-transparent));\n\t\t\t}\n\n\t\t\t.details__code::after {\n\t\t\t\tmargin: -15px 0 0;\n\t\t\t\tbackground: linear-gradient(to bottom, var(--second-background-transparent), var(--second-background) 70%, var(--second-background));\n\t\t\t}\n"
  },
  {
    "path": "src/details/details.pug",
    "content": "include ../example-copy/example-copy\n\nmixin details(name, type)\n\tdetails.details\n\t\tsummary.details__summary= name\n\t\t.details__content\n\t\t\t+example-copy\n\t\t\t\t.details__code(data-type=type)\n\t\t\t\t\tblock\n"
  },
  {
    "path": "src/easings/easings.ts",
    "content": "import keyframes from \"./keyframes\";\nimport easingsFunctions from \"./easingsFunctions\";\nimport roundTo2DecimalPlaces from \"../helpers/roundTo2DecimalPlaces\";\n\nexport const enum keyframeTypes {\n\topacity = \"opacity\",\n\tscale = \"scale\",\n\ttranslate = \"translate\",\n}\n\nexport function generateComplexEasings(\n\tname: string,\n\tproperty: keyframeTypes\n): string {\n\tif (name in keyframes) {\n\t\tconst keyframeList = keyframes[name]\n\t\t\t.map((item: number) => {\n\t\t\t\tconst keyframeValue = easingsFunctions[name](item / 100);\n\n\t\t\t\treturn (\n\t\t\t\t\t`\\t<span class='u-color-brand'>${item}%</span> {\\n` +\n\t\t\t\t\t`\\t\\t${getDeclaration(property, keyframeValue)}\\n` +\n\t\t\t\t\t`\\t}\\n\\n`\n\t\t\t\t);\n\t\t\t})\n\t\t\t.join(\"\");\n\n\t\treturn (\n\t\t\t`` +\n\t\t\t`<span class='u-color-brand'>@keyframes</span> <span class='u-color-second'>${property}-${name}</span> {\\n` +\n\t\t\tkeyframeList +\n\t\t\t`}`\n\t\t);\n\t}\n\n\treturn \"\";\n}\n\nfunction getDeclaration(property: keyframeTypes, value: number): string {\n\tconst roundValue = roundTo2DecimalPlaces(1 - value);\n\n\tswitch (property) {\n\t\tcase keyframeTypes.opacity:\n\t\t\treturn `opacity: ${roundValue};`;\n\n\t\tcase keyframeTypes.scale:\n\t\t\treturn `transform: scale(${roundValue});`;\n\n\t\tcase keyframeTypes.translate:\n\t\t\treturn `transform: translateX(${roundTo2DecimalPlaces(-100 * value)}%);`;\n\n\t\tdefault:\n\t\t\treturn \"\";\n\t}\n}\n"
  },
  {
    "path": "src/easings/easingsFunctions.ts",
    "content": "type EasingFunction = (progress: number) => number;\n\ninterface EasingDictionary {\n\t[easing: string]: EasingFunction;\n}\n\nconst pow = Math.pow;\nconst sqrt = Math.sqrt;\nconst sin = Math.sin;\nconst cos = Math.cos;\nconst PI = Math.PI;\nconst c1 = 1.70158;\nconst c2 = c1 * 1.525;\nconst c3 = c1 + 1;\nconst c4 = (2 * PI) / 3;\nconst c5 = (2 * PI) / 4.5;\n\nconst bounceOut: EasingFunction = function (x) {\n\tconst n1 = 7.5625;\n\tconst d1 = 2.75;\n\n\tif (x < 1 / d1) {\n\t\treturn n1 * x * x;\n\t} else if (x < 2 / d1) {\n\t\treturn n1 * (x -= 1.5 / d1) * x + 0.75;\n\t} else if (x < 2.5 / d1) {\n\t\treturn n1 * (x -= 2.25 / d1) * x + 0.9375;\n\t} else {\n\t\treturn n1 * (x -= 2.625 / d1) * x + 0.984375;\n\t}\n};\n\nconst easingsFunctions: EasingDictionary = {\n\tlinear: (x) => x,\n\teaseInQuad: function (x) {\n\t\treturn x * x;\n\t},\n\teaseOutQuad: function (x) {\n\t\treturn 1 - (1 - x) * (1 - x);\n\t},\n\teaseInOutQuad: function (x) {\n\t\treturn x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2;\n\t},\n\teaseInCubic: function (x) {\n\t\treturn x * x * x;\n\t},\n\teaseOutCubic: function (x) {\n\t\treturn 1 - pow(1 - x, 3);\n\t},\n\teaseInOutCubic: function (x) {\n\t\treturn x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2;\n\t},\n\teaseInQuart: function (x) {\n\t\treturn x * x * x * x;\n\t},\n\teaseOutQuart: function (x) {\n\t\treturn 1 - pow(1 - x, 4);\n\t},\n\teaseInOutQuart: function (x) {\n\t\treturn x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2;\n\t},\n\teaseInQuint: function (x) {\n\t\treturn x * x * x * x * x;\n\t},\n\teaseOutQuint: function (x) {\n\t\treturn 1 - pow(1 - x, 5);\n\t},\n\teaseInOutQuint: function (x) {\n\t\treturn x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2;\n\t},\n\teaseInSine: function (x) {\n\t\treturn 1 - cos((x * PI) / 2);\n\t},\n\teaseOutSine: function (x) {\n\t\treturn sin((x * PI) / 2);\n\t},\n\teaseInOutSine: function (x) {\n\t\treturn -(cos(PI * x) - 1) / 2;\n\t},\n\teaseInExpo: function (x) {\n\t\treturn x === 0 ? 0 : pow(2, 10 * x - 10);\n\t},\n\teaseOutExpo: function (x) {\n\t\treturn x === 1 ? 1 : 1 - pow(2, -10 * x);\n\t},\n\teaseInOutExpo: function (x) {\n\t\treturn x === 0\n\t\t\t? 0\n\t\t\t: x === 1\n\t\t\t? 1\n\t\t\t: x < 0.5\n\t\t\t? pow(2, 20 * x - 10) / 2\n\t\t\t: (2 - pow(2, -20 * x + 10)) / 2;\n\t},\n\teaseInCirc: function (x) {\n\t\treturn 1 - sqrt(1 - pow(x, 2));\n\t},\n\teaseOutCirc: function (x) {\n\t\treturn sqrt(1 - pow(x - 1, 2));\n\t},\n\teaseInOutCirc: function (x) {\n\t\treturn x < 0.5\n\t\t\t? (1 - sqrt(1 - pow(2 * x, 2))) / 2\n\t\t\t: (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;\n\t},\n\teaseInBack: function (x) {\n\t\treturn c3 * x * x * x - c1 * x * x;\n\t},\n\teaseOutBack: function (x) {\n\t\treturn 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2);\n\t},\n\teaseInOutBack: function (x) {\n\t\treturn x < 0.5\n\t\t\t? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2\n\t\t\t: (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;\n\t},\n\teaseInElastic: function (x) {\n\t\treturn x === 0\n\t\t\t? 0\n\t\t\t: x === 1\n\t\t\t? 1\n\t\t\t: -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);\n\t},\n\teaseOutElastic: function (x) {\n\t\treturn x === 0\n\t\t\t? 0\n\t\t\t: x === 1\n\t\t\t? 1\n\t\t\t: pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;\n\t},\n\teaseInOutElastic: function (x) {\n\t\treturn x === 0\n\t\t\t? 0\n\t\t\t: x === 1\n\t\t\t? 1\n\t\t\t: x < 0.5\n\t\t\t? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2\n\t\t\t: (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1;\n\t},\n\teaseInBounce: function (x) {\n\t\treturn 1 - bounceOut(1 - x);\n\t},\n\teaseOutBounce: bounceOut,\n\teaseInOutBounce: function (x) {\n\t\treturn x < 0.5\n\t\t\t? (1 - bounceOut(1 - 2 * x)) / 2\n\t\t\t: (1 + bounceOut(2 * x - 1)) / 2;\n\t},\n};\n\nexport default easingsFunctions;\n"
  },
  {
    "path": "src/easings/keyframes.ts",
    "content": "/* eslint-disable prettier/prettier */\nconst keyframes: {[key: string]: number[]} = {\n\teaseInElastic: [0, 4, 8, 14, 18, 26, 28, 40, 42, 56, 58, 72, 86, 100],\n\teaseOutElastic: [0, 16, 28, 44, 59, 73, 88, 100],\n\teaseInOutElastic: [0, 4, 8, 18, 20, 28, 30, 38, 40, 60, 62, 70, 72, 80, 82, 90, 92, 100],\n\teaseInBounce: [0, 4, 8, 18, 26, 46, 64, 76, 88, 100],\n\teaseOutBounce: [0, 12, 24, 36, 54, 74, 82, 92, 96, 100],\n\teaseInOutBounce: [0, 2, 4, 10, 14, 22, 32, 42, 50, 58, 68, 78, 86, 90, 96, 98, 100],\n};\n\nexport default keyframes;\n"
  },
  {
    "path": "src/easings.yml",
    "content": "- name: easeInSine\n  css:  cubic-bezier(0.12, 0, 0.39, 0)\n  maths: |-2\n      return 1 - Math.cos((x * Math.PI) / 2);\n- name: easeOutSine\n  css:  cubic-bezier(0.61, 1, 0.88, 1)\n  maths: |-2\n      return Math.sin((x * Math.PI) / 2);\n- name: easeInOutSine\n  css:  cubic-bezier(0.37, 0, 0.63, 1)\n  maths: |-2\n    return -(Math.cos(Math.PI * x) - 1) / 2;\n- name: easeInQuad\n  css:  cubic-bezier(0.11, 0, 0.5, 0)\n  maths: |-2\n    return x * x;\n- name: easeOutQuad\n  css:  cubic-bezier(0.5, 1, 0.89, 1)\n  maths: |-2\n    return 1 - (1 - x) * (1 - x);\n- name: easeInOutQuad\n  css:  cubic-bezier(0.45, 0, 0.55, 1)\n  maths: |-2\n    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;\n- name: easeInCubic\n  css:  cubic-bezier(0.32, 0, 0.67, 0)\n  maths: |-2\n    return x * x * x;\n- name: easeOutCubic\n  css:  cubic-bezier(0.33, 1, 0.68, 1)\n  maths: |-2\n    return 1 - Math.pow(1 - x, 3);\n- name: easeInOutCubic\n  css:  cubic-bezier(0.65, 0, 0.35, 1)\n  maths: |-2\n    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;\n- name: easeInQuart\n  css:  cubic-bezier(0.5, 0, 0.75, 0)\n  maths: |-2\n    return x * x * x * x;\n- name: easeOutQuart\n  css:  cubic-bezier(0.25, 1, 0.5, 1)\n  maths: |-2\n    return 1 - Math.pow(1 - x, 4);\n- name: easeInOutQuart\n  css:  cubic-bezier(0.76, 0, 0.24, 1)\n  maths: |-2\n    return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;\n- name: easeInQuint\n  css:  cubic-bezier(0.64, 0, 0.78, 0)\n  maths: |-2\n    return x * x * x * x * x;\n- name: easeOutQuint\n  css:  cubic-bezier(0.22, 1, 0.36, 1)\n  maths: |-2\n    return 1 - Math.pow(1 - x, 5);\n- name: easeInOutQuint\n  css:  cubic-bezier(0.83, 0, 0.17, 1)\n  maths: |-2\n    return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;\n- name: easeInExpo\n  css:  cubic-bezier(0.7, 0, 0.84, 0)\n  maths: |-2\n    return x === 0 ? 0 : Math.pow(2, 10 * x - 10);\n- name: easeOutExpo\n  css:  cubic-bezier(0.16, 1, 0.3, 1)\n  maths: |-2\n    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);\n- name: easeInOutExpo\n  css:  cubic-bezier(0.87, 0, 0.13, 1)\n  maths: |-2\n    return x === 0\n      ? 0\n      : x === 1\n      ? 1\n      : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2\n      : (2 - Math.pow(2, -20 * x + 10)) / 2;\n- name: easeInCirc\n  css:  cubic-bezier(0.55, 0, 1, 0.45)\n  maths: |-2\n    return 1 - Math.sqrt(1 - Math.pow(x, 2));\n- name: easeOutCirc\n  css:  cubic-bezier(0, 0.55, 0.45, 1)\n  maths: |-2\n    return Math.sqrt(1 - Math.pow(x - 1, 2));\n- name: easeInOutCirc\n  css:  cubic-bezier(0.85, 0, 0.15, 1)\n  maths: |-2\n    return x < 0.5\n      ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2\n      : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;\n- name: easeInBack\n  css:  cubic-bezier(0.36, 0, 0.66, -0.56)\n  maths: |-2\n    const c1 = 1.70158;\n    const c3 = c1 + 1;\n\n    return c3 * x * x * x - c1 * x * x;\n- name: easeOutBack\n  css:  cubic-bezier(0.34, 1.56, 0.64, 1)\n  maths: |-2\n    const c1 = 1.70158;\n    const c3 = c1 + 1;\n\n    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);\n- name: easeInOutBack\n  css:  cubic-bezier(0.68, -0.6, 0.32, 1.6)\n  maths: |-2\n    const c1 = 1.70158;\n    const c2 = c1 * 1.525;\n\n    return x < 0.5\n      ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2\n      : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;\n- name: easeInElastic\n  css:  no\n  offset: bottom\n  maths: |-2\n    const c4 = (2 * Math.PI) / 3;\n\n    return x === 0\n      ? 0\n      : x === 1\n      ? 1\n      : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);\n- name: easeOutElastic\n  css:  no\n  offset: top\n  maths: |-2\n    const c4 = (2 * Math.PI) / 3;\n\n    return x === 0\n      ? 0\n      : x === 1\n      ? 1\n      : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;\n- name: easeInOutElastic\n  css:  no\n  maths: |-2\n    const c5 = (2 * Math.PI) / 4.5;\n\n    return x === 0\n      ? 0\n      : x === 1\n      ? 1\n      : x < 0.5\n      ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2\n      : (Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1;\n- name: easeInBounce\n  css:  no\n  maths: |-2\n    return 1 - easeOutBounce(1 - x);\n- name: easeOutBounce\n  css:  no\n  maths: |-2\n    const n1 = 7.5625;\n    const d1 = 2.75;\n\n    if (x < 1 / d1) {\n        return n1 * x * x;\n    } else if (x < 2 / d1) {\n        return n1 * (x -= 1.5 / d1) * x + 0.75;\n    } else if (x < 2.5 / d1) {\n        return n1 * (x -= 2.25 / d1) * x + 0.9375;\n    } else {\n        return n1 * (x -= 2.625 / d1) * x + 0.984375;\n    }\n- name: easeInOutBounce\n  css:  no\n  maths: |-2\n    return x < 0.5\n      ? (1 - easeOutBounce(1 - 2 * x)) / 2\n      : (1 + easeOutBounce(2 * x - 1)) / 2;\n"
  },
  {
    "path": "src/error/error.css",
    "content": ".error {\n\theight: 100vh;\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n\t.error__wrap {\n\t\twidth: 100%;\n\t\tmax-width: 500px;\n\t\tbox-sizing: border-box;\n\t\tpadding: 15px;\n\t\tmargin: 0 auto;\n\t\ttext-align: center;\n\t\tcolor: var(--gray-color);\n\t}\n\n\t\t.error__image {\n\t\t\tmargin: 0 0 30px;\n\t\t}\n\n\t\t\t.error__image::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin: 0 auto;\n\t\t\t\theight: 16px;\n\t\t\t\twidth: 125px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbackground: currentColor;\n\t\t\t\topacity: 0.1;\n\t\t\t\tanimation: ghostShadow 1.5s both infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);\n\t\t\t}\n\n\t\t\t.error__ghost {\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin: 0 auto 40px;\n\t\t\t\tfill: none;\n\t\t\t\tstroke: currentColor;\n\t\t\t\tstroke-width: 3px;\n\t\t\t\twidth: 162px;\n\t\t\t\theight: 187px;\n\t\t\t\tanimation: ghost 1.5s both infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);\n\t\t\t}\n\n\t\t.error__title {\n\t\t\tfont-size: 48px;\n\t\t\tline-height: 1;\n\t\t\tfont-weight: 300;\n\t\t}\n\n\t\t.error__text {\n\n\t\t}\n\n@keyframes ghost {\n\t0%, 5% {\n\t\ttransform: translateY(0);\n\t}\n\n\t95%, 100% {\n\t\ttransform: translateY(-20px);\n\t}\n}\n\n@keyframes ghostShadow {\n\t0%, 5% {\n\t\ttransform: scale(1);\n\t}\n\n\t95%, 100% {\n\t\ttransform: scale(0.7);\n\t}\n}\n"
  },
  {
    "path": "src/error/error.pug",
    "content": "mixin error\n\tmain.error\n\t\t.error__wrap\n\t\t\t.error__image\n\t\t\t\tsvg.error__ghost(xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 162 187\")\n\t\t\t\t\tpath(d=\"M1 77.5a80.1 80.1 0 0 1 160 0v108l-16-14-16 14-16-14-16 14-16-14-16 14-16-14-16 14-16-14-16 14zM69 129.5h24M48,89.5a1,1 0 1,0 2,0a1,1 0 1,0 -2,0M112,89.5a1,1 0 1,0 2,0a1,1 0 1,0 -2,0\")\n\n\t\t\t.error__title 404\n\t\t\t.error__text Page not found\n\t\t\ta.error__link(href=\"/\") Back to our site\n"
  },
  {
    "path": "src/example/example.css",
    "content": ".example {\n\tfont-size: 1rem;\n}\n\n\t\t.example + .example {\n\t\t\tpadding: var(--general-line-height) 0 0;\n\t\t}\n\n\t.example__title {\n\t\tfont-size: 26px;\n\t\tfont-weight: 500;\n\t\tline-height: calc(2 * var(--general-line-height));\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.example__code {\n\t\tpadding: calc(var(--general-line-height) / 2) 0;\n\t\tmargin: -2px 0;\n\t\toverflow-x: auto;\n\t\t-webkit-overflow-scrolling: touch;\n\t\tdirection: ltr;\n\n\t\tword-wrap: break-word;\n\t\tfont-family: var(--code-fonts);\n\t\tfont-size: 13px;\n\t\tline-height: var(--line-height-code);\n\t}\n\t\t\n\t\t.example__gradient {\n\t\t\tmax-width: 100%;\n\t\t\twidth: 300px;\n\t\t\theight: 200px;\n\t\t\tdisplay: none;\n\t\t\tmargin: 0 0 calc(var(--general-line-height) / 2) 0;\n\t\t}\n\n@media (max-width: 550px) {\n\t.example__title {\n\t\tfont-weight: 400;\n\t\tfont-size: 22px;\n\t}\n}\n"
  },
  {
    "path": "src/example-copy/example-copy.css",
    "content": ".example-copy {\n\tposition: relative;\n}\n\n\t.example-copy__button {\n\t\tposition: absolute;\n\t\ttop: 10px;\n\t\tright: 10px;\n\t\tz-index: 2;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: var(--transition-time);\n\t}\n\n\t\t.example-copy:hover .example-copy__button {\n\t\t\topacity: 1;\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t.example-copy__icon {\n\t\t\tdisplay: block;\n\t\t\twidth: 15px;\n\t\t\theight: 15px;\n\t\t\tfill: currentColor;\n\t\t\ttransition: opacity var(--transition-small-time);\n\t\t}\n\n\t\t\t.example-copy__icon-action {}\n\n\t\t\t.example-copy__icon-done {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 16px;\n\t\t\t\theight: 16px;\n\t\t\t\ttop: calc(50% - 8px);\n\t\t\t\tleft: calc(50% - 8px);\n\t\t\t}\n\n\t\t\t.example-copy__icon-hidden {\n\t\t\t\topacity: 0;\n\t\t\t}\n\n\t.example-copy__code {\n\t\tdisplay: block;\n\t}\n"
  },
  {
    "path": "src/example-copy/example-copy.pug",
    "content": "mixin example-copy\n\t.example-copy\n\t\tbutton.example-copy__button.button.button--small\n\t\t\tsvg.example-copy__icon.example-copy__icon-action(xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\")\n\t\t\t\tuse(xlink:href=\"#copy\")\n\t\t\tsvg.example-copy__icon.example-copy__icon-done.example-copy__icon-hidden(xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\")\n\t\t\t\tuse(xlink:href=\"#done\")\n\t\t.example-copy__code\n\t\t\tblock\n"
  },
  {
    "path": "src/example-copy/example-copy.ts",
    "content": "import { selectorCopyButton, selectorCopyCode } from \"../helpers/constants\";\nimport { getElement, getElementsList } from \"../helpers/getElement\";\nimport { forNodeList } from \"../helpers/forNodeList\";\nimport { copyTextFromElement } from \"../helpers/copyText\";\n\nconst selectorIconAction = \".example-copy__icon-action\";\nconst selectorIconDone = \".example-copy__icon-done\";\nconst classIconHidden = \"example-copy__icon-hidden\";\n\nconst list = getElementsList(selectorCopyButton);\n\nforNodeList(list, (item) => {\n\titem.addEventListener(\"click\", () => {\n\t\tconst code = getElement(selectorCopyCode, item.parentElement);\n\t\tcopyTextFromElement(code);\n\n\t\tconst iconAction = getElement(selectorIconAction, item);\n\t\tconst iconDone = getElement(selectorIconDone, item);\n\n\t\ticonAction.classList.add(classIconHidden);\n\t\ticonDone.classList.remove(classIconHidden);\n\n\t\tsetTimeout(() => {\n\t\t\ticonAction.classList.remove(classIconHidden);\n\t\t\ticonDone.classList.add(classIconHidden);\n\t\t}, 1500);\n\t});\n});\n"
  },
  {
    "path": "src/external-link/external-link.pug",
    "content": "mixin external-link(link)\n\ta(href=link rel=\"noopener noreferrer\" target=\"_blank\")&attributes(attributes)\n\t\tblock\n"
  },
  {
    "path": "src/footer/footer.css",
    "content": ".footer {\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmargin: 0 auto;\n\tmax-width: 1050px;\n\tpadding: 20px 15px 15px;\n}\n\n\t.footer__group {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tflex-direction: row-reverse;\n\t\tjustify-content: space-between;\n\t\talign-items: baseline;\n\t}\n\n\t\t.footer__group::before {\n\t\t\tcontent: \"\";\n\t\t\torder: 1;\n\t\t\tflex: 3 1 auto;\n\t\t}\n\n\t\t.footer__copyright {\n\t\t\torder: 2;\n\t\t\tmargin: 0 auto 5px;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t.footer__lang {\n\t\t\torder: -1;\n\t\t}\n\n\t\t.footer__list {\n\t\t\tmargin: 0 0 5px 20px;\n\t\t}\n\n\t\t\t\t[dir=\"rtl\"] .footer__list {\n\t\t\t\t\tmargin: 0 20px 5px 0;\n\t\t\t\t}\n\n\t\t\t.footer__list select {\n\t\t\t\tfont-size: 0.85rem;\n\t\t\t}\n\n\t\t\t.footer__link {\n\t\t\t\tcolor: var(--footer-link-color);\n\t\t\t}\n"
  },
  {
    "path": "src/footer/footer.pug",
    "content": "include ../external-link/external-link\n\nmixin footer\n\t.footer\n\t\t.footer__group\n\t\t\t.footer__copyright\n\t\t\t\t+external-link(\"https://sitnik.ru/\").footer__link {{ authors.sitnik }}\n\t\t\t\t!= ` {{ authors.separator }} `\n\t\t\t\t+external-link(\"https://solovev.one/\").footer__link {{ authors.solovev }}\n\n\t\t\t.footer__list\n\t\t\t\tselect.footer__theme(aria-label=\"Select theme\")\n\t\t\t\t\toption(value=\"auto\") {{ theme.auto }}\n\t\t\t\t\toption(value=\"light\") {{ theme.light }}\n\t\t\t\t\toption(value=\"dark\") {{ theme.dark }}\n\n\t\t\t.footer__lang.footer__list\n\t\t\t\tul(aria-label=\"Select language\").\n\t\t\t\t\t{{#langList}}\n\t\t\t\t\t\t{{{.}}}\n\t\t\t\t\t{{/langList}}\n"
  },
  {
    "path": "src/footer/footer.ts",
    "content": "import { getElement, getElementsList } from \"../helpers/getElement\";\n\nconst selectorFooterLang = \".footer__lang\";\nconst selectorLangList = `${selectorFooterLang} ul`;\nconst selectorLangItem = `${selectorFooterLang} li`;\n\nconst footerLangList = getElement(selectorLangList);\nconst footerListItems = getElementsList<HTMLElement>(\n\t`${selectorLangItem} a, ${selectorLangItem} span`\n);\nconst selectElement = document.createElement(\"select\");\nselectElement.onchange = changeLang;\n\nconst label = footerLangList.getAttribute(\"aria-label\");\nselectElement.setAttribute(\"aria-label\", label);\n\nfooterListItems.forEach((langLink) => {\n\tconst option = document.createElement(\"option\");\n\n\tconst linkHref = langLink.getAttribute(\"href\");\n\toption.value = linkHref || window.location.pathname;\n\toption.innerText = langLink.innerText;\n\n\tif (langLink.tagName === \"SPAN\") {\n\t\toption.setAttribute(\"selected\", \"selected\");\n\t}\n\n\tselectElement.appendChild(option);\n});\n\nconst footerLang = getElement(selectorFooterLang);\nfooterLang.appendChild(selectElement);\nfooterLang.removeChild(getElement(`${selectorFooterLang} ul`));\n\nfunction changeLang(event: any): void {\n\tif (/^\\/easings.net/.test(window.location.pathname)) {\n\t\twindow.location.pathname = `/easings.net${event.target.value}`;\n\t} else {\n\t\twindow.location.pathname = event.target.value;\n\t}\n}\n"
  },
  {
    "path": "src/function/function.css",
    "content": ".function {\n\twidth: calc(100%/3 - 10px);\n\tmax-width: 160px;\n\tbox-sizing: border-box;\n\tpadding: 15px 15px 8px;\n\tmargin: 0 5px 10px;\n\ttransition: var(--transition-time);\n\tposition: relative;\n\toutline: none;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--second-background);\n\tbox-shadow: 0 2px 8px var(--function-shadow);\n}\n\n\t.function::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: -4px;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tleft: -4px;\n\t\tpointer-events: none;\n\t\tbox-shadow: 0 0 1px 4px var(--brand-color);\n\t\ttransition: var(--transition-time);\n\t\topacity: 0;\n\t}\n\n\t\t.function:active {\n\t\t\tbox-shadow: 0 2px 8px var(--function-shadow);\n\t\t\ttransition: none;\n\t\t}\n\n\t\t.function.focus-visible::after,\n\t\t.function--focus::after {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t.function--active {\n\t\t\tz-index: 1;\n\t\t\tbox-shadow: 0 2px 8px var(--function-shadow-active);\n\t\t}\n\n\t.function__chart {\n\t\tmargin: 0 auto;\n\t\toutline: none;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\ttransition: none;\n\t\tborder: none;\n\t}\n\n\t\t.function__chart::after {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.function__chart:active {\n\t\t\ttransform: none;\n\t\t\ttransition: none;\n\t\t}\n\n\n\t.function__caption {\n\t\tpadding: 0.75em 0 0;\n\t\tfont-size: 1rem;\n\t\ttext-align: center;\n\t\ttransition: var(--transition-time);\n\t\tmargin: auto 0 0;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n@media (max-width: 1050px) {\n\t.function {\n\t\tmin-width: 140px;\n\t}\n\n\t.function__caption {\n\t\tfont-size: 14px;\n\t}\n}\n\n@media (max-width: 450px) {\n\t.function {\n\t\twidth: auto;\n\t}\n}\n"
  },
  {
    "path": "src/function/function.pug",
    "content": "include ../math/math\n\nmixin function(item, index)\n\t-\n\t\tvar gradient = 'inOut';\n\t\tif (index === 0) gradient = 'in';\n\t\tif (index === 1) gradient = 'out';\n\n\t\tvar cursorClass = 'chart__cursor--func-in-out';\n\t\tif (index === 0) cursorClass = 'chart__cursor--func-in';\n\t\tif (index === 1) cursorClass = 'chart__cursor--func-out';\n\n\t\tvar radioScale = 1;\n\t\tvar chartWidth = 125 * radioScale;\n\t\tvar chartHeight = 85 * radioScale;\n\n\t\tvar x1, y1, x2, y2;\n\n\t\tif (item.css !== \"no\") {\n\t\t\tvar points = /([-\\d.]+), ([-\\d.]+), ([-\\d.]+), ([-\\d.]+)/.exec(item.css);\n\t\t\tx1 = (parseFloat(points[1]) * chartWidth).toFixed(3);\n\t\t\ty1 = ((1 - parseFloat(points[2])) * chartHeight).toFixed(3);\n\t\t\tx2 = (parseFloat(points[3]) * chartWidth).toFixed(3);\n\t\t\ty2 = ((1 - parseFloat(points[4])) * chartHeight).toFixed(3);\n\t\t}\n\n\t\tvar className = \"\";\n\n\t\tif (item.offset === \"top\")\n\t\t\tclassName = \"chart__wrap--offset_top\";\n\n\t\tif (item.offset === \"bottom\")\n\t\t\tclassName = \"chart__wrap--offset_bottom\";\n\n\t.function(id=(`func-${item.name}`) data-name=item.name data-func=item.css data-maths=item.maths data-offset=item.offset)\n\t\ta.function__chart.chart(href=`#${item.name}`)\n\t\t\t.chart__wrap(class=className)\n\t\t\t\tsvg.chart__image(viewBox=(`0 0 ${chartWidth} ${chartHeight}`) xmlns=\"http://www.w3.org/2000/svg\")\n\t\t\t\t\tg.chart__explanations\n\t\t\t\t\t\tpath.chart__axis(d=(`M1 0V${chartHeight - 1}H${chartWidth}`) fill=\"none\")\n\t\t\t\t\t\ttext.chart__text(x=\"4\" y=\"8\") x\n\t\t\t\t\t\ttext.chart__text(x=(chartWidth - 3) y=(chartHeight - 5) text-anchor=\"end\") t\n\n\t\t\t\t\tif item.css !== \"no\"\n\t\t\t\t\t\tpath.chart__curve(d=(`M1 ${chartHeight-1}C${x1} ${y1} ${x2} ${y2} ${chartWidth-1} 1`)\n\t\t\t\t\t\tfill=\"none\" stroke=(`url(#${gradient})`))\n\t\t\t\t\telse\n\t\t\t\t\t\tpath.chart__curve(fill=\"none\" stroke=(`url(#${gradient})`)\n\t\t\t\t\t\td=(`M1 ${chartHeight - 1} L${getEasing(item.name, chartWidth, chartHeight)}`))\n\n\t\t\t\t.chart__cursor(style=`${item.css !== \"no\" ? `transition-timing-function:${item.css}` : ''}` class=cursorClass)\n\n\t\t.function__caption= item.name\n"
  },
  {
    "path": "src/function/function.ts",
    "content": "import { getElement, getElementsList } from \"../helpers/getElement\";\nimport { forNodeList } from \"../helpers/forNodeList\";\n\nconst listFunction = getElementsList(\".function\");\n\nconst classFunctionActive = \"function--active\";\nconst classFunctionFocus = \"function--focus\";\nconst classChartActive = \"chart--active\";\n\nconst selectorChart = \".function__chart\";\nconst selectorCursor = \".chart__cursor\";\nconst cursorTransitionTime = 1500;\n\nif (listFunction) {\n\tforNodeList(listFunction, (item, index) => {\n\t\tconst chart = getElement(selectorChart, item);\n\t\tconst cursor = getElement(selectorCursor, item);\n\t\tconst animationName = item.getAttribute(\"data-name\");\n\t\tconst cssFunc = item.getAttribute(\"data-func\");\n\n\t\titem.addEventListener(\"mouseenter\", () => {\n\t\t\tforNodeList(listFunction, (other, otherIndex) => {\n\t\t\t\tif (otherIndex !== index) {\n\t\t\t\t\tother.classList.remove(classFunctionFocus);\n\t\t\t\t\tgetElement(selectorChart, other).classList.remove(classChartActive);\n\t\t\t\t\tgetElement(selectorCursor, other).style.animation = \"\";\n\t\t\t\t}\n\t\t\t});\n\n\t\t\titem.classList.add(classFunctionActive);\n\t\t\tchart.classList.add(classChartActive);\n\n\t\t\tif (cssFunc === \"no\") {\n\t\t\t\tcursor.style.animation = `${cursorTransitionTime}ms cursor-${animationName} both 0.2s linear`;\n\t\t\t}\n\t\t});\n\n\t\titem.addEventListener(\"mouseleave\", () => {\n\t\t\titem.classList.remove(classFunctionActive);\n\t\t\tchart.classList.remove(classChartActive);\n\t\t\tcursor.style.animation = \"\";\n\t\t});\n\n\t\tchart.addEventListener(\"focus\", () => {\n\t\t\tforNodeList(listFunction, (other, otherIndex) => {\n\t\t\t\tif (otherIndex !== index) {\n\t\t\t\t\tother.classList.remove(classFunctionFocus);\n\t\t\t\t\tgetElement(selectorChart, other).classList.remove(classChartActive);\n\t\t\t\t\tgetElement(selectorCursor, other).style.animation = \"\";\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tchart.classList.add(classChartActive);\n\n\t\t\tif (cssFunc === \"no\") {\n\t\t\t\tcursor.style.animation = `${cursorTransitionTime}ms cursor-${animationName} both 0.2s linear`;\n\t\t\t}\n\t\t});\n\n\t\tchart.addEventListener(\"blur\", () => {\n\t\t\titem.classList.remove(classFunctionFocus, classFunctionActive);\n\t\t\tchart.classList.remove(classChartActive);\n\t\t\tcursor.style.animation = \"\";\n\t\t});\n\n\t\titem.addEventListener(\"keyup\", (event) => {\n\t\t\tif (\n\t\t\t\tevent.key.toLowerCase() === \"tab\" ||\n\t\t\t\tevent.code.toLowerCase() === \"tab\"\n\t\t\t) {\n\t\t\t\titem.classList.add(classFunctionFocus);\n\t\t\t}\n\t\t});\n\n\t\titem.addEventListener(\"keydown\", (event) => {\n\t\t\tif (\n\t\t\t\tevent.key.toLowerCase() === \"tab\" ||\n\t\t\t\tevent.code.toLowerCase() === \"tab\"\n\t\t\t) {\n\t\t\t\titem.classList.remove(classFunctionFocus);\n\t\t\t}\n\t\t});\n\t});\n}\n"
  },
  {
    "path": "src/gradient/gradient.ts",
    "content": "import { color1, color2, selectorGradient } from \"../helpers/constants\";\nimport { getElement } from \"../helpers/getElement\";\nimport { mixColors } from \"../helpers/mixColors\";\nimport easingsFunctions from \"../easings/easingsFunctions\";\n\nconst gradient = getElement(selectorGradient);\n\nexport function setGradient(funcName: string, points: number[]): void {\n\tif (points.length !== 4 || !(funcName in easingsFunctions)) {\n\t\treturn;\n\t}\n\n\tconst colors: string[] = [];\n\n\tfor (let i = 0; i <= 25; i++) {\n\t\tconst bland = easingsFunctions[funcName](i / 25);\n\t\tconst color = mixColors(color1, color2, bland);\n\t\tcolors.push(`${color} ${i * 4}%`);\n\t}\n\n\tgradient.style.display = \"block\";\n\tgradient.style.backgroundImage = `linear-gradient(\n\t\tto bottom,\n\t\t${colors.join(\", \")}\n\t)`;\n}\n\nexport function hideGradient(): void {\n\tgradient.removeAttribute(\"style\");\n}\n"
  },
  {
    "path": "src/header/header.css",
    "content": ".header {\n\tpadding: calc(var(--general-line-height) / 2) 0;\n\tdisplay: flex;\n\talign-items: flex-start;\n}\n\n\t.header__definition {\n\t\twidth: 100%;\n\t\tmax-width: 900px;\n\t\tpadding: 0 calc(2 * var(--general-line-height)) 0 0;\n\t}\n\n\t\t\t[dir=\"rtl\"] .header__definition {\n\t\t\t\tpadding: 0 0 0 calc(2 * var(--general-line-height));\n\t\t\t}\n\n\t\t.header__definition p {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0 0 calc(var(--general-line-height) / 2);\n\t\t}\n\n\t.header__opensource {\n\t\tflex: 0 0 auto;\n\t}\n\n@media (max-width: 900px) {\n\t.header__definition.header__definition {\n\t\tpadding: 0;\n\t}\n\n\t.header__opensource {\n\t\tdisplay: none;\n\t}\n}\n"
  },
  {
    "path": "src/header/header.pug",
    "content": "include ../external-link/external-link\n\nmixin header\n\t.header\n\t\t.header__definition {{{ about }}}\n\n\t\t.header__opensource.translate(class=\"{{#opensource.translate}}translate--with-background{{/opensource.translate}}\")\n\t\t\t+external-link(\"https://github.com/ai/easings.net\").button\n\t\t\t\tspan.icon\n\t\t\t\t\tsvg.icon__image(xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\")\n\t\t\t\t\t\tpath(d=\"M12 2A10.1 10.1 0 0 0 2 12.3 10.2 10.2 0 0 0 8.8 22c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4A2.8 2.8 0 0 0 5 16.9c-1-.7 0-.6 0-.6a2.1 2.1 0 0 1 1.6 1 2.1 2.1 0 0 0 3 .9 2.3 2.3 0 0 1 .6-1.4c-2.2-.3-4.6-1.2-4.6-5a4 4 0 0 1 1-2.8 3.8 3.8 0 0 1 .2-2.7s.8-.3 2.7 1a9.4 9.4 0 0 1 5 0c2-1.3 2.8-1 2.8-1a3.8 3.8 0 0 1 0 2.7 4 4 0 0 1 1 2.8c0 3.9-2.3 4.7-4.5 5a2.5 2.5 0 0 1 .7 2v2.7c0 .3.1.6.7.5a10.2 10.2 0 0 0 6.8-9.8A10.1 10.1 0 0 0 12 2z\")\n\t\t\t\t!= ` {{ opensource.title }}`\n\n\t\t\t| {{#opensource.translate}}\n\t\t\t| <div class=\"translate__text\">{{ opensource.translate }}</div>\n\t\t\t| {{/opensource.translate}}\n"
  },
  {
    "path": "src/helpers/constants.ts",
    "content": "export const noTimingFunction = \"no\";\n\nexport const selectorInfo = \".info\";\nexport const selectorInfoChart = \".info-chart\";\nexport const selectorSimpleInfo = \".js-info-simple\";\nexport const selectorComplexInfo = \".js-info-complex\";\nexport const selectorDetails = \".details\";\nexport const selectorCode = \".details__code\";\nexport const selectorComplexKeyframeScale = `${selectorCode}[data-type=scale]`;\nexport const selectorComplexKeyframeOpacity = `${selectorCode}[data-type=opacity]`;\nexport const selectorComplexKeyframeTranslate = `${selectorCode}[data-type=translate]`;\nexport const selectorGradient = \".example__gradient\";\nexport const selectorCopyButton = \".example-copy__button\";\nexport const selectorCopyCode = \".example-copy__code\";\n\nexport const infoChartOffsetTopClassName = \"info-chart--offset_top\";\n\nexport const color1 = \"#1473e6\";\nexport const color2 = \"#247b5e\";\n"
  },
  {
    "path": "src/helpers/copyText.ts",
    "content": "export function copyTextFromElement(element: HTMLElement): void {\n\tconst selection = document.createRange();\n\tselection.selectNode(element);\n\n\twindow.getSelection().removeAllRanges();\n\twindow.getSelection().addRange(selection);\n\n\tdocument.execCommand(\"copy\");\n\twindow.getSelection().removeAllRanges();\n}\n"
  },
  {
    "path": "src/helpers/forNodeList.ts",
    "content": "/**\n * Call function for each NodeList\n */\nexport function forNodeList(\n\telements: NodeList,\n\tcallback: (item: HTMLElement, index: number) => void\n): void {\n\tArray.prototype.slice.call(elements).forEach(callback);\n}\n"
  },
  {
    "path": "src/helpers/getElement.ts",
    "content": "/**\n * Get DOM Element\n * @param selector {string}\n * @param context {Document|HTMLElement}\n * @return {HTMLElement}\n */\nexport function getElement<T extends HTMLElement = HTMLElement>(\n\tselector: string,\n\tcontext: Document | HTMLElement = document\n): T {\n\treturn context.querySelector(selector);\n}\n\n/**\n * Get DOM Elements\n * @param selector {string}\n * @param context {Document|HTMLElement}\n * @return {NodeList}\n */\nexport function getElementsList<T extends HTMLElement = HTMLElement>(\n\tselector: string,\n\tcontext: Document | HTMLElement = document\n): NodeListOf<T> {\n\treturn context.querySelectorAll(selector);\n}\n"
  },
  {
    "path": "src/helpers/getElementPosition.ts",
    "content": "export interface ElementPosition {\n\theight: number;\n\twidth: number;\n\tx: number;\n\ty: number;\n}\n\n/**\n * Get element position\n * @param element {HTMLElement}\n * @return {{x: number, width: number, y: number, height: number}}\n */\nexport function getElementPosition(element: HTMLElement): ElementPosition {\n\tconst position = element.getBoundingClientRect();\n\n\treturn {\n\t\theight: position.height,\n\t\twidth: position.width,\n\t\tx: position.left + window.pageXOffset,\n\t\ty: position.top + window.pageYOffset,\n\t};\n}\n"
  },
  {
    "path": "src/helpers/getTransitionTime.ts",
    "content": "/**\n * Computing transition time for the element\n * @param element {Element}\n * @return {number}\n */\nexport function getTransitionTime(element: Element): number {\n\tconst style = window.getComputedStyle(element);\n\tconst transitionDurationString = /([\\d.]+m*s)/i.exec(\n\t\tstyle.transitionDuration\n\t);\n\n\tconst transitionDuration = parseFloat(transitionDurationString[1]);\n\tconst ratioTime = transitionDurationString[1].indexOf(\"ms\") > -1 ? 1 : 1000;\n\n\treturn transitionDuration * ratioTime;\n}\n"
  },
  {
    "path": "src/helpers/linearInterpolation.ts",
    "content": "/**\n * Linear interpolation\n * @param y1 {number}\n * @param y2 {number}\n * @param x {number}\n * @return {number}\n */\nexport function linearInterpolation(y1: number, y2: number, x: number): number {\n\treturn Math.round(x * (y2 - y1) + y1);\n}\n"
  },
  {
    "path": "src/helpers/mixColors.ts",
    "content": "import { linearInterpolation } from \"./linearInterpolation\";\n\n/**\n * Mix 2 colors\n * @param color1 {string} - hex color\n * @param color2 {string} - hex color\n * @param blend {number} - between 0 and 1\n * @return {string} - hex color\n */\nexport function mixColors(\n\tcolor1: string,\n\tcolor2: string,\n\tblend: number\n): string {\n\tif (color1.length !== 7 || color2.length !== 7) {\n\t\treturn \"\";\n\t}\n\n\tconst color1RGB: number[] = [];\n\tconst color2RGB: number[] = [];\n\tconst colorRGB: number[] = [];\n\n\tcolor1.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i).forEach((item) => {\n\t\tif (item.length === 2) {\n\t\t\tconst color = parseInt(item, 16);\n\t\t\tcolor1RGB.push(color);\n\t\t}\n\t});\n\n\tcolor2.match(/#*([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i).forEach((item) => {\n\t\tif (item.length === 2) {\n\t\t\tconst color = parseInt(item, 16);\n\t\t\tcolor2RGB.push(color);\n\t\t}\n\t});\n\n\tcolor1RGB.forEach((c1, index) => {\n\t\tconst mixedColor = linearInterpolation(c1, color2RGB[index], blend);\n\t\tcolorRGB.push(mixedColor);\n\t});\n\n\tconst colorResult = colorRGB\n\t\t.map((item) => {\n\t\t\tlet hex = item.toString(16);\n\n\t\t\tif (hex.length === 0) {\n\t\t\t\thex = \"00\";\n\t\t\t} else if (hex.length === 1) {\n\t\t\t\thex = `0${hex}`;\n\t\t\t}\n\n\t\t\treturn hex;\n\t\t})\n\t\t.join(\"\");\n\n\treturn `#${colorResult}`;\n}\n"
  },
  {
    "path": "src/helpers/parseStringOfFourNumbers.ts",
    "content": "/**\n * Parse string of four numbers (example: viewBox)\n * @param stringOfFourNumbers {string}\n * @return {number[]}\n */\nexport function parseStringOfFourNumbers(\n\tstringOfFourNumbers: string\n): number[] {\n\tconst points = stringOfFourNumbers.match(/(-*[.\\d]+)/g);\n\n\tif (!points || points.length !== 4) {\n\t\treturn [];\n\t}\n\n\treturn [\n\t\tparseFloat(points[0]),\n\t\tparseFloat(points[1]),\n\t\tparseFloat(points[2]),\n\t\tparseFloat(points[3]),\n\t];\n}\n"
  },
  {
    "path": "src/helpers/roundTo2DecimalPlaces.ts",
    "content": "/**\n * Round to 2 decimal places\n * @param decimal {number}\n * @return {number}\n */\nfunction roundTo2DecimalPlaces(decimal: number): number {\n\treturn Math.round(decimal * 100) / 100;\n}\n\nexport default roundTo2DecimalPlaces;\n"
  },
  {
    "path": "src/icon/icon.css",
    "content": ".icon {\n\theight: 1em;\n\tvertical-align: middle;\n\ttransform: translateY(-10%);\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n\t.icon__image {\n\t\tflex: 0 0 auto;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: block;\n\t\tfill: currentColor;\n\t}\n\n\t\t\t.icon__image--small {\n\t\t\t\twidth: 16px;\n\t\t\t\theight: 16px;\n\t\t\t}\n"
  },
  {
    "path": "src/index.css",
    "content": "@import \"./variables/variables.css\";\n@import \"./core/core.css\";\n@import \"./utils/utils.css\";\n@import \"./layout/layout.css\";\n@import \"./button/button.css\";\n@import \"./icon/icon.css\";\n@import \"./header/header.css\";\n@import \"./translate/translate.css\";\n@import \"./footer/footer.css\";\n@import \"./columns/columns.css\";\n@import \"./info/info.css\";\n@import \"./info-chart/info-chart.css\";\n@import \"./function/function.css\";\n@import \"./code/code.css\";\n@import \"./chart/chart.css\";\n@import \"./example/example.css\";\n@import \"./example-copy/example-copy.css\";\n@import \"./cases/cases.css\";\n@import \"./case/case.css\";\n@import \"./card/card.css\";\n@import \"./details/details.css\";\n@import \"./overlay/overlay.css\";\n"
  },
  {
    "path": "src/index.pug",
    "content": "include header/header\ninclude footer/footer\ninclude columns/columns\ninclude info/info\ninclude overlay/overlay\n\ndoctype html\nhtml(lang=\"{{ lang_code }}\" dir=\"{{ dir }}\")\n\thead\n\t\tmeta(charset=\"utf-8\")\n\t\tmeta(name=\"viewport\" content=\"width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover\")\n\t\tmeta(http-equiv=\"x-ua-compatible\" content=\"ie=edge\")\n\t\t| {{{ redirect_script }}}\n\n\t\ttitle {{ title }}\n\t\tmeta(content=\"{{ description }}\" name=\"description\")\n\t\tmeta(name=\"theme-color\" content=\"#1473e6\")\n\t\tlink(rel=\"manifest\" href=\"./manifest.webmanifest\")\n\t\tlink(rel=\"icon\" type=\"image/png\" href=\"./icons/96.png\")\n\t\tlink(rel=\"mask-icon\" href=\"./icons/mask.svg\" color=\"#1473e6\" sizes=\"any\")\n\n\t\tmeta(property=\"og:url\" content=\"http://easings.net/\")\n\t\tmeta(property=\"og:image\" content=\"./icons/192.png\")\n\t\tmeta(property=\"og:description\" content=\"{{ share }}\")\n\n\t\tlink(href=\"./index.css\" rel=\"stylesheet\")\n\n\tbody\n\t\t.layout\n\t\t\tsvg.layout__gradients-curve(xmlns=\"http://www.w3.org/2000/svg\" width=\"0\" height=\"0\")\n\t\t\t\t-\n\t\t\t\t\tvar colorBase = 'var(--main-text-color)';\n\t\t\t\t\tvar colorStart = 'var(--brand-color)';\n\t\t\t\t\tvar colorEnd = 'var(--second-color)';\n\n\t\t\t\tdefs\n\t\t\t\t\tsymbol#copy(viewBox=\"0 0 561 561\")\n\t\t\t\t\t\tpath(d=\"M395 0H89C61 0 38 23 38 51v357h51V51h306V0zm77 102H191c-28 0-51 23-51 51v357c0 28 23 51 51 51h281c28 0 51-23 51-51V153c0-28-23-51-51-51zm0 408H191V153h281v357z\")\n\t\t\t\t\tsymbol#done(viewBox=\"0 0 512 512\")\n\t\t\t\t\t\tpath(d=\"M437 75a254 254 0 00-362 0 254 254 0 000 362 254 254 0 00362 0 254 254 0 000-362zM256 482a226 226 0 111-453 226 226 0 01-1 453zM378 174c-6-6-15-6-21 0L225 306l-70-69a15 15 0 00-21 21l80 80a15 15 0 0021 0l143-143c6-6 6-15 0-21z\")\n\n\t\t\t\t\tlinearGradient#in(x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\")\n\t\t\t\t\t\tstop(offset=\"0%\" stop-color=colorBase)\n\t\t\t\t\t\tstop(offset=\"50%\" stop-color=colorBase)\n\t\t\t\t\t\tstop(offset=\"70%\" stop-color=colorEnd)\n\t\t\t\t\t\tstop(offset=\"100%\" stop-color=colorEnd)\n\t\t\t\t\tlinearGradient#out(x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\")\n\t\t\t\t\t\tstop(offset=\"0%\" stop-color=colorStart)\n\t\t\t\t\t\tstop(offset=\"30%\" stop-color=colorStart)\n\t\t\t\t\t\tstop(offset=\"50%\" stop-color=colorBase)\n\t\t\t\t\t\tstop(offset=\"100%\" stop-color=colorBase)\n\t\t\t\t\tlinearGradient#inOut(x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\")\n\t\t\t\t\t\tstop(offset=\"0%\" stop-color=colorStart)\n\t\t\t\t\t\tstop(offset=\"20%\" stop-color=colorStart)\n\t\t\t\t\t\tstop(offset=\"80%\" stop-color=colorEnd)\n\t\t\t\t\t\tstop(offset=\"100%\" stop-color=colorEnd)\n\n\t\t\th1.layout__title {{ title }}\n\n\t\t\t.layout__wrap\n\t\t\t\t+header\n\n\t\t\t\t.layout__content\n\t\t\t\t\t+columns\n\t\t\t\t\t+info\n\n\t\t\t+overlay\n\t\t\t+footer\n\n\t\tscript(src='./index.ts' async)\n\t\tlink(href=\"./keyframes.css\" rel=\"stylesheet\")\n\n\t\t| {{{ service_worker }}}\n"
  },
  {
    "path": "src/index.ts",
    "content": "import \"focus-visible\";\n\nimport \"./navigation/navigation\";\nimport \"./function/function\";\nimport \"./example-copy/example-copy\";\nimport \"./footer/footer\";\nimport \"./theme/theme\";\n"
  },
  {
    "path": "src/info/info.css",
    "content": ".info {\n\topacity: 0;\n\tvisibility: hidden;\n\ttransition: var(--transition-time);\n\tdisplay: none;\n\tposition: relative;\n\tz-index: 2;\n\tmargin: 0 0 var(--general-line-height);\n}\n\n\t\t.info--evident {\n\t\t\topacity: 1;\n\t\t\tvisibility: visible;\n\t\t}\n\n\t.info__header {\n\t\tmargin: 0 0 var(--general-line-height);\n\t}\n\n\t\t.info__icon {}\n\n\t\t\t\t[dir=\"rtl\"] .info__icon {\n\t\t\t\t\ttransform: scaleX(-1);\n\t\t\t\t}\n\n\t.info__wrap {\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t}\n\n\t\t.info__case {\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0 0 0 20px;\n\t\t\twidth: 100%;\n\t\t\tflex: 0 1 370px;\n\t\t}\n\n\t\t\t\t[dir=\"rtl\"] .info__case {\n\t\t\t\t\tpadding: 0 20px 0 0;\n\t\t\t\t}\n\n\t\t.info__main {\n\t\t\tflex: 1 1 auto;\n\t\t\twidth: 1px;\n\t\t\tmin-width: 60%;\n\t\t\tmax-width: 800px;\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin-top: -1rem;\n\t\t}\n\n\t\t\t.info__title {\n\t\t\t\tfont-size: 42px;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tline-height: calc(2 * var(--general-line-height));\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0 0 0.25em;\n\t\t\t}\n\n@media (max-width: 800px) {\n\t.info__wrap {\n\t\tmargin: 0;\n\t\tdisplay: block;\n\t}\n\n\t\t.info__case {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.info__main {\n\t\t\tpadding: 0 0 calc(2 * var(--general-line-height));\n\t\t\twidth: 100%;\n\t\t}\n}\n\n@media (max-width: 550px) {\n\t.info__title {\n\t\tfont-size: 30px;\n\t}\n}\n"
  },
  {
    "path": "src/info/info.pug",
    "content": "include ../code/codeCss\ninclude ../code/codePostCss\ninclude ../code/codeGradient\ninclude ../code/codeMaths\ninclude ../example-copy/example-copy\n\ninclude ../case/case\ninclude ../details/details\n\nmixin info\n\tsection.info\n\t\t.info__header\n\t\t\ta.button.button--small(href=\"#\")\n\t\t\t\tspan.icon\n\t\t\t\t\tsvg.icon__image.icon__image--small.info__icon(xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 24\")\n\t\t\t\t\t\tpath(d=\"M14,3.8L12.2,2L2,12l10.2,10l1.8-1.8L5.6,12L14,3.8z\")\n\t\t\t\t!= ` {{ easing.all_easings }}`\n\n\t\t.info__wrap\n\t\t\t.info__main\n\t\t\t\th2.info__title.js-info-name\n\n\t\t\t\t.info-chart\n\t\t\t\t\t.info-chart__wrap\n\t\t\t\t\t\tsvg.info-chart__curve(xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 125 85\")\n\t\t\t\t\t\t\tpath(d=\"M0 0L0 0z\")\n\n\t\t\t\t\t\t.info-chart__text x\n\t\t\t\t\t\t.info-chart__text.info-chart__text--bottom t\n\t\t\t\t\t\tbutton.info-chart__target(aria-hidden=\"true\")\n\t\t\t\t\t\t.info-chart__cursor\n\n\t\t\t\t.example\n\t\t\t\t\t.example__title CSS\n\t\t\t\t\t.js-info-simple\n\t\t\t\t\t\tdiv {{ howtos.css.text }}\n\t\t\t\t\t\t.example__code\n\t\t\t\t\t\t\t+example-copy\n\t\t\t\t\t\t\t\t+codeCss\n\t\t\t\t\t\tdiv.\n\t\t\t\t\t\t\t{{#link}}\n\t\t\t\t\t\t\t\t( howtos.css.edit )\n\t\t\t\t\t\t\t\t[href=\"http://cubic-bezier.com/\" rel=\"noopener noreferrer\" target=\"_blank\" class=\"js-cubic-bezier\"]\n\t\t\t\t\t\t\t{{/link}}\n\n\t\t\t\t\t.js-info-complex\n\t\t\t\t\t\tdiv {{{ howtos.css.with_animation }}}:\n\t\t\t\t\t\t+details(\"{{ howtos.css.example_size }}\", \"scale\") {{ easing.load }}\n\t\t\t\t\t\t+details(\"{{ howtos.css.example_position }}\", \"translate\") {{ easing.load }}\n\t\t\t\t\t\t+details(\"{{ howtos.css.example_opacity }}\", \"opacity\") {{ easing.load }}\n\n\t\t\t\t.example\n\t\t\t\t\t.example__title PostCSS\n\t\t\t\t\t.js-info-simple\n\t\t\t\t\t\tdiv.\n\t\t\t\t\t\t\t{{#link}}\n\t\t\t\t\t\t\t\t( howtos.postcss.text )\n\t\t\t\t\t\t\t\t[href=\"https://github.com/postcss/postcss-easings\" rel=\"noopener noreferrer\" target=\"_blank\"]\n\t\t\t\t\t\t\t{{/link}}\n\t\t\t\t\t\t.example__code\n\t\t\t\t\t\t\t+example-copy\n\t\t\t\t\t\t\t\t+codePostCss\n\t\t\t\t\t\tdiv {{ howtos.postcss.explanation }}\n\t\t\t\t\t.js-info-complex\n\t\t\t\t\t\tdiv {{{ howtos.postcss.disabled }}}\n\n\t\t\t\t.example.js-info-simple\n\t\t\t\t\t.example__title {{ howtos.gradient.name }}\n\t\t\t\t\tdiv.\n\t\t\t\t\t\t{{#link}}\n\t\t\t\t\t\t\t( howtos.gradient.text )\n\t\t\t\t\t\t\t[href=\"https://github.com/larsenwork/postcss-easing-gradients\" rel=\"noopener noreferrer\" target=\"_blank\"]\n\t\t\t\t\t\t{{/link}}\n\t\t\t\t\t.example__code\n\t\t\t\t\t\t+example-copy\n\t\t\t\t\t\t\t+codeGradient\n\t\t\t\t\t.example__gradient\n\n\n\t\t\t\t.example\n\t\t\t\t\t.example__title {{ howtos.mathfunction.name }}\n\t\t\t\t\t.js-info-simple\n\t\t\t\t\t\tdiv {{ howtos.mathfunction.text }}\n\t\t\t\t\t\t.example__code\n\t\t\t\t\t\t\t+example-copy\n\t\t\t\t\t\t\t\t+codeMaths\n\t\t\t\t\t.js-info-complex\n\t\t\t\t\t\tdiv {{ howtos.mathfunction.text }}\n\t\t\t\t\t\t.example__code\n\t\t\t\t\t\t\t+example-copy\n\t\t\t\t\t\t\t\t+codeMaths\n\n\t\t\t.info__case\n\t\t\t\t.cases__title {{ easing.check }}:\n\t\t\t\t.cases__actions\n\t\t\t\t\tbutton.button.button--small.cases__action(data-type=\"scale\") {{ easing.check_size }}\n\t\t\t\t\tbutton.button.button--small.cases__action(data-type=\"translate\") {{ easing.check_position }}\n\t\t\t\t\tbutton.button.button--small.cases__action(data-type=\"opacity\") {{ easing.check_opacity }}\n\n\t\t\t\t.cases__list\n\t\t\t\t\t+case(\"{{ easing.current_func }}\", true)\n\t\t\t\t\t+case(\"{{ easing.linear_func }}\")\n"
  },
  {
    "path": "src/info/info.ts",
    "content": "import {\n\tselectorComplexInfo,\n\tselectorComplexKeyframeOpacity,\n\tselectorComplexKeyframeScale,\n\tselectorComplexKeyframeTranslate,\n\tselectorInfo,\n\tselectorSimpleInfo,\n} from \"../helpers/constants\";\nimport { forNodeList } from \"../helpers/forNodeList\";\nimport { getElement, getElementsList } from \"../helpers/getElement\";\nimport { generateComplexEasings, keyframeTypes } from \"../easings/easings\";\n\nconst info = getElement(selectorInfo);\nconst infoSimple = getElementsList(selectorSimpleInfo);\nconst infoComplex = getElementsList(selectorComplexInfo);\nconst infoName = getElementsList(\".js-info-name\", info);\nconst infoFuncName = getElementsList(\".js-info-func\", info);\nconst infoMaths = getElementsList(\".js-info-maths\", info);\n\nconst infoKeyframes = {\n\topacity: getElement(selectorComplexKeyframeOpacity),\n\tscale: getElement(selectorComplexKeyframeScale),\n\ttranslate: getElement(selectorComplexKeyframeTranslate),\n};\n\nexport function setInfoName(name: string): void {\n\tforNodeList(infoName, (e) => {\n\t\te.innerText = name;\n\t});\n}\n\nexport function setInfoFunc(func: string): void {\n\tforNodeList(infoFuncName, (e) => {\n\t\te.innerText = func;\n\t});\n}\n\nexport function setInfoMaths(maths: string): void {\n\tforNodeList(infoMaths, (e) => {\n\t\te.innerText = maths;\n\t});\n}\n\nexport function showSimpleInfo(): void {\n\tforNodeList(infoSimple, (item) => (item.hidden = false));\n\tforNodeList(infoComplex, (item) => (item.hidden = true));\n}\n\nexport function showComplexInfo(name: string): void {\n\tforNodeList(infoSimple, (item) => (item.hidden = true));\n\tforNodeList(infoComplex, (item) => (item.hidden = false));\n\n\tinfoKeyframes.opacity.innerHTML = generateComplexEasings(\n\t\tname,\n\t\tkeyframeTypes.opacity\n\t);\n\tinfoKeyframes.scale.innerHTML = generateComplexEasings(\n\t\tname,\n\t\tkeyframeTypes.scale\n\t);\n\tinfoKeyframes.translate.innerHTML = generateComplexEasings(\n\t\tname,\n\t\tkeyframeTypes.translate\n\t);\n}\n"
  },
  {
    "path": "src/info-chart/info-chart.css",
    "content": ".info-chart {\n\tposition: relative;\n\twidth: 100%;\n\tpadding: var(--general-line-height) 0 var(--general-line-height) 1px;\n\tuser-select: none;\n}\n\n\t\t.info-chart--offset_top {\n\t\t\tpadding-top: calc(2 * var(--general-line-height));\n\t\t}\n\n\t.info-chart__wrap {\n\t\tposition: relative;\n\t\tcolor: var(--gray-lighten-color);\n\t\tmax-width: 150px;\n\t}\n\n\t\t.info-chart__wrap::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: -1px;\n\t\t\tleft: -1px;\n\t\t\tborder-left: 1px solid currentColor;\n\t\t\tborder-bottom: 1px solid currentColor;\n\t\t}\n\n\n\t\t.info-chart__curve {\n\t\t\tfill: none;\n\t\t\tstroke: var(--brand-color);\n\t\t\tstroke-width: 1px;\n\t\t\tstroke-linecap: round;\n\t\t\toverflow: visible;\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.info-chart__text {\n\t\t\tfont-size: 14px;\n\t\t\tposition: absolute;\n\t\t\ttop: 1px;\n\t\t\tleft: 5px;\n\t\t}\n\n\t\t\t\t.info-chart__text--bottom {\n\t\t\t\t\ttop: auto;\n\t\t\t\t\tleft: auto;\n\t\t\t\t\tright: 8px;\n\t\t\t\t\tbottom: 4px;\n\t\t\t\t}\n\n\t\t.info-chart__target {\n\t\t\tdisplay: block;\n\t\t\tborder: none;\n\t\t\tbackground: none;\n\t\t\toutline: none;\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t.info-chart__cursor {\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tright: -17px;\n\t\t\topacity: 0;\n\t\t\twill-change: top;\n\t\t\ttransition: top 0s, opacity 0s;\n\t\t\ttransition-delay: 0s, 0s;\n\t\t\ttransform: translateY(-5px);\n\t\t}\n\n\t\t\t\t.info-chart__cursor--visible {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttop: 1%;\n\t\t\t\t\ttransition: top var(--transition-card-time), opacity var(--transition-time);\n\t\t\t\t\ttransition-delay: var(--transition-time), 0s;\n\t\t\t\t}\n\n\t\t\t.info-chart__cursor::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 0 50% 50% 50%;\n\t\t\t\tbackground: var(--brand-color);\n\t\t\t\ttransform: rotate(-45deg);\n\t\t\t}\n"
  },
  {
    "path": "src/info-chart/info-chart.ts",
    "content": "import { getElement } from \"../helpers/getElement\";\n\nconst infoChartTargetState = getElement(\".info-chart__target\");\nconst infoChartCursor = getElement(\".info-chart__cursor\");\nconst infoChartCursorVisibleSelector = \"info-chart__cursor--visible\";\n\nlet nameAnimation: string | null = null;\n\ninfoChartTargetState.addEventListener(\"pointerenter\", showCursor);\ninfoChartTargetState.addEventListener(\"pointerleave\", hideCursor);\ninfoChartTargetState.addEventListener(\"mouseenter\", showCursor);\ninfoChartTargetState.addEventListener(\"mouseleave\", hideCursor);\ninfoChartTargetState.addEventListener(\"focus\", showCursor);\ninfoChartTargetState.addEventListener(\"blur\", hideCursor);\n\nexport function setTransitionForInfoChartCursor(\n\tcssFunc: string,\n\tname: string\n): void {\n\tif (cssFunc === \"no\") {\n\t\tnameAnimation = name;\n\t} else {\n\t\tnameAnimation = null;\n\t\tinfoChartCursor.style.transitionTimingFunction = cssFunc;\n\t}\n}\n\nfunction showCursor(): void {\n\tif (nameAnimation) {\n\t\tinfoChartCursor.style.animation = `\n\t\t\t\t1s cursor-${nameAnimation} both 0.2s linear\n\t\t\t`;\n\t}\n\n\tinfoChartCursor.classList.add(infoChartCursorVisibleSelector);\n}\n\nfunction hideCursor(): void {\n\tinfoChartCursor.style.transitionDuration = \"0s\";\n\tvoid infoChartCursor.offsetWidth;\n\n\tif (nameAnimation) {\n\t\tinfoChartCursor.style.animation = null;\n\t}\n\n\tinfoChartCursor.classList.remove(infoChartCursorVisibleSelector);\n\tinfoChartCursor.style.transitionDuration = null;\n}\n"
  },
  {
    "path": "src/keyframes.css",
    "content": "@import \"./variables/variables.css\";\n@import \"./animation/index.css\";\n"
  },
  {
    "path": "src/layout/layout.css",
    "content": "/*noinspection CssInvalidFunction,CssOverwrittenProperties*/\n.layout {\n\toverflow: hidden;\n\tpadding-top: constant(safe-area-inset-top, 0px);;\n\tpadding-top: env(safe-area-inset-top, 0px);;\n\tpadding-left: constant(safe-area-inset-left, 0px);;\n\tpadding-left: env(safe-area-inset-left, 0px);;\n\tpadding-right: constant(safe-area-inset-right, 0px);;\n\tpadding-right: env(safe-area-inset-right, 0px);;\n\tpadding-bottom: constant(safe-area-inset-bottom, 0px);;\n\tpadding-bottom: env(safe-area-inset-bottom, 0px);;\n}\n\n\t.layout__gradients-curve,\n\t.layout__title {\n\t\tposition: absolute;\n\t\tclip: rect(0 0 0 0);\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t}\n\n\t.layout__wrap {\n\t\tposition: relative;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\tmargin: 0 auto;\n\t\tmax-width: 1050px;\n\t\tpadding: 0 15px;\n\t}\n\n\t\t.layout__content {\n\t\t\tposition: relative;\n\t\t}\n"
  },
  {
    "path": "src/manifest.webmanifest",
    "content": "{\n\t\"lang\": \"{{ lang_code }}\",\n\t\"name\": \"{{ title }}\",\n\t\"short_name\": \"{{ short_name }}\",\n\t\"description\": \"{{ description }}\",\n\t\"start_url\": \"/{{ lang_code }}\",\n\t\"display\": \"standalone\",\n\t\"theme_color\": \"#1473e6\",\n\t\"background_color\": \"#fff\",\n\t\"icons\": [\n\t\t{\n\t\t\t\"src\": \"./icons/logo.svg\",\n\t\t\t\"type\": \"image/svg\",\n\t\t\t\"sizes\": \"48x48 72x72 96x96 144x144\"\n\t\t},\n\t\t{\n\t\t\t\"src\": \"./icons/192.png\",\n\t\t\t\"sizes\": \"192x192\"\n\t\t},\n\t\t{\n\t\t\t\"src\": \"./icons/512.png\",\n\t\t\t\"sizes\": \"512x512\"\n\t\t}\n\t]\n}\n"
  },
  {
    "path": "src/math/math.pug",
    "content": "-\n\tconst pow = Math.pow;\n\tconst sin = Math.sin;\n\tconst cos = Math.cos;\n\tconst PI = Math.PI;\n\tconst c1 = 1.70158;\n\tconst c2 = c1 * 1.525;\n\tconst c3 = c1 + 1;\n\tconst c4 = (2 * PI) / 3;\n\tconst c5 = (2 * PI) / 4.5;\n\n\tconst functionsList = {\n\t\teaseInElastic: function (x) {\n\t\t\treturn x === 0 ? 0 : x === 1 ? 1 :\n\t\t\t\t-pow( 2, 10 * x - 10 ) * sin( ( x * 10 - 10.75 ) * c4 );\n\t\t},\n\t\teaseOutElastic: function (x) {\n\t\t\treturn x === 0 ? 0 : x === 1 ? 1 :\n\t\t\t\tpow( 2, -10 * x ) * sin( ( x * 10 - 0.75 ) * c4 ) + 1;\n\t\t},\n\t\teaseInOutElastic: function (x) {\n\t\t\treturn x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?\n\t\t\t\t-( pow( 2, 20 * x - 10 ) * sin( ( 20 * x - 11.125 ) * c5 )) / 2 :\n\t\t\t\tpow( 2, -20 * x + 10 ) * sin( ( 20 * x - 11.125 ) * c5 ) / 2 + 1;\n\t\t},\n\t\teaseInBounce: function (x) {\n\t\t\treturn 1 - bounceOut( 1 - x );\n\t\t},\n\t\teaseOutBounce: bounceOut,\n\t\teaseInOutBounce: function (x) {\n\t\t\treturn x < 0.5 ?\n\t\t\t\t( 1 - bounceOut( 1 - 2 * x ) ) / 2 :\n\t\t\t\t( 1 + bounceOut( 2 * x - 1 ) ) / 2;\n\t\t}\n\t};\n\n\tfunction getEasing(name, width, height) {\n\t\tif (functionsList.hasOwnProperty(name)) {\n\t\t\tvar line = \"\";\n\n\t\t\tfor (var index = 0.01; index < 1; index = index + 0.01) {\n\t\t\t\tconst offsetX = index * (width - 1);\n\t\t\t\tconst offsetY = (1 - functionsList[name](index)) * (height - 1);\n\t\t\t\tline = line.concat(`${offsetX.toFixed(2)} ${offsetY.toFixed(2)} `);\n\t\t\t}\n\n\t\t\treturn line;\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tfunction bounceOut(x) {\n\t\tconst n1 = 7.5625;\n\t\tconst d1 = 2.75;\n\n\t\tif ( x < 1/d1 ) {\n\t\t\treturn n1*x*x;\n\t\t} else if ( x < 2/d1 ) {\n\t\t\treturn n1*(x-=(1.5/d1))*x + .75;\n\t\t} else if ( x < 2.5/d1 ) {\n\t\t\treturn n1*(x-=(2.25/d1))*x + .9375;\n\t\t} else {\n\t\t\treturn n1*(x-=(2.625/d1))*x + .984375;\n\t\t}\n\t}\n"
  },
  {
    "path": "src/navigation/navigation.ts",
    "content": "import { clearTransition, setFuncForCard } from \"../card/card\";\nimport { getTransitionTime } from \"../helpers/getTransitionTime\";\nimport { getElementPosition } from \"../helpers/getElementPosition\";\nimport { parseStringOfFourNumbers } from \"../helpers/parseStringOfFourNumbers\";\nimport {\n\tinfoChartOffsetTopClassName,\n\tnoTimingFunction,\n\tselectorInfo,\n\tselectorInfoChart,\n\tselectorDetails,\n} from \"../helpers/constants\";\nimport { forNodeList } from \"../helpers/forNodeList\";\nimport { getElement, getElementsList } from \"../helpers/getElement\";\nimport {\n\tsetInfoFunc,\n\tsetInfoName,\n\tsetInfoMaths,\n\tshowComplexInfo,\n\tshowSimpleInfo,\n} from \"../info/info\";\nimport {\n\tresetOverlay,\n\tsetSizeOverlay,\n\tsetTransitionDurationOverlay,\n\tshowOverlay,\n} from \"../overlay/overlay\";\nimport { hideGradient, setGradient } from \"../gradient/gradient\";\nimport { setTransitionForInfoChartCursor } from \"../info-chart/info-chart\";\n\nconst selectorColumns = \".columns\";\nconst timeTransitionForOverlay = 300;\nconst linkCubicBezierElement = getElement<HTMLLinkElement>(\".js-cubic-bezier\");\nconst linkCubicBezierHref = linkCubicBezierElement.href;\n\nconst header = getElement(\".header\");\nconst info = getElement(selectorInfo);\nconst infoChart = getElement(selectorInfoChart);\nconst columns = getElement(selectorColumns);\n\nconst overlayOffsetVertical = 30;\nconst overlayOffsetHorizontal = 30;\n\nlet openItemId: string | null;\n\nwindow.addEventListener(\"resize\", resizeInfo, false);\n\ninfo.addEventListener(\"click\", () => {\n\trequestAnimationFrame(resizeInfo);\n});\n\nconst chartId = window.location.hash.slice(1);\nif (chartId) {\n\tnavigateChart(chartId);\n}\n\nwindow.addEventListener(\n\t\"hashchange\",\n\t() => {\n\t\tif (window.getSelection) {\n\t\t\twindow.getSelection().removeAllRanges();\n\t\t}\n\t\tforNodeList(getElementsList(selectorDetails), (item) => {\n\t\t\tif (item.hasAttribute(\"open\")) {\n\t\t\t\titem.removeAttribute(\"open\");\n\t\t\t}\n\t\t});\n\n\t\tconst id = window.location.hash.slice(1);\n\n\t\tif (id) {\n\t\t\tnavigateChart(id);\n\t\t} else {\n\t\t\tnavigateMain();\n\t\t}\n\t},\n\tfalse\n);\n\nwindow.addEventListener(\"keydown\", (event) => {\n\tconst keyName = \"escape\";\n\tif (\n\t\tevent.key.toLowerCase() === keyName ||\n\t\tevent.code.toLowerCase() === keyName\n\t) {\n\t\twindow.location.hash = \"\";\n\t}\n});\n\nfunction navigateMain(): void {\n\twindow.scrollTo({\n\t\tbehavior: \"smooth\",\n\t\ttop: 0,\n\t});\n\n\tconst item = document.getElementById(`func-${openItemId}`);\n\tconst infoTransitionTime = getTransitionTime(info);\n\n\topenItemId = null;\n\tcolumns.removeAttribute(\"style\");\n\tcolumns.classList.remove(\"columns--hide\");\n\n\tinfo.classList.remove(\"info--evident\");\n\tinfo.style.position = \"absolute\";\n\tinfo.style.top = \"0px\";\n\tinfo.style.left = \"0px\";\n\tinfo.style.right = \"0px\";\n\n\tsetTransitionDurationOverlay(timeTransitionForOverlay);\n\n\tsetTimeout(() => {\n\t\tinfo.removeAttribute(\"style\");\n\n\t\tconst itemPosition = getElementPosition(item);\n\t\tsetSizeOverlay({\n\t\t\theight: itemPosition.height,\n\t\t\tleft: itemPosition.x,\n\t\t\ttop: itemPosition.y,\n\t\t\twidth: itemPosition.width,\n\t\t});\n\t}, infoTransitionTime);\n\n\tsetTimeout(resetOverlay, timeTransitionForOverlay + infoTransitionTime);\n}\n\nfunction navigateChart(id: string): void {\n\tconst item = document.getElementById(`func-${id}`);\n\n\tif (!item || openItemId === id) {\n\t\treturn;\n\t}\n\n\tclearTransition();\n\n\topenItemId = id;\n\tconst name = item.getAttribute(\"data-name\");\n\tconst func = item.getAttribute(\"data-func\");\n\tconst maths = item.getAttribute(\"data-maths\");\n\tconst itemOffset = item.getAttribute(\"data-offset\");\n\tconst transitionTimingFunction = func === noTimingFunction ? \"ease\" : func;\n\n\tif (name && func) {\n\t\tconst infoCurve = getElement(\".info-chart__curve\", info);\n\t\tconst itemCurve = getElement(\".chart__curve\", item);\n\t\tconst columnsTransitionTime = getTransitionTime(columns);\n\n\t\tif (itemOffset === \"top\") {\n\t\t\tinfoChart.classList.add(infoChartOffsetTopClassName);\n\t\t} else {\n\t\t\tinfoChart.classList.remove(infoChartOffsetTopClassName);\n\t\t}\n\n\t\tsetInfoName(name);\n\t\tsetInfoFunc(func);\n\t\tsetInfoMaths(maths);\n\t\tsetFuncForCard(func, name);\n\t\tsetTransitionForInfoChartCursor(func, name);\n\n\t\tif (func !== noTimingFunction) {\n\t\t\tconst points = parseStringOfFourNumbers(func);\n\t\t\tlinkCubicBezierElement.href = `${linkCubicBezierHref}#${points.join(\n\t\t\t\t\",\"\n\t\t\t)}`;\n\t\t\tshowSimpleInfo();\n\t\t\tsetGradient(name, points);\n\t\t} else {\n\t\t\tshowComplexInfo(name);\n\t\t\thideGradient();\n\t\t}\n\n\t\tgetElement(\"path\", infoCurve).setAttribute(\n\t\t\t\"d\",\n\t\t\titemCurve.getAttribute(\"d\")\n\t\t);\n\n\t\tinfo.style.transitionTimingFunction = transitionTimingFunction;\n\t\tinfo.style.display = \"block\";\n\n\t\trequestAnimationFrame(() => {\n\t\t\tconst itemPosition = getElementPosition(item);\n\n\t\t\tsetTransitionDurationOverlay(timeTransitionForOverlay);\n\t\t\tshowOverlay();\n\t\t\tsetSizeOverlay({\n\t\t\t\theight: itemPosition.height,\n\t\t\t\tleft: itemPosition.x,\n\t\t\t\ttop: itemPosition.y,\n\t\t\t\twidth: itemPosition.width,\n\t\t\t});\n\n\t\t\tcolumns.classList.add(\"columns--hide\");\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tconst infoPosition = getElementPosition(info);\n\n\t\t\t\tsetSizeOverlay({\n\t\t\t\t\theight: infoPosition.height + overlayOffsetVertical,\n\t\t\t\t\tleft: infoPosition.x - overlayOffsetHorizontal / 2,\n\t\t\t\t\ttop: infoPosition.y - overlayOffsetVertical / 2,\n\t\t\t\t\twidth: infoPosition.width + overlayOffsetHorizontal,\n\t\t\t\t});\n\n\t\t\t\tconst headerPosition = getElementPosition(header);\n\t\t\t\tconst topOffset =\n\t\t\t\t\theaderPosition.height + headerPosition.y - overlayOffsetVertical / 2;\n\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\twindow.scrollTo({\n\t\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\t\ttop: topOffset,\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\n\t\tsetTimeout(() => {\n\t\t\tinfo.classList.add(\"info--evident\");\n\t\t}, timeTransitionForOverlay);\n\n\t\tsetTimeout(() => {\n\t\t\tcolumns.style.display = \"none\";\n\t\t}, timeTransitionForOverlay + columnsTransitionTime);\n\t}\n}\n\nfunction resizeInfo(): void {\n\tif (!openItemId) {\n\t\treturn;\n\t}\n\n\tconst infoPosition = getElementPosition(info);\n\n\tsetTransitionDurationOverlay(0);\n\tsetSizeOverlay({\n\t\theight: infoPosition.height + overlayOffsetVertical,\n\t\tleft: infoPosition.x - overlayOffsetHorizontal / 2,\n\t\ttop: infoPosition.y - overlayOffsetVertical / 2,\n\t\twidth: infoPosition.width + overlayOffsetHorizontal,\n\t});\n}\n"
  },
  {
    "path": "src/overlay/overlay.css",
    "content": ".overlay {\n\tposition: absolute;\n\tz-index: 1;\n\tbackground: var(--second-background);\n\twill-change: width, height, top, left;\n\ttransform: translateZ(0);\n\tbox-shadow: 0 2px 8px var(--transparent-color-5);\n}\n"
  },
  {
    "path": "src/overlay/overlay.pug",
    "content": "mixin overlay\n\t.overlay(hidden)\n"
  },
  {
    "path": "src/overlay/overlay.ts",
    "content": "import { getElement } from \"../helpers/getElement\";\n\nexport interface OverlaySize {\n\ttop: number;\n\tleft: number;\n\theight: number;\n\twidth: number;\n}\n\nconst overlay = getElement(\".overlay\");\n\nexport function setTransitionDurationOverlay(timeAtMs: number): void {\n\toverlay.style.transitionDuration = `${timeAtMs}ms`;\n}\n\nexport function resetOverlay(): void {\n\toverlay.removeAttribute(\"style\");\n\toverlay.hidden = true;\n}\n\nexport function showOverlay(): void {\n\toverlay.hidden = false;\n}\n\nexport function setSizeOverlay(size: OverlaySize): void {\n\toverlay.style.height = `${size.height}px`;\n\toverlay.style.width = `${size.width}px`;\n\toverlay.style.top = `${size.top}px`;\n\toverlay.style.left = `${size.left}px`;\n}\n"
  },
  {
    "path": "src/pug.config.js",
    "content": "const fs = require(\"fs\");\nconst yamlParse = require(\"js-yaml\");\n\nconst easings = yamlParse.safeLoad(\n\tfs.readFileSync(\"./src/easings.yml\", \"utf8\")\n);\n\nmodule.exports = {\n\tlocals: {\n\t\tall_easings: easings,\n\t},\n\tpretty: false,\n};\n"
  },
  {
    "path": "src/sw.js",
    "content": "const version = \"v3.0.3\";\n\nself.addEventListener(\"install\", (event) => {\n\tevent.waitUntil(\n\t\tcaches\n\t\t\t.open(version)\n\t\t\t.then((cache) =>\n\t\t\t\tcache.addAll([\n\t\t\t\t\t\"keyframes.css\",\n\t\t\t\t\t\"index.ts\",\n\t\t\t\t\t\"card.jpg\",\n\t\t\t\t\t\"96.png\",\n\t\t\t\t\t\"192.png\",\n\t\t\t\t\t\"512.png\",\n\t\t\t\t\t\"logo.svg\",\n\t\t\t\t\t\"mask.svg\",\n\t\t\t\t\t\"/\",\n\t\t\t\t\t\"/:lang\",\n\t\t\t\t])\n\t\t\t)\n\t);\n});\n\nself.addEventListener(\"fetch\", function (event) {\n\tevent.respondWith(cacheOrNetwork(event.request));\n\tevent.waitUntil(updateCache(event.request));\n});\n\nfunction fromNetwork(request) {\n\treturn fetch(request);\n}\n\nfunction cacheOrNetwork(request) {\n\treturn fromCache(request).catch(() => fromNetwork(request));\n}\n\nfunction fromCache(request) {\n\treturn caches\n\t\t.open(version)\n\t\t.then((cache) =>\n\t\t\tcache\n\t\t\t\t.match(request)\n\t\t\t\t.then((matching) => matching || Promise.reject(request))\n\t\t);\n}\n\nfunction updateCache(request) {\n\treturn caches\n\t\t.open(version)\n\t\t.then((cache) =>\n\t\t\tfetch(request).then((response) =>\n\t\t\t\tcache.put(request, response.clone()).then(() => response)\n\t\t\t)\n\t\t);\n}\n"
  },
  {
    "path": "src/theme/theme.ts",
    "content": "import { getElement } from \"../helpers/getElement\";\n\nconst selectorThemeSelect = \".footer__theme\";\nconst themeSelect = getElement<HTMLSelectElement>(selectorThemeSelect);\n\nconst classLightTheme = \"is-light\";\nconst classDarkTheme = \"is-dark\";\n\nconst storageThemeKey = \"theme\";\n\nif (typeof localStorage.getItem(storageThemeKey) === \"string\") {\n\tconst theme = localStorage.getItem(storageThemeKey);\n\tthemeSelect.value = theme;\n\tchangeTheme(theme);\n}\n\nthemeSelect.addEventListener(\"change\", () => {\n\tlocalStorage.setItem(storageThemeKey, themeSelect.value);\n\tchangeTheme(themeSelect.value);\n});\n\nfunction changeTheme(value: string): void {\n\tswitch (value) {\n\t\tcase \"light\":\n\t\t\tdocument.documentElement.classList.remove(classDarkTheme);\n\t\t\tdocument.documentElement.classList.add(classLightTheme);\n\t\t\tbreak;\n\n\t\tcase \"dark\":\n\t\t\tdocument.documentElement.classList.remove(classLightTheme);\n\t\t\tdocument.documentElement.classList.add(classDarkTheme);\n\t\t\tbreak;\n\n\t\tdefault:\n\t\t\tdocument.documentElement.classList.remove(\n\t\t\t\tclassLightTheme,\n\t\t\t\tclassDarkTheme\n\t\t\t);\n\t}\n}\n"
  },
  {
    "path": "src/translate/translate.css",
    "content": ".translate {\n\tmargin: 0 0 calc(var(--general-line-height) / 2);\n\tposition: relative;\n\ttext-align: center;\n\tborder: none;\n\ttext-decoration: none;\n}\n\n\t\t.translate--with-background {\n\t\t\tbackground: var(--second-background);\n\t\t\tpadding: 10px 15px;\n\t\t}\n\n\t.translate__text {\n\t\twidth: 1px;\n\t\tmin-width: 100%;\n\t\tbox-sizing: border-box;\n\t\tpadding: 5px 0 0;\n\t}\n"
  },
  {
    "path": "src/utils/utils.css",
    "content": ".u-color-brand {\n\tcolor: var(--brand-color);\n}\n\n.u-color-second {\n\tcolor: var(--second-color);\n}\n"
  },
  {
    "path": "src/variables/variables.css",
    "content": ":root {\n\t--main-background: #f8f8f8;\n\t--main-text-color: #222;\n\n\t--second-background: #fff;\n\t--second-background-transparent: rgba(255, 255, 255, 0);\n\n\t--brand-color: #1473e6;\n\t--brand-color-text: #fff;\n\t--brand-darken-color: #095aba;\n\t--brand-darken-color-text: #fff;\n\t--brand-lighten-color: #2680eb;\n\n\t--second-color: #247b5e;\n\n\t--gray-color: #6e6e6e;\n\t--gray-lighten-color: #cacaca;\n\n\t--button-background-color: var(--brand-color);\n\t--footer-link-color: var(--brand-darken-color);\n\n\t--function-shadow: rgba(0, 0, 0, 0.05);\n\t--function-shadow-active: rgba(0, 0, 0, 0.2);\n\n\t--card-overlay: rgba(0, 0, 0, 0.7);\n\t--card-overlay-text: #fff;\n\n\t--transparent-color: rgba(0, 0, 0, 0);\n\t--transparent-color-5: rgba(0, 0, 0, 0.05);\n\t--transparent-color-20: rgba(0, 0, 0, 0.2);\n\t--transparent-invert-color: rgba(255, 255, 255, 0);\n\n\t--transition-time: 0.2s;\n\t--transition-small-time: 0.1s;\n\t--transition-card-time: 1s;\n\t--transition-show-time: 1.5s;\n\n\t--line-height: 1.4;\n\t--line-height-code: 1.5;\n\t--general-line-height: 22px;\n\n\t--code-fonts: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n@media (prefers-color-scheme: dark) {\n\t:root {\n\t\t--main-background: #222;\n\t\t--main-text-color: #fff;\n\n\t\t--second-background: rgb(17, 17, 17);\n\t\t--second-background-transparent: rgba(17, 17, 17, 0);\n\n\t\t--brand-color: #227dec;\n\n\t\t--second-color: #298e6d;\n\n\t\t--button-background-color: #136edd;\n\t\t--footer-link-color: #4993ee;\n\n\t\t--function-shadow: rgba(255, 255, 255, 0.05);\n\t\t--function-shadow-active: rgba(255, 255, 255, 0.2);\n\n\t\t--transparent-color: rgba(255, 255, 255, 0);\n\t\t--transparent-color-5: rgba(255, 255, 255, 0.05);\n\t\t--transparent-color-20: rgba(255, 255, 255, 0.2);\n\t\t--transparent-invert-color: rgba(0, 0, 0, 0);\n\t}\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n\t\"compilerOptions\": {\n\t\t\"declaration\": true,\n\t\t\"declarationDir\": \"./dist\",\n\t\t\"module\": \"es6\",\n\t\t\"outDir\": \"./dist\",\n\t\t\"target\": \"es5\",\n\t\t\"noImplicitAny\": true\n\t},\n\t\"include\": [\"src/**/*\"],\n\t\"exclude\": [\"node_modules\"]\n}\n"
  }
]