Repository: ai/easings.net Branch: master Commit: f0151970d1a2 Files: 139 Total size: 234.2 KB Directory structure: gitextract_3r9xlmr5/ ├── .babelrc ├── .editorconfig ├── .eslintrc.json ├── .github/ │ └── workflows/ │ ├── cd.yml │ └── ci.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── i18n/ │ ├── _af.yml │ ├── _az.yml │ ├── _ca.yml │ ├── _cs.yml │ ├── _cy.yml │ ├── _da.yml │ ├── _es.yml │ ├── _nb.yml │ ├── _pt.yml │ ├── _sk.yml │ ├── _sr-latn.yml │ ├── am.yml │ ├── ar.yml │ ├── bn.yml │ ├── de.yml │ ├── el-gr.yml │ ├── en.yml │ ├── es-mx.yml │ ├── fa-ir.yml │ ├── fr.yml │ ├── he.yml │ ├── hi.yml │ ├── hu.yml │ ├── id.yml │ ├── it.yml │ ├── ja.yml │ ├── ko.yml │ ├── lb.yml │ ├── ml.yml │ ├── nl.yml │ ├── no-bok.yml │ ├── pl.yml │ ├── pt-br.yml │ ├── ro.yml │ ├── ru.yml │ ├── si.yml │ ├── sq.yml │ ├── sv-se.yml │ ├── tr.yml │ ├── uk.yml │ ├── vi.yml │ ├── yue.yml │ ├── zh-cn.yml │ └── zh-tw.yml ├── package.json ├── scripts/ │ ├── build.js │ ├── helpers/ │ │ └── format.js │ └── start.js ├── src/ │ ├── 404.css │ ├── 404.pug │ ├── animation/ │ │ ├── easeInBounce.css │ │ ├── easeInElastic.css │ │ ├── easeInOutBounce.css │ │ ├── easeInOutElastic.css │ │ ├── easeOutBounce.css │ │ ├── easeOutElastic.css │ │ └── index.css │ ├── button/ │ │ └── button.css │ ├── card/ │ │ ├── card.css │ │ ├── card.pug │ │ └── card.ts │ ├── case/ │ │ ├── case.css │ │ └── case.pug │ ├── cases/ │ │ └── cases.css │ ├── chart/ │ │ └── chart.css │ ├── code/ │ │ ├── code.css │ │ ├── codeCss.pug │ │ ├── codeGradient.pug │ │ ├── codeMaths.pug │ │ └── codePostCss.pug │ ├── columns/ │ │ ├── columns.css │ │ └── columns.pug │ ├── core/ │ │ └── core.css │ ├── details/ │ │ ├── details.css │ │ └── details.pug │ ├── easings/ │ │ ├── easings.ts │ │ ├── easingsFunctions.ts │ │ └── keyframes.ts │ ├── easings.yml │ ├── error/ │ │ ├── error.css │ │ └── error.pug │ ├── example/ │ │ └── example.css │ ├── example-copy/ │ │ ├── example-copy.css │ │ ├── example-copy.pug │ │ └── example-copy.ts │ ├── external-link/ │ │ └── external-link.pug │ ├── footer/ │ │ ├── footer.css │ │ ├── footer.pug │ │ └── footer.ts │ ├── function/ │ │ ├── function.css │ │ ├── function.pug │ │ └── function.ts │ ├── gradient/ │ │ └── gradient.ts │ ├── header/ │ │ ├── header.css │ │ └── header.pug │ ├── helpers/ │ │ ├── constants.ts │ │ ├── copyText.ts │ │ ├── forNodeList.ts │ │ ├── getElement.ts │ │ ├── getElementPosition.ts │ │ ├── getTransitionTime.ts │ │ ├── linearInterpolation.ts │ │ ├── mixColors.ts │ │ ├── parseStringOfFourNumbers.ts │ │ └── roundTo2DecimalPlaces.ts │ ├── icon/ │ │ └── icon.css │ ├── index.css │ ├── index.pug │ ├── index.ts │ ├── info/ │ │ ├── info.css │ │ ├── info.pug │ │ └── info.ts │ ├── info-chart/ │ │ ├── info-chart.css │ │ └── info-chart.ts │ ├── keyframes.css │ ├── layout/ │ │ └── layout.css │ ├── manifest.webmanifest │ ├── math/ │ │ └── math.pug │ ├── navigation/ │ │ └── navigation.ts │ ├── overlay/ │ │ ├── overlay.css │ │ ├── overlay.pug │ │ └── overlay.ts │ ├── pug.config.js │ ├── sw.js │ ├── theme/ │ │ └── theme.ts │ ├── translate/ │ │ └── translate.css │ ├── utils/ │ │ └── utils.css │ └── variables/ │ └── variables.css └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": [ ["@babel/env", { "useBuiltIns": "entry" }] ] } ================================================ FILE: .editorconfig ================================================ # editorconfig.org root = true [*] indent_style = tab indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.yml] indent_style = space indent_size = 2 [node_modules/**.js] codepaint = false ================================================ FILE: .eslintrc.json ================================================ { "parser": "@typescript-eslint/parser", "parserOptions": { "sourceType": "module" }, "extends": [ "eslint:recommended", "plugin:prettier/recommended" ], "plugins": [ "@typescript-eslint", "prettier" ], "env": { "browser": true, "node": true }, "rules": { "prettier/prettier": "error", "arrow-parens": ["error", "always"], "array-bracket-spacing": "error", "arrow-spacing": "error", "arrow-body-style": "error", "block-spacing": "error", "brace-style": ["error", "1tbs"], "comma-dangle": [ "error", { "arrays": "always-multiline", "objects": "always-multiline", "imports": "always-multiline", "exports": "always-multiline", "functions": "ignore" } ], "eqeqeq": "error", "key-spacing": "error", "keyword-spacing": ["error", { "after": true }], "object-curly-spacing": ["error", "always"], "no-prototype-builtins": "error", "no-undef": "off" }, "overrides": [ { "files": [ "*.ts" ], "rules": { "no-console": "error", "no-undef": "error", "no-unused-vars": "off", "camelcase": "off", "no-array-constructor": "off", "no-empty-function": "off", "no-use-before-define": "off", "no-var": "error", "prefer-const": "error", "@typescript-eslint/adjacent-overload-signatures": "error", "@typescript-eslint/ban-ts-comment": "error", "@typescript-eslint/ban-tslint-comment": "error", "@typescript-eslint/ban-types": "error", "@typescript-eslint/consistent-type-assertions": "error", "@typescript-eslint/no-array-constructor": "error", "@typescript-eslint/no-empty-interface": "error", "@typescript-eslint/no-inferrable-types": "error", "@typescript-eslint/no-misused-new": "error", "@typescript-eslint/no-namespace": "error", "@typescript-eslint/no-non-null-assertion": "warn", "@typescript-eslint/no-this-alias": "error", "@typescript-eslint/no-var-requires": "error", "@typescript-eslint/prefer-namespace-keyword": "error", "@typescript-eslint/triple-slash-reference": "error", "@typescript-eslint/type-annotation-spacing": "error", "@typescript-eslint/interface-name-prefix": "off", "@typescript-eslint/camelcase": "off", "@typescript-eslint/no-use-before-define": [ "error", { "functions": false } ], "@typescript-eslint/no-unused-vars": [ "error", { "argsIgnorePattern": "^_" } ], "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-empty-function": "off", "@typescript-eslint/explicit-function-return-type": "error" } } ] } ================================================ FILE: .github/workflows/cd.yml ================================================ name: CD on: push: branches: - master jobs: deploy: name: Build and deploy runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - run: yarn install - name: Build run: yarn run build - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist cname: easings.net ================================================ FILE: .github/workflows/ci.yml ================================================ name: CI on: push: branches: - master pull_request: jobs: lint: name: Lint runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - run: yarn install - run: yarn run lint ================================================ FILE: .gitignore ================================================ dist/ .cache node_modules yarn-error.log ================================================ FILE: .prettierignore ================================================ dist/ ================================================ FILE: .prettierrc ================================================ { "arrowParens": "always", "bracketSpacing": true, "jsxBracketSameLine": false, "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": false } ================================================ FILE: LICENSE ================================================ GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 Copyright (C) 2007 Free Software Foundation, Inc. [http://fsf.org/] Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. Preamble The GNU General Public License is a free, copyleft license for software and other kinds of works. The licenses for most software and other practical works are designed to take away your freedom to share and change the works. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change all versions of a program--to make sure it remains free software for all its users. We, the Free Software Foundation, use the GNU General Public License for most of our software; it applies also to any other work released this way by its authors. You can apply it to your programs, too. When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for them if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs, and that you know you can do these things. To protect your rights, we need to prevent others from denying you these rights or asking you to surrender the rights. Therefore, you have certain responsibilities if you distribute copies of the software, or if you modify it: responsibilities to respect the freedom of others. For example, if you distribute copies of such a program, whether gratis or for a fee, you must pass on to the recipients the same freedoms that you received. You must make sure that they, too, receive or can get the source code. And you must show them these terms so they know their rights. Developers that use the GNU GPL protect your rights with two steps: (1) assert copyright on the software, and (2) offer you this License giving you legal permission to copy, distribute and/or modify it. For the developers' and authors' protection, the GPL clearly explains that there is no warranty for this free software. For both users' and authors' sake, the GPL requires that modified versions be marked as changed, so that their problems will not be attributed erroneously to authors of previous versions. Some devices are designed to deny users access to install or run modified versions of the software inside them, although the manufacturer can do so. This is fundamentally incompatible with the aim of protecting users' freedom to change the software. The systematic pattern of such abuse occurs in the area of products for individuals to use, which is precisely where it is most unacceptable. Therefore, we have designed this version of the GPL to prohibit the practice for those products. If such problems arise substantially in other domains, we stand ready to extend this provision to those domains in future versions of the GPL, as needed to protect the freedom of users. Finally, every program is threatened constantly by software patents. States should not allow patents to restrict development and use of software on general-purpose computers, but in those that do, we wish to avoid the special danger that patents applied to a free program could make it effectively proprietary. To prevent this, the GPL assures that patents cannot be used to render the program non-free. The precise terms and conditions for copying, distribution and modification follow. TERMS AND CONDITIONS 0. Definitions. "This License" refers to version 3 of the GNU General Public License. "Copyright" also means copyright-like laws that apply to other kinds of works, such as semiconductor masks. "The Program" refers to any copyrightable work licensed under this License. Each licensee is addressed as "you". "Licensees" and "recipients" may be individuals or organizations. To "modify" a work means to copy from or adapt all or part of the work in a fashion requiring copyright permission, other than the making of an exact copy. The resulting work is called a "modified version" of the earlier work or a work "based on" the earlier work. A "covered work" means either the unmodified Program or a work based on the Program. To "propagate" a work means to do anything with it that, without permission, would make you directly or secondarily liable for infringement under applicable copyright law, except executing it on a computer or modifying a private copy. Propagation includes copying, distribution (with or without modification), making available to the public, and in some countries other activities as well. To "convey" a work means any kind of propagation that enables other parties to make or receive copies. Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying. An interactive user interface displays "Appropriate Legal Notices" to the extent that it includes a convenient and prominently visible feature that (1) displays an appropriate copyright notice, and (2) tells the user that there is no warranty for the work (except to the extent that warranties are provided), that licensees may convey the work under this License, and how to view a copy of this License. If the interface presents a list of user commands or options, such as a menu, a prominent item in the list meets this criterion. 1. Source Code. The "source code" for a work means the preferred form of the work for making modifications to it. "Object code" means any non-source form of a work. A "Standard Interface" means an interface that either is an official standard defined by a recognized standards body, or, in the case of interfaces specified for a particular programming language, one that is widely used among developers working in that language. The "System Libraries" of an executable work include anything, other than the work as a whole, that (a) is included in the normal form of packaging a Major Component, but which is not part of that Major Component, and (b) serves only to enable use of the work with that Major Component, or to implement a Standard Interface for which an implementation is available to the public in source code form. A "Major Component", in this context, means a major essential component (kernel, window system, and so on) of the specific operating system (if any) on which the executable work runs, or a compiler used to produce the work, or an object code interpreter used to run it. The "Corresponding Source" for a work in object code form means all the source code needed to generate, install, and (for an executable work) run the object code and to modify the work, including scripts to control those activities. However, it does not include the work's System Libraries, or general-purpose tools or generally available free programs which are used unmodified in performing those activities but which are not part of the work. For example, Corresponding Source includes interface definition files associated with source files for the work, and the source code for shared libraries and dynamically linked subprograms that the work is specifically designed to require, such as by intimate data communication or control flow between those subprograms and other parts of the work. The Corresponding Source need not include anything that users can regenerate automatically from other parts of the Corresponding Source. The Corresponding Source for a work in source code form is that same work. 2. Basic Permissions. All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law. You may make, run and propagate covered works that you do not convey, without conditions so long as your license otherwise remains in force. You may convey covered works to others for the sole purpose of having them make modifications exclusively for you, or provide you with facilities for running those works, provided that you comply with the terms of this License in conveying all material for which you do not control copyright. Those thus making or running the covered works for you must do so exclusively on your behalf, under your direction and control, on terms that prohibit them from making any copies of your copyrighted material outside their relationship with you. Conveying under any other circumstances is permitted solely under the conditions stated below. Sublicensing is not allowed; section 10 makes it unnecessary. 3. Protecting Users' Legal Rights From Anti-Circumvention Law. No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures. When you convey a covered work, you waive any legal power to forbid circumvention of technological measures to the extent such circumvention is effected by exercising rights under this License with respect to the covered work, and you disclaim any intention to limit operation or modification of the work as a means of enforcing, against the work's users, your or third parties' legal rights to forbid circumvention of technological measures. 4. Conveying Verbatim Copies. You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program. You may charge any price or no price for each copy that you convey, and you may offer support or warranty protection for a fee. 5. Conveying Modified Source Versions. You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions: a) The work must carry prominent notices stating that you modified it, and giving a relevant date. b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to "keep intact all notices". c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it. d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so. A compilation of a covered work with other separate and independent works, which are not by their nature extensions of the covered work, and which are not combined with it such as to form a larger program, in or on a volume of a storage or distribution medium, is called an "aggregate" if the compilation and its resulting copyright are not used to limit the access or legal rights of the compilation's users beyond what the individual works permit. Inclusion of a covered work in an aggregate does not cause this License to apply to the other parts of the aggregate. 6. Conveying Non-Source Forms. You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways: a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange. b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge. c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b. d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements. e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d. A separable portion of the object code, whose source code is excluded from the Corresponding Source as a System Library, need not be included in conveying the object code work. A "User Product" is either (1) a "consumer product", which means any tangible personal property which is normally used for personal, family, or household purposes, or (2) anything designed or sold for incorporation into a dwelling. In determining whether a product is a consumer product, doubtful cases shall be resolved in favor of coverage. For a particular product received by a particular user, "normally used" refers to a typical or common use of that class of product, regardless of the status of the particular user or of the way in which the particular user actually uses, or expects or is expected to use, the product. A product is a consumer product regardless of whether the product has substantial commercial, industrial or non-consumer uses, unless such uses represent the only significant mode of use of the product. "Installation Information" for a User Product means any methods, procedures, authorization keys, or other information required to install and execute modified versions of a covered work in that User Product from a modified version of its Corresponding Source. The information must suffice to ensure that the continued functioning of the modified object code is in no case prevented or interfered with solely because modification has been made. If you convey an object code work under this section in, or with, or specifically for use in, a User Product, and the conveying occurs as part of a transaction in which the right of possession and use of the User Product is transferred to the recipient in perpetuity or for a fixed term (regardless of how the transaction is characterized), the Corresponding Source conveyed under this section must be accompanied by the Installation Information. But this requirement does not apply if neither you nor any third party retains the ability to install modified object code on the User Product (for example, the work has been installed in ROM). The requirement to provide Installation Information does not include a requirement to continue to provide support service, warranty, or updates for a work that has been modified or installed by the recipient, or for the User Product in which it has been modified or installed. Access to a network may be denied when the modification itself materially and adversely affects the operation of the network or violates the rules and protocols for communication across the network. Corresponding Source conveyed, and Installation Information provided, in accord with this section must be in a format that is publicly documented (and with an implementation available to the public in source code form), and must require no special password or key for unpacking, reading or copying. 7. Additional Terms. "Additional permissions" are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions. When you convey a copy of a covered work, you may at your option remove any additional permissions from that copy, or from any part of it. (Additional permissions may be written to require their own removal in certain cases when you modify the work.) You may place additional permissions on material, added by you to a covered work, for which you have or can give appropriate copyright permission. Notwithstanding any other provision of this License, for material you add to a covered work, you may (if authorized by the copyright holders of that material) supplement the terms of this License with terms: a) Disclaiming warranty or limiting liability differently from the terms of sections 15 and 16 of this License; or b) Requiring preservation of specified reasonable legal notices or author attributions in that material or in the Appropriate Legal Notices displayed by works containing it; or c) Prohibiting misrepresentation of the origin of that material, or requiring that modified versions of such material be marked in reasonable ways as different from the original version; or d) Limiting the use for publicity purposes of names of licensors or authors of the material; or e) Declining to grant rights under trademark law for use of some trade names, trademarks, or service marks; or f) Requiring indemnification of licensors and authors of that material by anyone who conveys the material (or modified versions of it) with contractual assumptions of liability to the recipient, for any liability that these contractual assumptions directly impose on those licensors and authors. All other non-permissive additional terms are considered "further restrictions" within the meaning of section 10. If the Program as you received it, or any part of it, contains a notice stating that it is governed by this License along with a term that is a further restriction, you may remove that term. If a license document contains a further restriction but permits relicensing or conveying under this License, you may add to a covered work material governed by the terms of that license document, provided that the further restriction does not survive such relicensing or conveying. If you add terms to a covered work in accord with this section, you must place, in the relevant source files, a statement of the additional terms that apply to those files, or a notice indicating where to find the applicable terms. Additional terms, permissive or non-permissive, may be stated in the form of a separately written license, or stated as exceptions; the above requirements apply either way. 8. Termination. You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11). However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation. Moreover, your license from a particular copyright holder is reinstated permanently if the copyright holder notifies you of the violation by some reasonable means, this is the first time you have received notice of violation of this License (for any work) from that copyright holder, and you cure the violation prior to 30 days after your receipt of the notice. Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, you do not qualify to receive new licenses for the same material under section 10. 9. Acceptance Not Required for Having Copies. You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so. 10. Automatic Licensing of Downstream Recipients. Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License. An "entity transaction" is a transaction transferring control of an organization, or substantially all assets of one, or subdividing an organization, or merging organizations. If propagation of a covered work results from an entity transaction, each party to that transaction who receives a copy of the work also receives whatever licenses to the work the party's predecessor in interest had or could give under the previous paragraph, plus a right to possession of the Corresponding Source of the work from the predecessor in interest, if the predecessor has it or can get it with reasonable efforts. You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. For example, you may not impose a license fee, royalty, or other charge for exercise of rights granted under this License, and you may not initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making, using, selling, offering for sale, or importing the Program or any portion of it. 11. Patents. A "contributor" is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's "contributor version". A contributor's "essential patent claims" are all patent claims owned or controlled by the contributor, whether already acquired or hereafter acquired, that would be infringed by some manner, permitted by this License, of making, using, or selling its contributor version, but do not include claims that would be infringed only as a consequence of further modification of the contributor version. For purposes of this definition, "control" includes the right to grant patent sublicenses in a manner consistent with the requirements of this License. Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under the contributor's essential patent claims, to make, use, sell, offer for sale, import and otherwise run, modify and propagate the contents of its contributor version. In the following three paragraphs, a "patent license" is any express agreement or commitment, however denominated, not to enforce a patent (such as an express permission to practice a patent or covenant not to sue for patent infringement). To "grant" such a patent license to a party means to make such an agreement or commitment not to enforce a patent against the party. If you convey a covered work, knowingly relying on a patent license, and the Corresponding Source of the work is not available for anyone to copy, free of charge and under the terms of this License, through a publicly available network server or other readily accessible means, then you must either (1) cause the Corresponding Source to be so available, or (2) arrange to deprive yourself of the benefit of the patent license for this particular work, or (3) arrange, in a manner consistent with the requirements of this License, to extend the patent license to downstream recipients. "Knowingly relying" means you have actual knowledge that, but for the patent license, your conveying the covered work in a country, or your recipient's use of the covered work in a country, would infringe one or more identifiable patents in that country that you have reason to believe are valid. If, pursuant to or in connection with a single transaction or arrangement, you convey, or propagate by procuring conveyance of, a covered work, and grant a patent license to some of the parties receiving the covered work authorizing them to use, propagate, modify or convey a specific copy of the covered work, then the patent license you grant is automatically extended to all recipients of the covered work and works based on it. A patent license is "discriminatory" if it does not include within the scope of its coverage, prohibits the exercise of, or is conditioned on the non-exercise of one or more of the rights that are specifically granted under this License. You may not convey a covered work if you are a party to an arrangement with a third party that is in the business of distributing software, under which you make payment to the third party based on the extent of your activity of conveying the work, and under which the third party grants, to any of the parties who would receive the covered work from you, a discriminatory patent license (a) in connection with copies of the covered work conveyed by you (or copies made from those copies), or (b) primarily for and in connection with specific products or compilations that contain the covered work, unless you entered into that arrangement, or that patent license was granted, prior to 28 March 2007. Nothing in this License shall be construed as excluding or limiting any implied license or other defenses to infringement that may otherwise be available to you under applicable patent law. 12. No Surrender of Others' Freedom. If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not convey it at all. For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program. 13. Use with the GNU Affero General Public License. Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU Affero General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the special requirements of the GNU Affero General Public License, section 13, concerning interaction through a network will apply to the combination as such. 14. Revised Versions of this License. The Free Software Foundation may publish revised and/or new versions of the GNU General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. Each version is given a distinguishing version number. If the Program specifies that a certain numbered version of the GNU General Public License "or any later version" applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the GNU General Public License, you may choose any version ever published by the Free Software Foundation. If the Program specifies that a proxy can decide which future versions of the GNU General Public License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Program. Later license versions may give you additional or different permissions. However, no additional obligations are imposed on any author or copyright holder as a result of your choosing to follow a later version. 15. Disclaimer of Warranty. THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 16. Limitation of Liability. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 17. Interpretation of Sections 15 and 16. If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee. END OF TERMS AND CONDITIONS How to Apply These Terms to Your New Programs If you develop a new program, and you want it to be of the greatest possible use to the public, the best way to achieve this is to make it free software which everyone can redistribute and change under these terms. To do so, attach the following notices to the program. It is safest to attach them to the start of each source file to most effectively state the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found. {one line to give the program's name and a brief idea of what it does.} Copyright (C) {year} {name of author} This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see [http://www.gnu.org/licenses/]. Also add information on how to contact you by electronic and paper mail. If the program does terminal interaction, make it output a short notice like this when it starts in an interactive mode: {project} Copyright (C) {year} {fullname} This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. This is free software, and you are welcome to redistribute it under certain conditions; type `show c' for details. The hypothetical commands `show w' and `show c' should show the appropriate parts of the General Public License. Of course, your program's commands might be different; for a GUI interface, you would use an "about box". You should also get your employer (if you work as a programmer) or school, if any, to sign a "copyright disclaimer" for the program, if necessary. For more information on this, and how to apply and follow the GNU GPL, see [http://www.gnu.org/licenses/]. The GNU General Public License does not permit incorporating your program into proprietary programs. If your program is a subroutine library, you may consider it more useful to permit linking proprietary applications with the library. If this is what you want to do, use the GNU Lesser General Public License instead of this License. But first, please read [http://www.gnu.org/philosophy/why-not-lgpl.html]. ================================================ FILE: README.md ================================================ # Easing Functions Cheat Sheet Simple cheat sheet to help developers pick the right easing function. Sponsored by Evil Martians ## Contributing GitHub has great instructions on how to [set up Git], [fork a project] and [make pull requests]. If you have a problem with Git, just send your files directly to . [set up Git]: https://docs.github.com/en/github/getting-started-with-github/set-up-git [fork a project]: https://docs.github.com/en/github/getting-started-with-github/fork-a-repo [make pull requests]: https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests ### Translate Just copy the `i18n/en.yml` file to `i18n/CODE.yml` (where `CODE` is the lowercased [RFC 3066] language code of your target language, for example `fr-ca` for Canadian French) and translate all messages. [RFC 3066]: http://www.i18nguy.com/unicode/language-identifiers.html ### Test 1. Install project dependencies: ```sh yarn install ``` 2. That’s all. Run development server: ```sh yarn run start ``` 3. And open [localhost:1234](https://localhost:1234) in browser. ================================================ FILE: i18n/_af.yml ================================================ title: Easing Functions Cheat Sheet description: Maak animasies meer realisties deur die regte oorgangsfunksie te kies. share: Oorgangsfunksies spesifiseer die spoed van animasie om die beweging meer natuurlik te maak. Regte voorwerpe beweeg nie net teen 'n konstante spoed nie, en begin en stop nie onmiddellik nie. Hierdie bladsy help jou om die regte oorgangsfunksie te kies. about: !!format ~Oorgangsfunksies~ (Easing functions) Bepaal die spoed van verandering van 'n sekere waarde oor 'n bepaalde periode. Voorwerpe in realiteit begin en stop nie onmiddellik nie, en beweeg amper nooit teen 'n konstante spoed nie. Wanneer ons 'n laai oopmaak beweeg ons eers vinnig en dan stadiger soos dit uit kom. Laat val iets op die vloer en dit sal eers versnel na onderen dan terug hop nadat dit die vloer getref het. Hierdie bladsy help jou om die regte oorgangsfunksie te kies. easings: css: Orals beskikbaar js: Net in JavaScript howtos: name: oorgang-naam curve: oorgang-Bézierkurwe js: !!code jQuery met die ^jQuery Easing Plugin^ is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie. scss: !!code Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die ^Compss Ceaser^ plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer). css: !!code CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies. css_bad: Ongelukkig ondersteun hulle nie alle oorgangsfunksies nie en jy moet die gewenste oorgangsfunksie self spesifiseer (as 'n Bézierkurwe). css_help: Kies 'n oorgangsfunksie om die Bézierkurwe notasie te wys. easing: all_easings: Alle oorgange no_css: !!code Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'. edit: ^Edit^ op cubic-bezier.com. opensource: title: open source translate: ^Help vertaal^ blad in jou taal ================================================ FILE: i18n/_az.yml ================================================ title: Yumşaqlıq funksiyaları (easing) description: Lazım olan yumşaqlıq funksiyasını (easing) seçməklə animasiyaları daha təbii edin. share: Yumşaqlıq funksiyası (easing) animasiyanı daha təbii etmək üçün onun cərəyan sürətini müəyyən edir. Belə ki, təbiətdə heç bir şey dərhal və bərabərsürətli hərəkət etmir. Bu saytdan siz müxtəlif yumşaqlıq funksiyalarını seçə bilərsiniz. about: !!format ~Yumşaqlıq funksiyası (easing)~ animasiyanı daha təbii etmək üçün onun cərəyan cürətini müəyyən edir. Təbiətdə heç bir şey dərhal və bərabər sürətlə hərəkət etmir. Məsələn, əgər bir yeşiyin qapağını açırıqsa biz əvvəlcə onu artan təcillə açırıq, daha sonra sürəti azaldaraq hərəkəti saxlayırıq. Əgər bir şey yerə düşərsə, əvvəlcə sürəti artaraq yerə düşür, yerə dəydikdən sonra bir az yuxarı tullanır. Bu saytdan siz müxtəlif yumşaqlıq funksiyalarını seçə bilərsiniz. easings: css: Hər yerdə mövcud js: Yalnız JavaScript vasitəsilə mövcud howtos: name: funksiyanın adı curve: Bezye əyrisi funksiyaları js: !!code ^jQuery Easing Plugin^ əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra `.animate` funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir. scss: !!code Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass `transition` və `animation` xassələrinin önündəki prefixlərdən bizi azad edir. ^Compass Ceaser^ ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür. css: !!code CSS-də `transition` və `animation` xassələri yumşaqlıq funksiyasını göstərməyə imkan verir. css_bad: Təəssüf ki, heç də bütün funksiyalar mövcud deyil, onları Bezye əyrisi olaraq göstərmək lazımdır. css_help: Bezye əyrisi olaraq onu necə tərtib etməyi görmək üçün, funksiyanı seçin. easing: all_easings: Bütün funksiyalar no_css: !!code Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi `@keyframes` istifadə edin. edit: ^Redaktə et^ на cubic-bezier.com. opensource: title: open source translate: Saytı öz dilinə tərcümə etməyə ^Yardım et^ author: Andrey Sitnik ================================================ FILE: i18n/_ca.yml ================================================ title: Funcions Easing Guia de Referència description: Creï animacions més realistes triant la funció 'easing' correcta. share: La funció 'easing' especifica la velocitat de progrés de l'animació per fer-la més realista. L'objecte real no comença el seu movimient de forma instantània i de manera constant. Aquesta pàgina l'ajudarà a triar la funció desitjada. about: !!format La ~funció easing~ especifica la velocitat de l'animació per fer-la més realista. L'objecte real no comença el seu movimient de forma instantània i de manera constant. Quan obrim el calaix, primer li donem acceleració, i després el frenem. Quan alguna cosa cau, primer baixa ràpidament i després d'arribar a terra rebota. Aquesta pàgina l'ajudarà a triar la funció desitjada. easings: css: Tots disponibles js: Només en JavaScript howtos: name: nom easing curve: corba Bezier de l'easing js: !!code jQuery amb ^jQuery Easing Plugin^ és la forma més senzilla de definir una animació amb 'easing'. Únicament necessita ajustar el nom 'easing' al mètode `.animate` com tercer argument o la key `easing`. scss: !!code Sass/SCSS l'ajuden a definir l'animació. Compass elimina els prefixes previs a les propietats `transition` i `animation` i el plugin ^Compass Ceaser^ permet fixar l'easing per el seu nom (sense corbes Bezier). css: !!code Les propietats CSS `transition` i `animation` li permeten fixar la funció 'easing'. css_bad: Desgraciadament, no estan tots suportats i haurà de fixar la funció amb corba Bezier. css_help: Seleccioni 'easing' per mostrar la seva descripció en la corba Bézier. easing: all_easings: Tots els easings no_css: !!code Desgraciadament, CSS no suporta aquest 'easing'. Però pot utilitzar-lo amb JavaScript o amb la propietat CSS Animation `@keyframes`. edit: ^Editar^ en cubic-bezier.com. opensource: title: open source translate: ^Ajuda a traduir^ aquesta web al teu idioma ================================================ FILE: i18n/_cs.yml ================================================ title: Tahák Easing funkcí description: Vytvářejte realističtější animace výběrem správné easing funkce. share: Easing funkce definují rychlost animace tak, aby byl pohyb přirozenější. Skutečné objekty se nepohybují konstantní rychlostí a nezrychlují a nezpomalují okamžitě. Tato stránka vám pomůže vybrat správnou easing funkci. about: !!format ~Easing funkce~ definují úrověň změny parametru v čase. Objekty reálného života nezrychlují a nezastavují okamžitě a téměř nikdy se nepohybují konstantní rychlostí. Když otevřeme šuplík, nejdříve se pohybuje rychle a jak se otevírá zpomaluje. Upusťe něco na zem a ono to nejprve bude zrychlovat dolů a po nárazu na zem se odrazí zpět nahoru. Tato stránka vám pomůže vybrat správnou easing funkci. easings: css: Dostupné kdekoliv js: Pouze v JavaScriptu howtos: name: jméno easing funkce curve: Bezierova křivka easing funkce js: !!code Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s ^jQuery Easing Pluginem^. Do metody `.animate()` zadejte jako třetí parametr jméno easing funkce (např. `easeInCirc`) nebo jej použijte jako hodnotu parametru `easing`. scss: !!code Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností `transition` a `animation` a ^Compass Ceaser^ plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku). css: !!code CSS vlastnosti `transition` a `animation` vám umožní vybrat easing funkci. css_bad: Naneštěstí nejsou podporovány všechny easing funkce, proto musíte požadovanou easing funkci definovat sami (jako Bezierovu křivku). css_help: Pro zobrazení popisu Bezierovy křivky vyberte easing funkci. easing: all_easings: Všechny funkce easing no_css: !!code V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation `@keyframes`. edit: ^Upravit^ na cubic-bezier.com. opensource: title: open source translate: ^Pomozte přeložit^ stránku do vašeho jazyka. ================================================ FILE: i18n/_cy.yml ================================================ title: Coflen Ffrwythianau Easing description: Gwneud animeiddio yn fwy realistig drwy ddewis y ffrwythiant easeing cywir. share: Mae'r ffrwythiannau easing yn gosod cyflymder yr animeiddio i'w gwneud yn fwy naturiol. Nid yw gwrthrychau yn symud ar gyflymder cyson yn y byd go iawn, nac yn dechrau neu aros ar unwaith. Mae'r dudalen hon yn eich cynorthwyo i ddewis y ffrwythiant cywir. about: !!format Mae ~ffrwythianau easing~ yn gosod cyfradd newid paramedr dros amser. Nid yw gwrthrychau yn dechrau neu sdopio symud ar unwaith, a bron byth yn symud ar gyflymder cyson. Pan agorwn ddror, mae'n symud yn gyflym i ddechrau, yna'n arafu fel mae'n dod allan. Os gollyngi rywbeth ar y llawr, bydd yn cyflymu lawr, yna'n adlamu fyny ar ôl taro'r llawr. Mae'r dudalen hon yn eich cynorthwyo i ddewis y ffrwythiant easing cywir. easings: css: Ar gael ym mhob man js: Dim ond gyda JavaScript howtos: name: enw'r easing curve: cromlin Bezier yr easing js: !!code jQuery gyda'r ^jQuery Easing Plugin^ yw'r ffordd orau i ddisgrifio animeiddio gyda easing. Gellir pasio enw'r easing (fel `easeInCirc`) i'r ffrwythiant `.animate()` fel trydydd dadl, neu ei ddefnyddio fel gwerth yr opsiwn `easing`. scss: !!code Gall Sass/SCSS ddisgrifio animeiddio hefyd! Mae Compass yn cael gwared o ragddodiaid cyn y priodweddau `transition` ac `animation`, ac mae'r plugin ^Compass Ceaser^ yn caniatau i basio'r ffrwythiant easing fel enw (heb bennu y gromliniau Bezier). css: !!code Gellir dewis y ffwrythiant easing gyda'r priodweddau CSS `transition` ac `animation`. css_bad: Yn anffodus, nid ydynt yn defnyddio pob math o easing a rhaid pennu'r ffrwythiant easing eich hunain (fel cromlin Bezier). css_help: Dewiser ffrwythiant easing i arddangos ei nodiant cromlin Bezier. easing: all_easings: Pob easing no_css: !!code Nid yw'n gweithio gyda CSS. Ond gellir ei ddefnyddio gyda JS neu ei nodi gyda CSS Animation `@keyframes`. edit: ^Golygu^ ar cubic-bezier.com. opensource: title: côd agored translate: ^Cyfieithu'r^ wefan i dy iaith di ================================================ FILE: i18n/_da.yml ================================================ title: Reference over easing funktioner description: Gør animationer mere realistiske ved at vælge den rette easing-funktion. share: Easing-funktionen angiver hvordan animationen forløber for at gøre den mere realistisk. Virkelige objekter bevæger sig ikke med en konstant hastighed, og starter og stopper ikke sine bevægelser øjeblikkeligt. Denne side hjælper dig med at finde den rette easing-funktion. about: !!format ~Easing-funktionen~ angiver hvordan animationen forløber for at gøre den mere realistisk. Objekter begynder ikke at bevæge sig med det samme eller med en konstant hastighed. Når vi åbner en skuffe er første del af bevægelsen hurtig, og så bremser vi den ned. Når noget falder, ryger det ned hurtigere og hurtigere, og så hopper det op igen efter det har ramt gulvet. Denne side hjælper dig med at finde den rette easing-funktion. easings: css: Tilgængelige alle steder js: Kun i JavaScript howtos: name: easing-navn curve: easing-funktionens Bezierkurve js: !!code jQuery med ^jQuery Easing Plugin^ er den letteste måde at angive en animation med easing. Kald metoden `.animate` med easing-navnet (f.eks. `easeInCirc`) som tredje argument eller som værdi af `easing`-parametret. scss: !!code Sass/SCSS hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før `transition` og `animation` egenskaber, og med ^Compass Ceaser^ plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver). css: !!code CSS-egenskaberne `transition` og `animation` giver dig mulighed for at vælge en easing-funktion. css_bad: Desværre understøtter de ikke alle easing-funktioner, og du kan blive nødt til at definere dem via Bezier-kurver. css_help: Vælg easing-funktion for at se beskrivelsen sammen med en Bezierkurve. easing: all_easings: Alle easing-funktioner no_css: !!code Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. `@keyframes`. edit: ^Rediger^ på cubic-bezier.com. opensource: title: open source translate: ^Hjælp med at oversætte^ websitet til dit sprog ================================================ FILE: i18n/_es.yml ================================================ title: Funciones Easing Guía de Referencia description: Cree animaciones más realistas escogiendo la función `easing` correcta. share: La función `easing` especifica la velocidad del progreso de la animación para hacerla más realista. El objeto real no comienza su movimiento instantáneamente y de manera constante. Esta página le ayudará a escoger la función deseada. about: !!format La ~función easing~ especifica la velocidad de la animación para hacerla más realista. El objeto real no comienza su movimiento instantáneamente y de manera constante. Cuando abrimos el cajón, primero le damos aceleración, y después lo frenamos. Cuando algo se cae, primero baja rápidamente y después de alcanzar el suelo rebota. Esta página le ayudará a escoger la función deseada. easings: css: Disponible en todo js: Solo en JavaScript howtos: name: nombre easing curve: curva Bézier del easing js: !!code jQuery con ^jQuery Easing Plugin^ es la manera más sencilla de definir una animación con `easing`. Únicamente necesita ajustar el nombre `easing` al método `.animate` como tercer argumento o la key `easing`. scss: !!code Sass/SCSS le ayudan a definir la animación. Compass elimina los prefijos previos a las propiedades `transition` y `animation` y el plugin ^Compass Ceaser^ permite fijar el `easing` por su nombre (sin curvas Bézier). css: !!code Las propiedades CSS `transition` y `animation` le permiten fijar la función `easing`. css_bad: Desgraciadamente, no están todos soportados y deberá fijar la función con Bezier curve. css_help: Seleccione `easing` para mostrar su descripción en la curva Bézier. easing: all_easings: Todos los easings no_css: !!code Desgraciadamente, CSS no soporta este `easing`. Pero puede utilizarlo con JavaScript o con la propiedad CSS Animation `@keyframes`. edit: ^Editar^ en cubic-bezier.com. opensource: title: open source translate: ^Ayuda a traducir^ esta web a tu idioma ================================================ FILE: i18n/_nb.yml ================================================ title: Easing Functions Referanser description: Easing-funksjonen bestemmer hurtigheten på en animasjon over tid, for å gjøre den mer realistisk. Et ekte objekt begynner ikke bevegelsen umiddelbart med konstant fart. Denne siden vil hjelpe deg med å velge riktig easing-funksjon. about: !!format ~Easing-funksjonen~ bestemmer hurtigheten på en animasjon over tid for å gjøre den mer realisitisk. Når vi åpner en skuff, gir vi den først akselerasjon, og så senker vi farten. Når noe faller, vil det gå fortere og fortere, og så spretter det tilbake etter at det har truffet bakken. Denne siden vil hjelpe deg med å velge riktig easing-funksjon. easings: css: Tilgjengelig overalt js: Kun i JavaScript howtos: name: easing-navn curve: easing’s Bezier kurve js: !!code jQuery med ^jQuery Easing Plugin^ er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller `easing` key. scss: !!code Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før `transition` og `animation` property'ene, og ^Compass Ceaser^ plugin tillater å sette easings etter navn (uten Bezier curves). css: !!code CSS property-ene `transition` og `animation` setter easing-funksjon. css_bad: Dessverre støttes ikke alle easing-funksjonene, så du må sette funksjonene ved hjelp av en Bezier-kurve med bestemte parametere. css_help: Velg easing-funksjon for å se hvordan den kan beskrives som Bezier-kurve. easing: all_easings: Alle easing-funksjoner no_css: !!code Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation `@keyframes`. edit: ^Rediger^ på cubic-bezier.com. opensource: title: åpen kildekode translate: ^Hjelp til med oversetting^ av siden ================================================ FILE: i18n/_pt.yml ================================================ title: Guia de funções de atenuação description: Faça animações mais realistas utilizando a função de atenuação mais apropriada. share: As funções de atenuação usam a velocidade da animação de modo a tornar o movimento mais natural. Os objectos na vida real não se movem a uma velocidade constance, e não começam e param num instante. Esta página ajudá-lo-á a escolher a melhor função de atenuação. about: !!format ~Funções de atenuação~ especificam a variação de um parâmetro ao longo do tempo. Os objectos na vida real não começam e param instantaneamente, e quase nunca se movem a uma velocidade constante. Quando abrimos uma gaveta, começamos com um movimento rápido, e vamos abrandando à medida que vamos abrindo. Quando deixamos cair algo, o objecto inicialmente acelera durante a queda, e depois resalta ao atingir o chão. Esta página ajudá-lo-á a escolher a melhor função de atenuação. easings: css: Amplamente disponíveis js: Apenas em JavaScript howtos: name: nome da função de atenuação curve: curva de Bezier js: !!code jQuery com o ^jQuery Easing Plugin^ é fácil de descrever a animação com atenuação. Passamos o nome da função (por exemplo `easeInCirc`) para a função `.animate()` como o terceiro argumento, ou usando como o valor da opção `easing`. scss: !!code Sass/SCSS também podem descrever animações! O Compass remove prefixos antes das propriedades `transition` e `animation`, e o plugin ^Compass Ceaser^ permite passar o nome da função de atenuação (sem especificar exactamente as curvas de Bezier). css: !!code As propriedade CSS `transition` e `animation` permitem escolher a função de atenuação. css_bad: Infelizmente, não suportam todas as transições e terá que especificar a função de atenuação desejada (como uma curva Bezier). css_help: Escolha uma função de atenuação para mostrar a notação da curva de Bezier. easing: all_easings: Todas as atenuações no_css: !!code Não é suportado em CSS. Mas pode usar em JS ou descreva-a com animações `@keyframes` em CSS. edit: ^Editar^ em cubic-bezier.com. opensource: title: open source translate: ^Ajude a traduzir^ para o seu idioma ================================================ FILE: i18n/_sk.yml ================================================ title: Ťahák na easing funkcie description: Tvorte realistickejšie animácie použitím správnych easing funkcií. share: Easing funkcie určujú rýchlosť animácie aby pohyb vyzeral prirodzenejšie. Reálne objekty sa nepohybujú konštantnou rýchlosťou a ich počiatok a koniec je postupný. Táto stránka vám pomôže vybrať správnu easing funkciu. about: !!format ~Easing funkcie~ určujú rýchlosť zmeny parametru v priebehu času. Reálne objekty sa nepohybujú konštantnou rýchlosťou a ich počiatok a koniec je postupný. Keď otvárame šuflík, z počiatku ho otvárame rýchlo a postupne spomaľujeme. Keď predmet padne na zem, najprv zrýchľuje a po dopade začne skákať. Táto stránka vám pomôže vybrať správnu easing funkciu, ktorá najlepšie zodpovedá realite. easings: css: Dostupné v CSS aj JS js: Len v JavaScripte howtos: name: názov easing funkcie curve: Beziérova krivka funkcie js: !!code jQuery s ^jQuery Easing Pluginom^ je najľahší spôsob ako definovať animáciu s easing funkciou. Stačí určiť názov easing funkcie (napr. `easeInCirc`) ako tretí parameter funkcie `.animate()` alebo ho použiť ako hodnotu pre parameter `easing`. scss: !!code Ak popri Sass/SCSS používate aj Compass, nebudete sklamaný. Stačí použiť ^Compass Ceaser^ plugin a ten vám dovolí pre `transition` a `animation` používať len názov easing funkcií namiesto určovania konkretnej Beziérovej krivky. css: !!code CSS vlastnosti `transition` a `animation` vám dovoľujú použiť easing funkcie. css_bad: Bohužiaľ, podporujú len základné easing funkcie a tak niektoré musíte špecifikovať pomocou Beziérovej krivky danej easing funkcie. css_help: Po kliku na vybranú easing funkciu sa zobrazí jej Beziérova krivka. easing: all_easings: Všetky easing funkcie no_css: !!code Nepodporované v CSS. Ale môžete ju použiť v JS alebo si ju napísať pomocou CSS Animation `@keyframes`. edit: ^Upraviť^ na cubic-bezier.com. opensource: title: open source translate: ^Pomôžte preložiť^ stránku do vášho jazyka ================================================ FILE: i18n/_sr-latn.yml ================================================ title: Puškica za izing (easing) funkcije description: Načinite animaciju realističnijom tako što ćete izabrati pravu izing funkciju. share: Izing (easing) funkcije određuju stopu promene parametra tokom vremena, čineći kretanje realističnije jer objekti u stvarnom životu ne započinju kretanje i ne zaustavljaju se trenutačno. Ova stranica vam pomaže da izaberete pravu izing funkciju. font: 400,700&subset=latin,cyrillic about: !!format ~Izing (easing) funkcije~ određuju stopu promene parametra tokom vremena. Objekti u stvarnom životu ne započinju kretanje i ne zaustavljaju se trenutačno, i gotovo nikada se ne kreću konstantnom brzinom. Kada otvorimo ladicu, najpre je pomerimo brzo, a usporimo dok izlazi napolje. Ispustite nešto na pod, i ono će prvo da ubrzava na dole, a zatim da se odbije nazad nakon udaranja u pod. Ova stranica vam pomaže da izaberete pravu izing funkciju. easings: css: Dostupno svuda js: Samo u JavaScript-u howtos: name: ime izinga curve: Bezijer kriva izing funkcije js: !!code jQuery sa ^jQuery Easing Plugin^-om je najlakši način da se opiše animacija sa izingom. Unesite izing ime (kao što je `easeInCirc`) u `.animate()` funkciju kao treći argument ili upotrebite kao vrednost opcije `easing`. scss: !!code Sass/SCSS može takođe da opiše animacije! Compass uklanja prefikse pre `transition` i `animation` svojstva, a ^Compass Ceaser^ plugin vam dozvoljava da predate izing funkciju zadatu sa imenom (bez preciziranja tačnih Bezijerovih kriva). css: !!code CSS svojstva `transition` i `animation` dozvoljavaju da izaberete izing funkciju. css_bad: Nažalost, ova svojstva ne podržavaju sve izinge i morate da precizirate željenu izing funkciju sami (kao Bezijerovu krivu). css_help: Izaberite izing funkciju da biste prikazali njenu notaciju kao Bezijerove krive. easing: all_easings: Sve funkcije no_css: !!code Nažalost, ovakvu izing funkciju nije moguće odrediti u CSS. Koristite JavaScript ili specijalni `@keyframes` u CSS Animation. edit: ^Uredite^ na cubic-bezier.com. opensource: title: open source translate: ^Pomozite da prevedete^ stranicu na vaš jezik author: Andrej Sitnik ================================================ FILE: i18n/am.yml ================================================ version: 2 lang_code: am lang_name: አማርኛ rtl: false title: Easing Functions አጋዥ description: ትክክለኛውን easing function በመምረጥ አኒሜሽኖችን የበለጠ እውነታዊ ያድርጉ። share: Easing functions የአኒሜሽን እንቅስቃሴን የበለጠ ተፈጥሯዊ ለማስመሰል ይጠቅማሉ። እውነተኛ ነገሮች በቋሚ ፍጥነት ብቻ የሚንቀሳቀሱ አይደሉም፣ እናም በቅጽበት ጀምረው በቅጽበት የሚይቆሙ አይደሉም። ይህ ገጽ ትክክለኛውን easing function መምረጥ ያግዝዎታል። about: __format ~~Easing functions~~ በጊዜ ሂደት የአንድ parameter የለውጥ መጠንን ይገልጻሉ። እውነተኛ ነገሮች በቅጽበት ጀምረው በቅጽበት የሚይቆሙ አይደሉም፣ እናም በቋሚ ፍጥነት በጭራሽ አይንቀሳቀሱም። የልብስ መሳቢያን ስንከፍት መጀመሪያ በፍጥነት እናንቀሳቅሰዋለን፣ በመውጣት ላይ አያለ ግን ፍጥነቱን አንቀንሰዋለን። አንድ ነገር ወደ መሬት ስንጥል በመጀመሪያ ወደታች በፍጥነት ይወርዳል፣ ወለሉን ከነካ በኋላ ግን ነጥሮ ይመለሳል። ይህ ገጽ ትክክለኛውን easing function መምረጥ ያግዝዎታል። howtos: css: text: CSS ላይ transition እና animation የሚባሉት ንብረቶች easing function ለመግለጽ ያግዛሉ። edit: ^cubic-bezier.com^ ላይ ያስተካክሉ። with_animation: ይህ ተግባር CSS ላይ በ{{@keyframes}} መከናወን ይችላል። example_size: መጠን example_position: ቦታ example_opacity: ግልፅነት postcss: text: በPostCSS የeasing function ተግባርን መግለፅ በጣም ቀላል ነው። የtransition መረጃ ከ^cubic-bezier.com^ የሚወስድ ^postcss-easings^ የሚባል plugin አለ። explanation: ይህ መግለጫ ከላይ ወደተገለጸው ተቀይሯል። disabled: እንደ አለመታደል ሆኖ easing function በማንኛውም የPostCSS plugin ማዘጋጀት አይቻልም። በ{{@keyframes}} ሊከናወን ይችላል፣ ከላይ ይመልከቱ። gradient: name: ግሬዲየንት text: ^postcss-easing-gradients^ በመጠቀም ግሬዲየንት መሳል ይቻላል። mathfunction: name: Math function text: ከዚህ በታች ይህ easing function በTypeScript ተጽፎ ያገኛሉ። x የአኒሜሽኑን absolute progress(ግስጋሴ) በ0 (የአኒሜሽኑ መጀመሪያ) እና በ1 (የአኒሜሽኑ መጨረሻ) ይወክላል። easing: all_easings: ሁሉም easings check: የeasing ለውጦች ይመልከቱ check_size: መጠኖች check_position: ቦታዎች check_opacity: ግልጽነቶች current_func: This function linear_func: Linear function load: በመጫን ላይ... opensource: title: Open Source translate: ይህን ድህረ ገጽ ወደ ቋንቋዎት መተርጎም ያግዙን authors: sitnik: Andrey Sitnik separator: እና solovev: Ivan Solovev theme: auto: Auto theme light: Light theme dark: Dark theme ================================================ FILE: i18n/ar.yml ================================================ version: 2 lang_code: ar lang_name: العربية rtl: true title: ورقة غش للـEasing Functions description: إجعل الحركة أكثر واقعية باختيار ال easing function المناسبة. share: تحدد ال Easing functions سرعة الحركات (animations) لجعل حركتها أكثر واقعية. ففي الواقع، لا تتحرك الأشياء بسرعة ثابتة، و حركتها لا تبدأ أو تنهي لحظياً. هذه الصفحة تساعدك على إختيار ال easing function المناسبة. about: __format ~~Easing functions~~ هي دوال تحدد معدل تغيير خاصية أو قيمة مع الزمن. الأشياء في الواقع لا تيدأ أو توقف حركتها فجأة، وغالبا لا تتحرك بسرعة ثابتة. عندما نفتح درجاً، فإننا نحركه بسرعة في البداية، ثم ننقص السرعة أثناء خروجه. أسقط شيئا وستراه يتسارع للأسفل، ثم يرتد للأعلى بعد اصطدامه بالأرض. هذه الصفحة تساعدك على إختيار ال easing function المناسبة. howtos: css: text: في CSS، خصائص ال transition وال animation تسمح لك بتحديد ال easing function. edit: جربها على ^cubic-bezier.com^. with_animation: في CSS، يمكن التعبير عن هذه الدالة بإستعمال {{@keyframes}} example_size: الحجم example_position: الموضع example_opacity: الشفافية postcss: text: في PostCSS، التعبير عن هذه الدالة بشكل أسهل بكثير. هناك إضافة ^postcss-easings^ التي تستعمل معلومات ال transition من هذا الموقع. explanation: يتم تحويل هذا التعبير إلى تعبير CSS المذكور أعلاه disabled: للأسف، لا يمكن استعمال هذه الدالة عن طريق إضافة ل PostCSS. لكن بمكن التعبير عنها عن طريق {{@keyframes}}, أنظر أعلاه. gradient: name: Gradient text: يمكن رسم gradient بإستخدام ^postcss-easing-gradients^. mathfunction: name: دالة رياضية text: بالأسفل يمكنك رؤية كود هذه الدالة بلغة TypeScript. المتغير x يمثل تقدم الحركة بين 0 (بداية الحركة) و 1 (نهاية الحركة). easing: all_easings: كل ال easings check: جرب ال easing من أجل تغيرات check_size: الحجم check_position: الموضع check_opacity: الشفافية current_func: هذه الدالة linear_func: الدالة الخطية load: تحميل... opensource: title: مفتوح المصدر translate: ساهم بترجمة هذه الصفحة للغتك authors: sitnik: Andrey Sitnik separator: و solovev: Ivan Solovev theme: auto: مظهر تلقائي light: مظهر فاتح dark: مظهر داكن ================================================ FILE: i18n/bn.yml ================================================ version: 2 lang_code: bn lang_name: বাংলা rtl: false title: ইজিং ফাংশনের চিট শিট description: সঠিক ইজিং ফাংশনটি বেছে নিয়ে অ্যানিমেশনগুলিকে আরও বাস্তবসম্মত করে তুলুন। share: ইজিং ফাংশনেরা স্বাভাবিক চলাচলের জন্য এনিমেশনের স্পিড নির্ধারণ করে। সাধারণ জীবনের বস্তুগুলো ধ্রুব গতিতে চলাফেরা করে না, এমনকি মুহূর্তের মধ্যে চলা শুরু বা শেষ করে না। এই পেজটি আপনাকে সঠিক ইজিং ফাংশন বাছাই করতে সাহায্য করবে। about: __format ~~ইজিং ফাংশন~~ সময়ের সাথে সাথে একটি প্যারামিটারের পরিবর্তনের হার নির্দিষ্ট করে বাস্তব জীবনের বস্তুগুলো কখনোই চলাচল শুরু বা শেষ মুহূর্তের মধ্যেই শেষ করে না, এবং কখনোই ধ্রুব গতিতে চলে না। যখন আমরা একটি ড্রয়ার খুলি, আমরা প্রথমে এটি দ্রুত টেনে নিই, এবং যখন এটি বেরিয়ে আসে তখন এটির গতি কমিয়ে দেই। মেঝেতে কিছু একটা ফেলে দিলে সেটা প্রথমে নিচের দিকে বেগ পাবে, এবং তারপর মেঝেতে আঘাত করার পর আবার উপরে উঠে আসবে। এই পেজটি আপনাকে সঠিক ইজিং ফাংশন বাছাই করতে সাহায্য করবে। howtos: css: text: CSS এ, transition এবং animation প্রোপার্টিগুলো আপনাকে একটি ইজিং ফাংশন নির্ধারণ করতে দেয়। edit: এডিট করুন ^cubic-bezier.com^ এ. with_animation: CSS এ, এই ফাংশনটি ব্যাবহার করা যাবে {{@keyframes}} ইমপ্লিমেন্ট করর মাধ্যমে example_size: আকার example_position: অবস্থান example_opacity: স্বচ্ছতা postcss: text: PostCSS এ ইজিং ফাংশনটি বর্ণনা করা অনেক সহজ।. ^postcss-easings^ নামে একটি প্লাগইন আছে যা সেই সাইট থেকে ট্রানজিশনের তথ্য নেয়। explanation: সেই ঘোষণাটি উপরে বর্ণিত বর্ণনায় রূপান্তরিত হয়েছে। disabled: দুর্ভাগ্যবশত, কোনও PostCSS প্লাগইন দিয়ে ইজিং ফাংশন সেট করা যাবে না। এটা করা যাবে {{@keyframes}} এর মাধ্যমে, উপরে দেখুন gradient: name: গ্রেডিয়েন্ট text: ^postcss-easing-gradients^ ব্যবহার করে একটি গ্রেডিয়েন্ট আঁকা সম্ভব। mathfunction: name: গাণিতিক ফাংশন text: নিচে আপনি টাইপস্ক্রিপ্টে লেখা এই ইজিং ফাংশনের কোড দেখতে পাবেন। চলক x অ্যানিমেশনের পরম অগ্রগতিকে প্রতিনিধিত্ব করে 0 (অ্যানিমেশনের শুরু) এবং 1 (অ্যানিমেশনের শেষ) এর সীমানায়। easing: all_easings: সব ইজিং check: পরিবর্তনের জন্য ইজিং চেক করুন check_size: আকার check_position: অবস্থান check_opacity: স্বচ্ছতা current_func: This ফাংশন linear_func: রৈখিক ফাংশন load: লোড হচ্ছে... opensource: title: ওপেন সোর্স translate: আপনার ভাষায় সাইটটি অনুবাদ করতে সাহায্য করুন authors: sitnik: Andrey Sitnik separator: এবং solovev: Ivan Solovev theme: auto: অটো থিম light: লাইট থিম dark: ডার্ক থিম ================================================ FILE: i18n/de.yml ================================================ version: 2 lang_code: de lang_name: Deutsch rtl: false title: Cheat Sheet für Easing-Funktionen description: Finde passende Übergangsfunktionen (easing functions) und erstelle realistischere Animationen. share: Übergangsfunktionen (engl. easing functions) bestimmen den Geschwindigkeitsverlauf einer Animation, um diese natürlicher wirken zu lassen. Denn reale Gegenstände bewegen sich selten ruckartig oder mit konstanter Geschwindigkeit. Diese Seite hilft Dir, die passende Übergangsfunktionen zu finden. about: __format ~~Übergangsfunktionen~~ (engl. easing functions) bestimmen die Änderungsrate eines Parameters im Verlauf der Zeit. Gegenstände in der Realität bewegen sich selten ruckartig oder mit konstanter Geschwindigkeit. Öffnen wir eine Schublade, dann ziehen wir erst stark und bremsen diese Bewegung dann ab. Lassen wir einen Ball fallen, wird er zunächst zum Boden hin beschleunigen, um dann vom Boden abzuspringen. Diese Seite hilft Dir, passende Übergangsfunktionen zu finden. howtos: css: text: In CSS können Übergangfunktionen in den 'transition'- und 'animation'-Properties eingestellt werden. edit: Auf ^cubic-bezier.com^ bearbeiten. with_animation: In CSS kann diese Funktion via {{@keyframes}} implementiert werden example_size: Größe example_position: Position example_opacity: Transparenz postcss: text: In PostCSS lässt sich diese Übergangsfunktion weitaus einfacher nutzen. Das Plugin ^postcss-easings^ nutzt die Definitionen der Übergangsfunktionen dieser Seite. explanation: Diese Deklaration wird später in die oben gezeigte umgewandelt. disabled: Diese Funktion kann leider mit keinem PostCSS-Plugin gesetzt werden. Die Verwending von {{@keyframes}} ist jedoch möglich. Siehe oben. gradient: name: Gradient text: Mit ^postcss-easing-gradients^ ist es möglich, Gradienten darzustellen. mathfunction: name: Berechnungsfunktion text: Untenstehend ist eine Beispielimplementierung dieser Übergangsfunktion in TypeScript dargestellt. Die Variable x repräsentiert den Fortschritt des Übergangs in den Grenzen von 0 (Start des Übergangs) bis 1 (Ende des Übergangs). easing: all_easings: Alle Übergangsfunktionen check: Animation mit dieser Funktion vergleichen für check_size: Größe check_position: Position check_opacity: Transparenz current_func: Diese Funktion linear_func: Lineare Funktion load: Lade... opensource: title: Open Source translate: Hilf dabei, diese Seite in Deine Sprache zu übersetzen authors: sitnik: Andrey Sitnik separator: und solovev: Ivan Solovev theme: auto: Automatisches Theme light: Helles Theme dark: Dunkles Theme ================================================ FILE: i18n/el-gr.yml ================================================ version: 2 lang_code: el-GR lang_name: Greek rtl: false title: Σκονάκι μεθόδων ομαλής μετάβασης (easing function) description: Κάντε τα κινούμενα εφέ (animations) πιο ρεαλιστικά επιλέγοντας την καταλληλότερη μέθοδο ομαλής μετάβασης. share: Οι μέθοδοι ομαλής μετάβασης υποδεικνύουν τον ρυθμό μεταβολής των κινουμένων εφέ ώστε να κάνουν τις αλλαγές να φαίνονται πιο φυσικές. Τα αντικείμενα στον φυσικό κόσμο δεν κινούνται με σταθερή ταχύτητα, και δεν ξεκινούν ή σταματούν αστραπιαία. Αυτή η σελίδα σας βοηθάει να διαλέξετε την καταλληλότερη μέθοδο ομαλής μετάβασης. about: __format Οι ~~μέθοδοι ομαλής μετάβασης~~ υποδεικνύουν τον ρυθμό μεταβολής μιας παραμέτρου με το πέρασμα του χρόνου. Τα αντικείμενα στον φυσικό κόσμο δεν ξεκινούν ή σταματούν αστραπιαία, και σχεδόν ποτέ κινούνται με σταθερή ταχύτητα. Όταν ανοίγουμε ένα συρτάρι, πρώτα το τραβάμε γρήγορα, και έπειτα επιβραδύνουμε καθώς βγαίνει. Αν ρίξουμε κάτι στο πάτωμα, πρώτα θα επιτυχαύνει κατά την πτώση, και μετά θα αναπηδήσει προς τα επάνω αφού συγκρουστεί με το πάτωμα. Αυτή η σελίδα σας βοηθάει να διαλέξετε την καταλληλότερη μέθοδο ομαλής μετάβασης (easing function). howtos: css: text: Στη CSS, οι ιδιότητες transition και animation σας επιτρέπουν να προσδιορίσετε μια μέθοδο ομαλής μετάβασης. edit: Επεξεργαστείτε στο ^cubic-bezier.com^. with_animation: Στη CSS, μπορείτε να χρημοποιήσετε αυτή τη μέθοδο εντός {{@keyframes}} example_size: Μέγεθος example_position: Θέση example_opacity: Διαφάνεια postcss: text: Στην PostCSS, είναι πιο εύκολο να περιγράψουμε τη μέθοδο ομαλής μετάβασης. Υπάρχει ένα πρόσθετο (plugin), ^postcss-easings^, το οποίο παίρνει πληροφορίες μετάβασης από εκείνον τον ιστότοπο. explanation: Η δήλωση αυτή μετατρέπεται σε αυτήν που περιγράφεται παραπάνω. disabled: Δυστυχώς, αυτή η μέθοδος ομαλής μετάβασης δεν μπορεί να εφαρμοστεί με το PostCSS πρόσθετο. Εναλλακτικά μπορείτε να χρησιμοποιήσετε τη μέθοδο {{@keyframes}}, βλέπε παραπάνω. gradient: name: Διαβάθμιση text: Είναι δυνατόν να ζωγγραφίσετε μια διαβάθμιση χρησιμοποιόντας το πρόσθετο ^postcss-easing-gradients^. mathfunction: name: Μαθηματική συνάρτηση text: Παρακάτω βλέπετε τον κώδικα αυτής της μεθόδου ομαλής μετάβασης γραμμένο σε TypeScript. Η μεταβλητή x αντιπροσωπεύει την (απόλυτη) πρόοδο του κινουμένου εφέ στο εύρος από το 0 (αρχή του εφέ) μέχρι το 1 (τέλος εφέ). easing: all_easings: Όλες οι μέθοδοι ομαλής μετάβασης check: Συγκρίνετε τις αλλαγές με/χωρίς μέθοδους ομαλής μετάβασης για check_size: Μέγεθος check_position: Θέση check_opacity: Διαφάνεια current_func: Αυτή η μέθοδος linear_func: Γραμμική μέθοδος load: Φορτώνει... opensource: title: Ανοιχτός Κώδικας translate: Βοηθήστε στη μετάφραση αυτής της ιστοσελίδας στη γλώσσα σας authors: sitnik: Andrey Sitnik separator: και solovev: Ivan Solovev theme: auto: Auto theme light: Light theme dark: Dark theme ================================================ FILE: i18n/en.yml ================================================ version: 2 lang_code: en lang_name: English rtl: false title: Easing Functions Cheat Sheet description: Make animations more realistic by picking the right easing function. share: Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function. about: __format ~~Easing functions~~ specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose the right easing function. howtos: css: text: In CSS, the transition and animation properties allow you to specify an easing function. edit: Edit on ^cubic-bezier.com^. with_animation: In CSS, this function can be implemented using {{@keyframes}} example_size: Size example_position: Position example_opacity: Transparency postcss: text: In PostCSS, the easing function is much easier to describe. There is a plugin ^postcss-easings^ that takes the transition information from that site. explanation: That declaration is converted to the one described above. disabled: Unfortunately, the easing function cannot be set with any PostCSS plugin. Can be done with {{@keyframes}}, see above. gradient: name: Gradient text: It is possible to draw a gradient using ^postcss-easing-gradients^. mathfunction: name: Math function text: Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation). easing: all_easings: All easings check: Check easing for changes check_size: Sizes check_position: Positions check_opacity: Transparencies current_func: This function linear_func: Linear function load: Loading... opensource: title: Open Source translate: Help translate site to your language authors: sitnik: Andrey Sitnik separator: and solovev: Ivan Solovev theme: auto: Auto theme light: Light theme dark: Dark theme ================================================ FILE: i18n/es-mx.yml ================================================ version: 2 lang_code: es-mx lang_name: Español rtl: false title: Acordeón de Funciones de Suavizado description: Hacer animaciones más realistas eligiendo la función de suavizado adecuada. share: Las functiones de suavizado especifican la velocidad de la animación para hacer el movimiento más natural. Los objetos reales solo no se mueven a una velocidad constante, y no arrancan y se detienen en un instante. Esta página te ayuda a elegir la función de suavizado correcta. about: __format ~~Las funciones de suavizado~~ especifican la razón de cambio de un parámetro sobre el tiempo. En la vida real, los objetos no se inician ni se detienen por sí solos instantáneamente, y casi nunca se mueven a una velocidad constante. Por ejemplo, cuando abrimos un cajón, el movimiento de jale o apertura se hace rápidamente al principio, y conforme dicho cajón sale, el movimiento se hace más despacio. También; si se deja caer un objeto al piso, este primero se acelera hacia abajo hasta golpear el piso y luego rebota de vuelta hacia arriba. Esta página te ayuda a elegir la función de suavizado correcta para usar en animaciones con CSS. howtos: css: text: En CSS, las propiedades 'transition' y 'animation' te permiten especificar una función de suavizado. edit: Editar en ^cubic-bezier.com^. with_animation: En CSS, esta función puede ser implementada usando {{@keyframes}} example_size: Tamaño example_position: Posición example_opacity: Transparencia postcss: text: En PostCSS, la función de suavizado es mucho más fácil de describir. Existe un plugin ^postcss-easings^ que toma la información de transición de ese sitio. explanation: Tal declaración es convertida a la que es descrita arriba. disabled: Desafortunadamente, la función de suavizado no puede ser establecida con ningún plugin PostCSS. Puede hacerse con {{@keyframes}}, ver arriba. gradient: name: Gradiente text: Es posible dibujar un degradado usando ^postcss-easing-gradients^. mathfunction: name: Función Matemática text: Abajo verás el código de esta función de suavizado escrito en TypeScript. La variable x representa el progreso absoluto de la animación en los límites de 0 (inicio de la animación) y 1 (fin de la animación). easing: all_easings: Todos los suavizados check: Comprobar suavizado por cambios check_size: de Tamaño check_position: Posiciones check_opacity: Transparencias current_func: Functión actual linear_func: Función linear load: Cargando... opensource: title: Open Source translate: Ayuda a traducir el sitio a tu idioma authors: sitnik: Andrey Sitnik separator: e solovev: Ivan Solovev theme: auto: Tema auto light: Tema claro dark: Tema oscuro ================================================ FILE: i18n/fa-ir.yml ================================================ version: 2 lang_code: fa-ir lang_name: فارسی rtl: true title: برگه تقلب توابع Easing description: با انتخاب تابع Easing درست انیمیشن‌های طبیعی‌تری بسازید. share: توابع Easing سرعت انیمیشن را مشخص می‌کنند تا حرکت طبیعی‌تری داشته باشند. در دنیای واقعی اشیا با سرعت ثابتی حرکت نمی‌کنند و حرکتشان در یک لحظه شروع و متوقف نمی‌شود.این صفحه به شما کمک می‌کند تا Easing مناسب را برای انیمیشن خود انتخاب کنید. about: __format ~~توابع Easing~~ نرخ تغییر یک پارامتر را در طی زمان تعیین می‌کنند حرکت اشیا در دنیای واقعی به طور ناگهانی شروع و متوقف نمی‌شود و تقریبا هیچگاه با سرعت ثابت حرکت نمی‌کنند. هنگامی که یک کشو را باز می‌کنیم، ابتدا آن را به سرعت حرکت می‌دهیم، و سپس همینطور که بیرون می‌آید سرعت آن را کمتر می‌کنیم. اگر جسمی را از ارتفاعی رها کنید، سرعت آن حین حرکت به سمت زمین افزایش پیدا می‌کند و پس از برخورد با زمین دوباره به بالا می‌جهد. این صفحه به شما کمک می‌کند تا تابع Easing مناسب را انتخاب کنید. howtos: css: text: در CSS، پراپرتی‌های transition و animation به شما اجازه می‌دهند تا یک تابع Easing را مشخص کنید. edit: در ^cubic-bezier.com^ ویرایش کنید. with_animation: در CSS می‌توانید این تابع را به کمک {{@keyframes}} پیاده سازی کنید. example_size: اندازه example_position: موقعیت example_opacity: شفافیت postcss: text: در PostCSS، توصیف تابع Easing بسیار آسان‌تر است. پلاگینی به نام ^postcss-easings^ وجود دارد که اطلاعات جا به جایی را از همان سایت دریافت می‌کند. explanation: اعلان بالا به تابع بالا تبدیل می‌شود. disabled: متاسفانه پلاگینی برای استفاده از این تابع Easing وجود ندارد. امکان پیاده سازی با استفاده از {{@keyframes}} وجود دارد. بالا را نگاه کنید. gradient: name: گرادینت text: امکان ترسیم گرادینت با استفاده از ^postcss-easing-gradients^ وجود دارد. mathfunction: name: تابع ریاضی text: در پایین کد این تابع Easing را به زبان TypeScript می‌بینید. متغیر x پیشرفت مطلق انیمیشن را نشان می‌دهد. دامنه متغیر x بین 0 (شروع انیمیشن) و 1 (پایان انیمیشن) است. easing: all_easings: همه Easingها check: این تابع Easing را برای تغییرات زیر بررسی کنید check_size: اندازه‌ها check_position: موقعیت‌ها check_opacity: شفافیت‌ها current_func: این تابع linear_func: تابع خطی load: در حال بارگذاری... opensource: title: منبع باز translate: کمک کنید این وبسایت به زبان شما ترجمه شود. authors: sitnik: Andrey Sitnik separator: و solovev: Ivan Solovev theme: auto: تم خودکار light: تم روشن dark: تم تاریک ================================================ FILE: i18n/fr.yml ================================================ version: 2 lang_code: fr lang_name: Français rtl: false title: Antisèche pour les courbes d'accélérations (easing functions) description: Faites des animations plus réalistes en utilisant les bonnes courbes d'accélérations. share: Les courbes d'accélérations (easing functions) décrivent la vitesse d'une animation pour rendre le mouvement plus naturel. Dans la vie, les objets ne se déplacent pas à une vitesse constante, tout comme ils ne s'arrêtent pas instantanément. Cette page vous aide à choisir les bonnes courbes d'accélérations. about: __format ~~Les courbes d'accélérations (easing functions)~~ décrivent la vitesse à laquelle un paramètre change en fonction du temps. Dans la vie, les objets ne se déplacent pas instantanément et ne bougent pratiquement jamais à vitesse constante. 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. Lorsque que nous faisons tomber quelque chose au sol, il va premièrement accélérer vers le sol puis rebondir. Cette page vous aide à choisir les bonnes courbes d'accélérations. howtos: css: text: En CSS, les propriétés de transition ou d'animation vous permettent de définir une courbe d'accélération. edit: Modifier sur ^cubic-bezier.com^. with_animation: En CSS, cette courbe peut être implémentée en utilisant les {{@keyframes}} example_size: Taille example_position: Position example_opacity: Transparence postcss: text: En PostCSS, la courbe d'accélération est bien plus simple à décrire. Il y a un plugin ^postcss-easings^ qui prend les informations de transition depuis ce site. explanation: Cette déclaration est convertie par celle décrite plus haut. disabled: Malheureusement, cette courbe d'accélération ne peut pas être définie avec tous les plugins PostCSS. Cela peut être réalisé avec les {{@keyframes}}, pour plus d'informations, regardez plus haut. gradient: name: Dégradé text: Il est possible de dessiner un dégradé en utilisant ^postcss-easing-gradients^. mathfunction: name: Fonction mathématique text: Vous voyez ci-dessous le code de cette fonction d'accélération écrit en TypeScript. La variable x représente la progression de l'animation dans une plage variant de 0 (début de l'animation) à 1 (fin de l'animation). easing: all_easings: Toutes les accélérations check: Testez cette fonction check_size: Taille check_position: Position check_opacity: Transparence current_func: Fonction sélectionnée linear_func: Fonction linéaire load: Chargement... opensource: title: Open Source translate: Aidez-nous à traduire ce site dans votre langue authors: sitnik: Andrey Sitnik separator: et solovev: Ivan Soloviev theme: auto: Thème par défaut light: Thème clair dark: Thème sombre ================================================ FILE: i18n/he.yml ================================================ version: 2 lang_code: he lang_name: עיברית rtl: true title: פונקציית הריכוך (Easing Functions) description: הפוך את האנימציה ליותר מציאותית על ידי בחירת פונקציית הריכוך הנכונה. share: פונקציית הריכוך (Easing Functions) קובע את מהירות של האנימציה, כך שהיא נראת יותר מציאותית באתר הזה ניתן לראות איך אמורה להיראות עקומה, כך שאובייקט יזוז יותר טבעי וכמה שיותר קרוב למציאות about: __format ~~ פונקציית הריכוך (Easing Functions)~~ קובעת את מהירות תזוזה באנימצייה דברים אמיתיים לא מתחילים לנוע באופן מיידי ובמהירות קבועה. כשפותחים מגירה, ראשית אנו מאיצים אותה ואז מאיטים. וכאשר הכדור נופל הוא מאיץ כל הזמן, ואחרי שפוגע ברצפה הוא קופץ מעט, עד שעוצר האתר הזה יעזור לך למצוא את הפונקצייה שמתאימה לך howtos: css: text: ב- CSS, מאפייני המעבר וההנפשה מאפשרים לך לציין פונקציית הקלה. edit: לערוך ב ^cubic-bezier.com^. with_animation: ב- CSS ניתן ליישם פונקציה זו עם {{@keyframes}} example_size: גודל example_position: עמדה example_opacity: שקיפות postcss: text: ב- PostCSS להישתמש בפונקצייה פשוט יותר. יש פלגין ^postcss-easings^, שלוקח מידע מהאתר הזה. explanation: הצהרה זו מומרת לזו שתוארה לעיל. disabled: למרבה הצער, לא ניתן להגדיר פונקציית החלקה זו באמצעות תוסף כלשהו PostCSS. ניתן לעשות זאת עם {{@keyframes}}. gradient: name: מדרון צבעים text: אפשר לצייר שיפוע עם ^postcss-easing-gradients^. mathfunction: name: פונקציית מתמטיקה text: להלן מופיע הקוד לפונקציית המעבר שנכתב TypeScript. משתנה X זו התקדמות של האנימציה, איפה ש 0 זה תחילת אנימציה ו 1 – זה סופה easing: all_easings: כל הפונקציות check: לבדוק את השינוי של האטה check_size: גודל check_position: מיקום check_opacity: שקיפות current_func: פונקציה נוככית linear_func: פונקציה לינארית load: טעינה... opensource: title: Open Source translate: Help translate site to your language authors: sitnik: Andrey Sitnik separator: and solovev: Ivan Solovev theme: auto: אוטומטי light: בצבע בהיר dark: צבע קהה ================================================ FILE: i18n/hi.yml ================================================ version: 2 lang_code: hi lang_name: हिन्दी rtl: false title: ईजिंग फंक्शन प्रवंचक पत्रक description: सही ईजिंग फंक्शन को चुनकर एनिमेशन को अधिक स्वाभाविक बनाएं। share: ईजिंग फंक्शन एनिमेशन की गति निर्दिष्ट करते हैं गति को और अधिक स्वाभाविक बनाने के लिए। वास्तविक वस्तुएं केवल स्थिर गति से नहीं चलती, और एक पल में शुरू और बंद नहीं होती। यह पेज आपको सही ईजिंग फंक्शन चुनने में मदद करता है। about: __format ~~ईजिंग फंक्शन~~ एक पैरामीटर के परिवर्तन की दर निर्दिष्ट करें अधिक समय तक। वास्तविक वस्तुएं एक पल में शुरू और बंद नहीं होती।, और स्थिर गति से नहीं चलती। जब हम एक दराज खोलते हैं, तो हम पहले उसे जल्दी से घुमाते हैं, और जैसे ही यह बाहर आता है इसे धीमा कर देते है। फर्श पर कुछ गिरा दो, और यह होगा पहले नीचे की ओर गति करेंगा, और फिर फर्श से टकराने के बाद वापस ऊपर की ओर उछालेंगा। यह पेज आपको सही ईजिंग फंक्शन चुनने में मदद करता है। howtos: css: text: CSS में, ट्रांज़िशन और ऐनिमेशन गुण आपको एक सहजता फ़ंक्शन निर्दिष्ट करने की अनुमति देते हैं। edit: संपादित करें ^cubic-bezier.com^. with_animation: CSS में, इस फ़ंक्शन का उपयोग करके कार्यान्वित किया जा सकता है {{@keyframes}} example_size: आकार example_position: स्थान example_opacity: पारदर्शिता postcss: text: PostCSS में, ईजिंग फंक्शन का वर्णन करना बहुत आसान है। एक प्लगइन ^postcss-easings^ है जो उस साइट से संक्रमण की जानकारी लेता है। explanation: उस घोषणा को ऊपर वर्णित एक में बदल दिया गया है। disabled: दुर्भाग्य से, ईज़िंग फ़ंक्शन को किसी भी PostCSS प्लगइन के साथ सेट नहीं किया जा सकता है। {{@keyframes}} के साथ किया जा सकता है, ऊपर देखें। gradient: name: ढाल text: का उपयोग करके एक ढाल खींचना संभव है ^postcss-easing-gradients^. mathfunction: name: गणित समारोह text: नीचे आप टाइपस्क्रिप्ट में लिखे इस ईजिंग फंक्शन का कोड देख सकते हैं। चर x एनीमेशन की पूर्ण प्रगति का प्रतिनिधित्व करता है 0 (एनीमेशन की शुरुआत) और 1 (एनीमेशन का अंत) की सीमा में। easing: all_easings: सभी ईजिंग check: परिवर्तनों के लिए ईजिंग की जाँच करें check_size: आकार check_position: स्थान check_opacity: पारदर्शिता current_func: यह फंक्शन linear_func: रैखिक फंक्शन load: लोड हो रहा है... opensource: title: ओपन सोर्स translate: साइट को अपनी भाषा में अनुवाद करने में सहायता करें authors: sitnik: एंड्री सिटनिक separator: और solovev: इवान सोलोवेव theme: auto: ऑटो थीम light: लाइट थीम dark: डार्क थीम ================================================ FILE: i18n/hu.yml ================================================ version: 2 lang_code: hu lang_name: Magyar rtl: false title: Átmeneti Függvények Gyűjteménye description: Animációk valósághűbbé tétele a megfelelő átmeneti függvénnyel (easing functions). share: Á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. A valós tárgyak sem csak állandó sebességgel mozognak, nem indulnak, nem állnak meg hirtelen. Ez az oldal segít a megfelelő átmeneti függvények kiválasztásában. about: __format ~~Átmeneti függvények (easing functions)~~ meghatározzák egy paraméter időbeli változásának mértékét. A valódi tárgyak sem csak állandó sebességgel mozognak, nem indulnak, nem állnak meg hirtelen, azonnal. 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. 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. Ez az oldal segít a megfelelő átmeneti függvény kiválasztásában. howtos: css: 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. edit: Szerkesztés a ^cubic-bezier.com^ oldalán. with_animation: CSS-ben az átmeneti függvények a {{@keyframes}} használatával érhetőek el example_size: Méret example_position: Pozíció example_opacity: Átlátszóság postcss: text: A PostCSS-ben az átmeneti függvényeket könnyebb használni, leírni. Ehhez létezik egy ^postcss-easings^ plugin, amely tartalmazza az átmeneti információkat erről az oldalról explanation: Ezt a meghatározást a PostCSS átalakítja a fent leírtakhoz disabled: Sajnos, ez az átmeneti függvény nem érhető el semmilyen PostCSS pluginban Az átmenet a {{@keyframes}} használatával elvégezhető, lásd fentebb gradient: name: Színátmenet text: Lehetőség van színátmenet létrehozására a ^postcss-easing-gradients^ segítségével. mathfunction: name: Math function text: Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation). easing: all_easings: Összes átmenet check: Átmenetek előnézete check_size: Méret check_position: Pozíció check_opacity: Átlátszóság current_func: Jelenlegi átmenet linear_func: Lineáris átmenet load: Betöltés... opensource: title: Nyílt forrású translate: Segíts lefordítani ezt az oldalt a saját nyelvedre authors: sitnik: Andrey Sitnik separator: és solovev: Ivan Solovev theme: auto: Automatikus téma light: Világos téma dark: Sötét téma ================================================ FILE: i18n/id.yml ================================================ version: 2 lang_code: id lang_name: Bahasa Indonesia rtl: false title: Contekan Fungsi Easing description: Jadikan animasi lebih realistis dengan memilih fungsi easing yang tepat. share: Fungsi easing digunakan untuk menentukan kecepatan animasi untuk menjadikan gerakan yang lebih alami. Benda nyata tidak bergerak pada kecepatan konstan, tidak bergerak dan tidak juga berhenti dalam sekejap. Halaman ini membantu anda memilih fungsi easing yang tepat. about: __format ~~Fungsi easing~~ menentukan laju perubahan sebuah parameter dari waktu ke waktu. Objek pada kehidupan nyata tidak bergerak dan berhenti dalam sekejap, dan hampir tidak pernah bergerak pada kecepatan konstan. Ketika kita membuka laci, pertama kita lakukan secara cepat lalu pelan setelah hampir keluar. Menjatuhkan benda ke lantai, pertama akan ke bawah kemudian memantul kembali. Halaman ini membantu anda memilih fungsi easing yang tepat. howtos: css: text: Di CSS, properti transisi dan animasi memungkinkan anda untuk memilih menentukan fungsi easing. edit: Ubah di ^cubic-bezier.com^. with_animation: Di CSS, fungsi ini dapat diimplementasikan dengan {{@keyframes}} example_size: Ukuran example_position: Posisi example_opacity: Transparansi postcss: text: Di PostCSS, fungsi easing ini lebih mudah digunakan. Terdapat plugin ^postcss-easings^ yang memudahkan untuk mengambil informasi tentang transisi dari website tersebut. explanation: Deklarasinya diubah menjadi seperti diatas ini. disabled: Sayangnya, fungsi easing ini tidak dapat digunakan dengan PostCSS plugin apapun. Tetapi dapat diselesaikan dengan {{@keyframes}}, lihat diatas. gradient: name: Gradien text: Memungkinkan untuk membuat gradien dengan menggunakan ^postcss-easing-gradients^. mathfunction: name: Fungsi matematika text: Dibawah ini kamu melihat kode untuk fungsi easing ini yang ditulis dengan TypeScript. Variabel x merepresentasikan proses animasi yang absolut diantara 0 (awal dari animasi) dan 1 (akhir dari animasi). easing: all_easings: Semua easings check: Cek perubahan easing check_size: Ukuran check_position: Posisi check_opacity: Transparansi current_func: Fungsi ini linear_func: Fungsi linear load: Memuat... opensource: title: Sumber Terbuka translate: Bantu terjemahkan situs ini ke bahasa anda. authors: sitnik: Andrey Sitnik separator: dan solovev: Ivan Solovev theme: auto: Tema otomatis light: Tema terang dark: Tema gelap ================================================ FILE: i18n/it.yml ================================================ version: 2 lang_code: it lang_name: Italiano rtl: false title: Guida alle Funzioni di Interpolazione description: Rendi le animazioni più realistiche scegliendo la corretta funzione di interpolazione. share: Le funzioni di interpolazione specificano la velocità di un'animazione rendendone il movimento più naturale. Nella vita reale un oggetto non inizia a muoversi istantaneamente e la sua velocità non rimane costante. Questa pagina ti aiuta a scegliere la corretta funzione di interpolazione. about: __format ~~Le funzioni di interpolazione~~ specificano il cambiamento di un parametro con il passare del tempo. Gli oggetti nella vita reale non si muovono istantaneamente, e non hanno quasi mai una velocità costante. Quando apriamo un cassetto, all'inizio lo spostiamo rapidamente ed andiamo rallentando alla fine. Fai cadere un oggetto e lo vedrai accelerare verso il basso, per poi rimbalzare all'impatto con il pavimento. Questa pagina ti aiuta a scegliere la giusta funzione di interpolazione. howtos: css: text: In CSS, le proprietà transition e animation ti permettono di specificare una funzione di interpolazione. edit: Modifica su ^cubic-bezier.com^. with_animation: In CSS, questa funzione può essere implementata utilizzando {{@keyframes}} example_size: Dimensione example_position: Posizione example_opacity: Trasparenza postcss: text: In PostCSS, una funzione di interpolazione è molto più facile da descrivere. Esiste un plugin ^postcss-easings^ che estrapola le informazioni di transizione dal sito stesso. explanation: La dichiarazione viene convertita in quella descritta sopra. disabled: Purtroppo, questa funzione di interpolazione non può essere impostata con alcun plugin PostCSS. Può essere implementata con {{@keyframes}}, vedi sopra. gradient: name: Gradiente text: È possibile tracciare un gradiente utilizzando ^postcss-easing-gradients^. mathfunction: name: Funzione matematica text: Sotto puoi vedere il codice di questa funzione di interpolazione, scritto in TypeScript. La variabile x rappresenta il progresso (assoluto) dell'animazione tra i valori 0 (inizio dell'animazione) e 1 (fine dell'animazione). easing: all_easings: Tutte le interpolazioni check: Visualizza interpolazione check_size: Dimensione check_position: Posizione check_opacity: Trasparenza current_func: Funzione selezionata linear_func: Funzione lineare load: Caricamento... opensource: title: Open Source translate: Aiutaci a tradurre il sito nella tua lingua authors: sitnik: Andrey Sitnik separator: e solovev: Ivan Solovev theme: auto: Tema automatico light: Tema chiaro dark: Tema scuro ================================================ FILE: i18n/ja.yml ================================================ version: 2 lang_code: ja lang_name: 日本語 rtl: false title: イージング関数チートシート description: 適切なイージング関数を選択して、アニメーションをよりリアルにします。 share: イージング関数はアニメーションの速度を指定して、動きをより自然にします。現実のオブジェクトは単に一定の速度で動かず、即座に動いたり止まったりしません。このページは、適切なイージング関数の選択に役立ちます。 about: __format ~~イージング関数~~は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。 howtos: css: text: CSSでは、transitionプロパティとanimationプロパティでイージング関数を指定できます。 edit: ^cubic-bezier.com^で編集できます。 with_animation: CSSでは、この関数は{{@keyframes}}を使用して実行できます。 example_size: サイズ example_position: 位置 example_opacity: 透明度 postcss: text: PostCSSは、イージング関数の記述がより簡単です。このサイトからtransition情報を取得するプラグイン^postcss-easings^があります。 explanation: その宣言は上記のものに変換されます。 disabled: 残念ながら、このイージング関数はPostCSSプラグインでは設定できません。{{@keyframes}}で実行できます。上記を参照してください。 gradient: name: グラデーション text: ^postcss-easing-gradients^を使用してグラデーションを描くことができます。 mathfunction: name: 数学関数 text: 以下に、TypeScriptで書かれたイージング関数のコードを示します。変数xはアニメーションの絶対的な進行度を0（アニメーションの開始）と1（アニメーションの終了）の範囲で表します。 easing: all_easings: すべてのイージング check: イージングの確認 check_size: サイズ check_position: 位置 check_opacity: 透明度 current_func: 現在の関数 linear_func: 線形関数 load: 読み込み中です... opensource: title: オープンソース translate: サイトの翻訳にご協力ください authors: sitnik: Andrey Sitnik separator: と solovev: Ivan Solovev theme: auto: 自動 light: ライトモード dark: ダークモード ================================================ FILE: i18n/ko.yml ================================================ version: 2 lang_code: ko lang_name: 한국어 rtl: false title: Easing 함수 치트 시트 description: 적절한 easing 함수를 선택해 좀 더 자연스러운 애니메이션을 만들어보세요. share: 실제 사물들은 일정한 속도로 이동하지 않고, 즉시 시작하거나 즉시 멈추지도 않습니다. Easing 함수는 실제 사물들 같이, 이동 속도를 지정하여 움직임을 좀 더 자연스럽도록 만듭니다. 이 페이지에서는 여러분이 알맞은 easing 함수를 고를 수 있도록 도와드립니다. about: __format ~~Easing 함수~~는 시간 흐름에 따른 매개변수의 변화율을 지정합니다. 대부분의 실제 사물들은 일정한 속도로 이동하지 않고, 즉시 시작하거나 즉시 멈추지도 않습니다. 서랍을 예로 들자면, 처음에는 빠르게 열다가 거의 다 열었을 때쯤에는 천천히 엽니다. 사물을 바닥에 떨어트렸을 때는 사물이 아래로 가속하다 사물이 바닥을 쳤을 때 튕겨 올라옵니다. 이 페이지에서는 여러분이 알맞은 easing 함수를 고를 수 있도록 도와드립니다. howtos: css: text: CSS에서는 transition 속성과 animation 속성을 사용하여 easing 함수를 지정할 수 있습니다. edit: 이 함수를 ^cubic-bezier.com^에서 수정해 볼 수 있습니다. with_animation: CSS에서, 이 함수는 {{@keyframes}}를 사용하여 구현할 수 있습니다. example_size: 크기 example_position: 위치 example_opacity: 불투명도 postcss: text: PostCSS의 easing 함수는 이 사이트에서 transition 정보를 가져오는 ^postcss-easings^라는 플러그인이 있어 구현하기 간편합니다. explanation: 이 PostCSS 구현은 컴파일 시 CSS로 구현된 코드로 변환됩니다. disabled: 아쉽게도 현재 함수는 PostCSS로 지정할 수 없습니다. 대신, {{@keyframes}}로 구현할 수 있으니 위를 확인해보세요. gradient: name: 그라디언트 text: ^postcss-easing-gradients^를 사용하여 그라디언트를 그릴 수 있습니다. mathfunction: name: 수학 함수 text: 아래에 있는 코드는 TypeScript로 작성된 Easing 함수입니다. 변수 x는 0 (움직임의 시작)에서 1 (움직임의 끝) 사이의 움직임 진척도입니다. easing: all_easings: 목록 check: easing 비교 check_size: 크기 check_position: 위치 check_opacity: 불투명도 current_func: 현재 함수 linear_func: 선형 함수 load: 로딩 중... opensource: title: Open Source translate: 사이트 번역을 도와주세요. authors: sitnik: Andrey Sitnik separator: 및 solovev: Ivan Solovev theme: auto: 자동 테마 선택 light: 라이트 테마 dark: 다크 테마 ================================================ FILE: i18n/lb.yml ================================================ version: 2 lang_code: lb lang_name: Lëtzebuergesch rtl: false title: Cheat Sheet fir Easing-Funktiounen description: Maacht Animatioune méi realistesch andeems Dir déi richteg Iwwergangsfunktioun (easing function) wielt. share: Iwwergangsfunktiounen (engl. easing functions) bestëmmen de Geschwindegkeetsverlaf vun enger Animatioun fir se méi natierlech ze maachen. Well real Objete beweegen sech selte ruckelzeg oder mat enger konstanter Geschwindegkeet. Dës Säit hëlleft Iech déi richteg Iwwergangsfunktiounen ze fannen. about: __format ~~Iwwergangsfunktiounen~~ (engl. easing functions) bestëmmen den Taux vun der Ännerung vun engem Parameter iwwer Zäit. An der Realitéit beweegen sech Objete seele ruckelzeg oder mat enger konstanter Geschwindegkeet. Wann mir een Tirang opmaachen, dann zeien mir fir d'éischt staark a bremsen eis Beweegung dann of. Loosse mir ee Ball falen, da beschleunegt dee fir d'éischt a Richtung Buedem fir da vum Buedem ofzesprangen. Des Säit hëlleft Dir, eng passend Iwwergangsfunktioun ze fannen. howtos: css: text: An CSS kënnen Iwwergangsfunktiounen an den 'transition' an 'animation' Eegenschafte benotzt ginn. edit: Op ^cubic-bezier.com^ beaarbechten. with_animation: An CSS kann des Funktioun via {{@keyframes}} implementéiert ginn. example_size: Gréisst example_position: Positioun example_opacity: Transparenz postcss: text: An PostCSS léisst sech des Iwwergangsfunktioun vill mei einfach notzen. De Plugin ^postcss-easings^ notzt d'Definitioun fir d'Iwwergangsfunktioun vun dëser Säit. explanation: Dës Deklaratioun gëtt spéider an déi uewe gewisen ëmgewandelt. disabled: Leider kann dës Funktioun mat kengem PostCSS Plugin agestallt ginn. D'Verwendung vun {{@keyframes}} , wei uewe gewisen, ass awer méiglech. gradient: name: Gradient text: Mat ^postcss-easing-gradients^ ass et méiglech Gradienten duerzestellen. mathfunction: name: Berechnungsfunktioun text: Hei ënne gesitt Dir de Code vun dëser Iwwergangsfunktioun am TypeScript geschriwwen. D'Variabel x representéiert den absolutte Fortschrëtt vun der Animatioun an de Grenze vun 0 (Ufank vun der Animatioun) an 1 (Enn vun der Animatioun). easing: all_easings: All Iwwergangsfunktiounen check: Animatioun mat dëser Funktioun vergläiche fir check_size: Gréisst check_position: Positioun check_opacity: Transparenz current_func: Des Funktioun linear_func: Linear Funktioun load: Um Lueden... opensource: title: Open Source translate: Hëlleft dobäi dëse Site op Är Sprooch ze iwwersetzen authors: sitnik: Andrey Sitnik separator: an solovev: Ivan Solovev theme: auto: Automatescht Theme light: Hellt Theme dark: Däischtert Theme ================================================ FILE: i18n/ml.yml ================================================ version: 2 lang_code: ml lang_name: Malayalam rtl: false title: ഈസിങ് ഫങ്ക്ഷൻസ് ചീറ്റ് ഷീറ്റ് description: ശരിയായ ഈസിങ് ഫങ്ക്ഷൻ തിരഞ്ഞെടുത്ത് ആനിമേഷനുകൾ കൂടുതൽ സ്വാഭാവികം ആക്കാം. share: ഈസിങ് ഫങ്ക്ഷൻസ് ആനിമേഷന്റെ വേഗത ക്രമീകരിച് ചലനം കൂടുതൽ സ്വാഭാവികമാക്കുന്നു. യഥാർത്ഥ വസ്‌തുക്കൾ ഒരേ വേഗതയിൽ ചലിക്കുകയോ ഒരേ സമയം ചലനം തുടങ്ങി തീരുകയോ ചെയ്യുന്നില്ല. ശരിയായ ഈസിങ് ഫങ്ക്ഷൻ തിരഞ്ഞെടുക്കാൻ ഈ പേജ് നിങ്ങളെ സഹായിക്കുന്നു. about: __format ~~ഈസിങ് ഫങ്ക്ഷൻസ്~~ ഒരു ഘടകത്തിൻ്റെ (പാരാമീറ്ററിന്റെ) മാറ്റത്തിന്റെ നിരക്ക് വ്യക്തമാക്കുന്നു. യഥാർത്ഥ ജീവിതത്തിലെ വസ്തുക്കൾ ഒരേ സമയം ചലനം തുടങ്ങി തീരുകയോ, മിക്കവാറും ഒരിക്കലും സ്ഥിരമായ വേഗതയിൽ ചലിക്കുകയോ ചെയ്യുന്നില്ല. നമ്മൾ ഒരു ഡ്രോയർ തുറക്കുമ്പോൾ, ആദ്യം അത് വേഗത്തിൽ നീക്കുന്നു, അത് പുറത്തുവരുമ്പോൾ വേഗത കുറയുന്നു. തറയിലേക്ക് എന്തെങ്കിലും ഇട്ടാൽ അത് ആദ്യം താഴേക്ക് ദ്രുതഗതിയിൽ നീങ്ങുകയും, തുടർന്ന് തറയിൽ തട്ടിയ ശേഷം തിരികെ പൊന്തുകയും ചെയ്യും. ശരിയായ ഈസിങ് ഫങ്ക്ഷൻ തിരഞ്ഞെടുക്കാൻ ഈ പേജ് നിങ്ങളെ സഹായിക്കുന്നു. howtos: css: text: സി‌എസ്‌എസിൽ‌, ട്രാന്സിഷൻ, ആനിമേഷൻ‌ എന്നീ ഘടകങ്ങൾ ഈസിങ് ഫങ്ക്ഷൻസ് നിര്‍ദ്ദേശിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു. edit: ^cubic-bezier.com^ ഇൽ എഡിറ്റുചെയ്യുക. with_animation: സി‌എസ്‌എസിൽ, ഈ ഫങ്ക്ഷൻ {{@keyframes}} ഉപയോഗിച് ചെയ്യാം. example_size: വലുപ്പം example_position: സ്ഥാനം example_opacity: സുതാര്യത postcss: text: PostCSS- ൽ, ഈസിങ് ഫങ്ക്ഷൻസ് വിവരിക്കാൻ വളരെ എളുപ്പമാണ്. ആ സൈറ്റിൽ നിന്ന് ട്രാന്സിഷൻ വിവരങ്ങൾ എടുക്കുന്ന ഒരു പ്ലഗിൻ ^postcss-easings^ ഉണ്ട്. explanation: അത് മുകളിൽ വിവരിച്ചതിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു. disabled: നിർഭാഗ്യവശാൽ, ഏതെങ്കിലും പോസ്റ്റ് സി‌എസ്‌എസ് പ്ലഗിൻ ഉപയോഗിച്ച് ഈസിങ് ഫങ്ക്ഷൻ സജ്ജമാക്കാൻ കഴിയില്ല. പക്ഷേ {{@keyframes}} ഉപയോഗിച് ചെയ്യാം, മുകളിൽ കാണുക. gradient: name: ഗ്രീഡിയൻറ്റ് text: ^postcss-easing-gradients^ ഉപയോഗിച്ച് ഒരു ഗ്രേഡിയന്റ് വരയ്ക്കാൻ കഴിയും. mathfunction: name: മാത്ത് ഫങ്ങ്ഷൻ text: ടൈപ്പ്സ്ക്രിപ്റ്റിൽ എഴുതിയ ഈസിങ് ഫങ്ക്ഷൻ്റെ കോഡ് ആണ് ചുവടെ നിങ്ങൾ കാണുന്നത്. x, 0 നും(ആനിമേഷന്റെ ആരംഭം) 1 നും (ആനിമേഷന്റെ അവസാനം) ഇടക്കുള്ള അനിമേഷൻ്റെ പുരോഗതിയെ കുറിക്കുന്നു. easing: all_easings: എല്ലാ ഈസിങ് കളും check: ഈസിങ് ൻ്റെ വെത്യാസം കാണുവാൻ ക്കിക്ക് ചെയ്യുക check_size: വലുപ്പം check_position: സ്ഥാനം check_opacity: സുതാര്യത current_func: ഈ ഫങ്ക്ഷൻ linear_func: നേർരേഖാ ഫങ്ക്ഷൻ load: ലോഡിംഗ്... opensource: title: ഓപ്പൺ സോഴ്‌സ് translate: നിങ്ങളുടെ ഭാഷയിലേക്ക് സൈറ്റ് വിവർത്തനം ചെയ്യാൻ സഹായിക്കുക authors: sitnik: Andrey Sitnik separator: and solovev: Ivan Solovev theme: auto: സ്വയം പ്രേരിതമായ തീം light: ലൈറ്റ് തീം dark: ഇരുണ്ട തീം ================================================ FILE: i18n/nl.yml ================================================ version: 2 lang_code: nl lang_name: Nederlands rtl: false title: Easing-functies Cheatsheet description: Maak animaties realistischer door de juiste easing-functie te kiezen. share: Easing-functies beïnvloeden de snelheid van een animatie, om de beweging natuurlijker te laten lijken. De snelheid van fysieke objecten is niet constant, en de beweging start en stopt niet abrupt. Deze pagina helpt je de juiste easing-functie te kiezen. about: __format ~~Easing-functies~~ bepalen de mate van verandering van een waarde, gedurende een bepaalde periode. Objecten in het dagelijks leven bewegen niet met een constante snelheid, en hun beweging start en stopt niet abrupt. Als je een lade opent begint de beweging snel, maar als de lade bijna helemaal open is vertraagt de beweging. Wanneer je iets laat vallen beweegt het sneller en sneller, tot het de grond aanraakt en terug omhoog stuitert. Deze pagina helpt je bij het kiezen van de juiste easing-functie. howtos: css: text: In CSS kun je met de overgangs- en animatie-eigenschappen de easing-functie specificeren. edit: Bewerk op ^cubic-bezier.com^. with_animation: In CSS kan deze functie geïmplementeerd worden met {{@keyframes}} example_size: Grootte example_position: Positie example_opacity: Transparantie postcss: text: In PostCSS is de easing-functie veel makkelijker te beschrijven. Er bestaat een plug-in ^postcss-easings^ die de overgangsinformatie van die site neemt. explanation: Die declaratie wordt geconverteerd naar degene die hierboven is uitgelegd. disabled: Helaas kan de easing-functie niet worden ingesteld met een PostCSS-plug-in. Dit kan gedaan worden met {{@keyframes}}, zie bovenstaande. gradient: name: Kleurovergang text: Het is mogelijk om een kleurovergang te maken met ^postcss-easing-gradients^. mathfunction: name: Wiskundige functie text: Hieronder zie je de code van deze easing-functie, geschreven in TypeScript. Variable x staat voor de absolute voortgang van de animatie van 0 (start animatie) tot 1 (einde animatie). easing: all_easings: Alle easings check: Test deze en lineare functie check_size: Grootte check_position: Positie check_opacity: Transparantie current_func: Deze functie linear_func: Lineare functie load: Laden... opensource: title: Open-source translate: Help site te vertalen naar jouw taal authors: sitnik: Andrey Sitnik separator: en solovev: Ivan Solovev theme: auto: Automatisch thema light: Licht thema dark: Donker thema ================================================ FILE: i18n/no-bok.yml ================================================ version: 2 lang_code: no-bok lang_name: Norsk bokmål rtl: false title: Overgangsfunksjoner Jukselapp description: Gjør animasjoner mer realistisk ved å velge den riktige overgangsfunksjonen. share: Overgangsfunksjoner spesifiserer animasjonshastigheten for å gjøre en bevegelse mer naturlig. Ekte objekter flytter seg ikke med en konstant hastighet, og starter og stopper ikke øyeblikkelig. Denne siden hjelper deg med å velge riktig overgangsfunksjon. about: __format ~~Overgangsfunksjoner~~ spesifiser endringsraten til et parameter over tid Objekter i virkeligheten starter og stopper ikke øyeblikkelig, og nesten aldri har de en konstant hastighet. Når vi åpner en skoff, starter vi raskt, og avslutter sakte mens den kommer ut. Slipp noe på gulvet, og den vil først akselerere nedover, så sprette opp igjen etter å ha truffet gulvet. Denne siden hjelper deg med å velge riktig overgangsfunksjon. howtos: css: text: I CSS, overgangs- og animasjonsegenskapene lar deg spesifisere en overgangsfunksjon. edit: Rediger på ^cubic-bezier.com^. with_animation: I CSS kan denne funksjonen bli implementert ved bruk av {{@keyframes}} example_size: Størrelse example_position: Posisjon example_opacity: Gjennomsiktighet postcss: text: I PostCSS er overgangsfunksjonen mye lettere å beskrive. Det finnes en plugin ^poscss-easings^ som tar overgansinformasjon fra den siden. explanation: Den deklareringen er gjort om til den beskrevet over. disabled: Uheldigvis kan ikke overgangsfunksjonen settes med noen PostCSS pluginer. Kan bli gjort med {{@keyframes}}, se over. gradient: name: Overgang text: Det er mulig å tegne en overgang med ^postcss-easing-gradients^. mathfunction: name: Mattefunksjon text: Under ser du koden av denne overgangsfunksjonen skrevet i TypeScript. Variabelen x representerer den absolutte progresjonen av animasjonen i området mellom 0 (starten av animasjonen) og 1 (sluttet av animasjonen). easing: all_easings: Alle overganger check: Sjekk overgang for endringer check_size: Størrelser check_position: Posisjoner check_opacity: Gjennomsiktigheter current_func: Denne funksjonen linear_func: Lineær funksjon load: Laster inn... opensource: title: Openkildet translate: Hjelp med å oversette siden til ditt språk authors: sitnik: Andrey Sitnik separator: og solovev: Ivan Solovev theme: auto: Automatisk tema light: Lyst tema dark: Mørkt tema ================================================ FILE: i18n/pl.yml ================================================ version: 2 lang_code: pl lang_name: Polish rtl: false title: Ściąga z Funkcji Przejścia description: Spraw, że animacja wygląda na bardziej realistyczną, dobierając dla niej odpowiednią funkcję przejścia (tzw. easing). share: 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. Ta strona pomaga wybrać Ci odpowiednią funkcję przejścia. about: __format ~~Funkcje przejścia~~ zadaj tempo zmian parametru w czasie. 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. Ta strona pomaga wybrać Ci odpowiednią funkcję przejścia. howtos: css: text: W CSS-ie, takie właściwości jak przemiana (transition) oraz animacja (animation) pozwalają na określenie dla nich funkcji przejścia. edit: Edytuj na ^cubic-bezier.com^. with_animation: W CSS-ie, taka funkcja może zostać zaimplementowana za pomocą {{@keyframes}} example_size: Rozmiar example_position: Pozycja example_opacity: Przezroczystość postcss: text: Funkcje przejścia są znacznie łatwiejsze do opisania w PostCSS. Istnieje plugin ^postcss-easings^, który pobiera informacje o przejściach z tejże strony. explanation: Tamta deklaracja została skonwertowana do tej opisanej powyżej. disabled: Niestety nie można ustawić funkcji przejścia za pomocą żadnego pluginu do PostCSS-a. Zobacz powyżej, jak można to zrobić przy użyciu {{@keyframes}}. gradient: name: Gradient text: Można narysować gradient przy użyciu ^postcss-easing-gradients^. mathfunction: name: Funkcje matematyczne text: Poniżej widzisz kod dla funkcji przejścia napisany w TypeScriptcie. Zmienna x odzwierciedla absolutny postęp animacji w zakresie od 0 (początek animacji) do 1 (koniec animacji). easing: all_easings: Wszystkie przejścia check: Sprawdź, jaką zmianę daje to przejście check_size: Rozmiar check_position: Pozycja check_opacity: Przezroczystość current_func: Ta funkcja linear_func: Funkcja liniowa load: Ładowanie... opensource: title: Open Source translate: Pomóż przetłumaczyć stronę na twój język! authors: sitnik: Andrey Sitnik separator: i solovev: Ivan Solovev theme: auto: Motyw domyślny light: Jasny motyw dark: Ciemny motyw ================================================ FILE: i18n/pt-br.yml ================================================ version: 2 lang_code: pt-br lang_name: Português (Brasil) rtl: false title: Cheat Sheet para funções de easing description: Torne animações mais realistas escolhendo a função de easing correta. share: Funções de easing especificam a velocidade da animação para tornar o movimento mais natural. Objetos reais não se movem a uma velocidade constante e não começam e param em um instante. Esta página ajuda a escolher a função de easing correta. about: __format ~~Funções de easing~~ especificam a taxa de alteração de um parâmetro ao longo do tempo. Objetos na vida real não começam e param instantaneamente e quase nunca se movem a uma velocidade constante. Quando abrimos uma gaveta, primeiro a movemos rapidamente e diminuímos a velocidade à medida que sai. Deixe algo cair no chão e ele primeiro acelerará caindo e saltará depois de bater no chão. Esta página ajuda a escolher a função de easing correta. howtos: css: text: Em CSS, as propriedades 'transition' e 'animation' permitem especificar uma função de easing. edit: Editar em ^cubic-bezier.com^. with_animation: Em CSS, esta função pode ser implementada usando {{@keyframes}} example_size: Tamanho example_position: Posição example_opacity: Transparência postcss: text: No PostCSS, a função de easing é muito mais fácil de descrever. Há um plugin, ^postcss-easings^, que tira a informação de transição deste site. explanation: Tal declaração é convertida para a descrita acima. disabled: Infelizmente, esta função de easing não pode ser feita com um PostCSS plugin. Pode ser feita com {{@keyframes}}, veja acima. gradient: name: Gradiente text: É possível desenhar um gradiente usando o plugin ^postcss-easing-gradients^. mathfunction: name: Função matemática text: Abaixo está o código desta função de easing escrito em TypeScript. A variável x representa o progresso absoluto da animação nos limites de 0 (começo da animação) e 1 (fim da animação). easing: all_easings: Todos os easings check: Verificar o easing para mudanças de check_size: Tamanho check_position: Posição check_opacity: Transparência current_func: Função atual linear_func: Função linear load: Carregando... opensource: title: Open Source translate: Ajude a traduzir o site para seu idioma authors: sitnik: Andrey Sitnik separator: e solovev: Ivan Solovev theme: auto: Tema auto light: Tema claro dark: Tema escuro ================================================ FILE: i18n/ro.yml ================================================ version: 2 lang_code: ro lang_name: Română rtl: false title: Easing Functions Cheat Sheet description: Faceți animațiile mai realiste alegând funcția de relaxare potrivită. share: Funcțiile de relaxare specifică viteza animației pentru a face mișcarea mai naturală. Obiectele reale nu se mișcă doar la o viteză constantă și nu pornesc sau se opresc instant. Această pagină vă ajută să alegeți funcția de relaxare potrivită. about: __format ~~Funcțiile de relaxare~~ specifică rata de modificare a unui parametru în timp. Obiectele din viața reală nu pornesc sau se opresc instantaneu și aproape niciodată nu se deplasează cu viteză constantă. Când deschidem un sertar, mai întâi îl mișcăm rapid, și îl încetinim pe măsură ce iese. Aruncă ceva pe podea și mai întâi va accelera în jos, apoi revenind în sus după ce a lovit podeaua. Această pagină vă ajută să alegeți funcția de relaxare potrivită. howtos: css: text: În CSS, proprietățile de tranziție și animație vă permit să specificați o funcție de relaxare. edit: Editați pe ^cubic-bezier.com^. with_animation: În CSS, această funcție poate fi implementată folosind {{@keyframes}} example_size: Dimensiune example_position: Poziție example_opacity: Transparență postcss: text: În PostCSS, funcția de relaxare este mult mai ușor de descris. Există un plugin ^postcss-easings^ care preia informațiile de tranziție de pe acel site. explanation: Acea declarație este abordată în descrierea de mai sus. disabled: Din păcate, funcția de relaxare nu poate fi setată cu niciun plugin PostCSS. Se poate face cu {{@keyframes}}, vezi mai sus. gradient: name: Gradient text: Este posibil să desenați un gradient folosind ^postcss-easing-gradients^. mathfunction: name: Funcția matematică text: Mai jos vedeți codul acestei funcții de simplificare scris în TypeScript. Variabila x reprezintă progresul absolut al animației în limitele lui 0 (începutul animației) și 1 (sfârșitul animației). easing: all_easings: Toate relaxările check: Verificați relaxarea pentru modificări check_size: Mărimi check_position: Poziții check_opacity: Transparente current_func: Această funcție linear_func: Funcție liniară load: Se încarcă... opensource: title: Open Source translate: Ajută la traducerea site-ului în limba ta authors: sitnik: Andrey Sitnik separator: și solovev: Ivan Solovev theme: auto: Tema automată light: Temă luminoasă dark: Temă întunecată ================================================ FILE: i18n/ru.yml ================================================ version: 2 lang_code: ru lang_name: Русский rtl: false title: Шпаргалка по функциям плавности (easing) description: Сделайте анимацию более реалистичной, подобрав нужную функцию плавности (easing). share: Функция плавности (easing) определяет скорость анимации, делая её более реалистичной. Объекты в реальности не движутся с постоянной скоростью, не начинают движение и не останавливаются в одно мгновение. Этот сайт поможет подобрать нужную функцию плавности. about: __format ~~Функция плавности (easing)~~ определяет скорость течения анимации, делая её более реалистичной. Объекты в реальной жизни не начинают двигаться мгновенно и с постоянной скоростью. Открывая ящик стола, мы в начале ускоряем его, а затем тормозим. Уроните что-нибудь на пол, оно сначала ускорится вниз, а затем отскочит вверх после удара об пол. Этот сайт поможет подобрать нужную функцию плавности. howtos: css: text: В CSS свойства transition и animation позволяют указывать функцию плавности. edit: Редактировать на ^cubic-bezier.com^. with_animation: В CSS эту функцию можно реализовать с помощью {{@keyframes}} example_size: Размер example_position: Положение example_opacity: Прозрачность postcss: text: В PostCSS функцию плавности описывать сильно проще. Есть плагин ^postcss-easings^, который берёт информацию о переходе с этого сайта. explanation: Эта декларация преобразуется в подобную, которая описана выше. disabled: К сожалению, такую функцию плавности нельзя задать с помощью какого-либо плагина PostCSS. Это можно сделать с помощью {{@keyframes}}, смотрите выше. gradient: name: Градиент text: Нарисовать градиент возможно с помощью ^postcss-easing-gradients^. mathfunction: name: Математическая функция text: Ниже вы видите код функции перехода, написанный на TypeScript. Переменная x — это абсолютный прогресс анимации, где 0 (начало анимации) и 1 (конец анимации). easing: all_easings: Все функции check: Проверить плавность на изменение check_size: Размера check_position: Положения check_opacity: Прозрачности current_func: Текущая функция linear_func: Линейная функция load: Загрузка... opensource: title: Открытый код authors: sitnik: Андрей Ситник separator: и solovev: Иван Соловьев theme: auto: Тема автоматич. light: Светлая тема dark: Темная тема ================================================ FILE: i18n/si.yml ================================================ version: 1 lang_code: si lang_name: Slovenian rtl: false title: Zapisi funkcij za blaženje gibanja description: Oživite animacije z izbiro pravilne funkcije za blaženje gibanja. share: Funkcije za blaženje gibanja določajo hitrost animacije, da gibanje postane bolj naravno. Resnični predmeti se ne premikajo s konstantno hitrostjo, in ne začnejo in ne ustavijo se v trenutku. Ta stran vam pomaga izbrati pravilno funkcijo za blaženje gibanja. about: __format ~~Funkcije blaženja~~ določajo hitrost spremembe parametra s časom. Predmeti v resničnem življenju se ne začnejo in ne ustavijo v trenutku, in skoraj nikoli se ne premikajo s konstantno hitrostjo. Ko odpremo predal, ga najprej hitro premaknemo in ga nato upočasnimo, ko se odpre. Nečesa, kar vržemo na tla, se bo najprej pospeševalo navzdol, nato pa se bo odbilo nazaj gor, ko se dotakne tal. Ta stran vam pomaga izbrati pravilno funkcijo za blaženje gibanja. howtos: css: text: V CSS-ju lastnosti prehoda in animacije omogočajo določitev funkcije za blaženje gibanja. edit: Uredi na ^cubic-bezier.com^. with_animation: V CSS-ju lahko to funkcijo izvedemo z uporabo {{@keyframes}} example_size: Velikost example_position: Položaj example_opacity: Prosojnost postcss: text: V PostCSS-ju je funkcijo za blaženje gibanja veliko lažje opisati. Obstaja vtičnik ^postcss-easings^, ki prevzame informacije o prehodu s te strani. explanation: Ta deklaracija se pretvori v opisano zgoraj. disabled: Na žalost funkcije za blaženje gibanja ni mogoče nastaviti z nobenim vtičnikom PostCSS. Lahko pa se izvede s pomočjo {{@keyframes}}, glej zgoraj. gradient: name: Gradient text: Mogoče je narisati gradient s pomočjo ^postcss-easing-gradients^. mathfunction: name: Matematična funkcija text: Spodaj vidite kodo te funkcije za blaženje gibanja, zapisane v TypeScriptu. Spremenljivka x predstavlja absolutni napredek animacije v mejah od 0 (začetek animacije) do 1 (konec animacije). easing: all_easings: Vse funkcije za blaženje gibanja check: Check easing for changes check_size: Velikost check_position: Pozicija check_opacity: Prosojnost current_func: Trenutna funkcija linear_func: Linearna funkcija load: Nalaganje... opensource: title: Odprtokodno translate: Pomagaj prevesti to stran v svoj jezik authors: sitnik: Andrey Sitnik separator: in solovev: Ivan Solovev theme: auto: Automatska tema light: Svetla tema dark: Temna tema ================================================ FILE: i18n/sq.yml ================================================ version: 2 lang_code: sq lang_name: Shqip rtl: false title: Lista e funksioneve të shpejtësisë për animacione description: Bëji funksionet më realiste duke zgjedhur shpejtësinë e duhur të animacionit. share: Funksionet e shpejtësisë specifikojnë shpejtësine e animacioneve për t'i bërë më të natyrshme. Objektet reale nuk lëvizin vetëm me shpejtësi konstante, gjithashtu nuk fillojnë dhe ndalen menjëherë. Kjo faqe ju ndihmon të zgjidhni funksionin e duhur të shpejtësisë së animacionit. about: __format ~~Funksionet e shpejtësisë~~ specifikojnë ndryshimin e parametrit në varësi të kohës. Objektet reale nuk fillojnë dhe ndalen menjëherë, dhe pothuajse asnjëherë nuk lëvizin me shpejtësi konstante. Kur hapim një sirtar, në fillim e lëvizim shpejt, dhe ngadalsojmë kur e nxjerrim jashtë. Nëse hedhim diçka në tokë, fillimisht bie poshtë me shpejtësi dhe pastaj kthehet lart pasi godet dyshemenë. Kjo faqe ju ndihmon të zgjidhni funksionin e duhur të animacionit. howtos: css: text: Në CSS, cilësimet e 'transition' dhe 'animation' të lejojnë të specifikosh një funksion shpejtësie. edit: Redakto në ^cubic-bezier.com^. with_animation: Në CSS, këto funksione mund të implementohen duke përdorur {{@keyframes}} example_size: Madhësitë example_position: Pozicionet example_opacity: Transparenca postcss: text: Në PostCSS, funksionet e shpejtësisë janë më të thjeshta per t'u përshkruar. Ekziston një plugin ^postcss-easings^ që merr informacionin e tranzicionit nga ky sajt. explanation: Kjo deklaratë konvertohet në atë të përshkruar më lart. disabled: Fatkeqësisht, funksionet e shpejtësisë nuk mund të vendosen me një plugin PostCSS Mund të arrihet me {{@keyframes}}, shihni më lart. gradient: name: Gradienti text: Është e mundur të vizatojmë një gradient duke përdorur ^postcss-easing-gradients^. mathfunction: name: Funksion matematikor text: Më poshtë do të shihni funksionet e shpejtësisë të shkruara në TypeScript. Variabla x përfaqëson progresin absolut të animacionit në kufijtë e 0 (fillimi i animacionit) dhe 1 (fundit e animacionit). easing: all_easings: Të gjitha funksionet e shpejtësitë check: Kontrolloni shpejtësinë për ndryshime check_size: Madhësitë check_position: Pozicionet check_opacity: Transparenca current_func: Funksioni aktual linear_func: Funksioni linear load: Ngarkimi... opensource: title: Open Source translate: Ndihmo përkthimin në gjuhën tënde authors: sitnik: Andrey Sitnik separator: dhe solovev: Ivan Solovev theme: auto: Modaliteti automatik light: Modaliteti i hapur dark: Modaliteti i errët ================================================ FILE: i18n/sv-se.yml ================================================ version: 2 lang_code: sv lang_name: Svenska rtl: false title: Lättnadsfunktioner description: Gör animationer mer realistiska genom att välja rätt lättnadsfunktion. share: Lättringsfunktioner anger hastigheten på animeringen för att göra rörelsen mer naturlig. Verkliga föremål rör sig inte bara med konstant hastighet och startar och stannar inte på ett ögonblick. Den här sidan hjälper dig att välja rätt lättnadsfunktion. about: __format ~~Lättningsfunktioner~~ anger förändringshastigheten för en parameter över tid. Objekt i verkliga livet startar och stannar inte bara direkt, och nästan aldrig rör sig med en konstant hastighet. När vi öppnar en låda flyttar vi först den snabbt, och sen sakta ner den när den kommer ut. Släpp något på golvet och det kommer först accelerera nedåt och studsar sedan upp igen efter att ha träffat golvet. Den här sidan hjälper dig att välja rätt lättnadsfunktion. howtos: css: text: I CSS låter övergångs- och animeringsegenskaperna dig att ange en lättnadsfunktion. edit: Redigera på ^cubic-bezier.com^. with_animation: I CSS kan den här funktionen implementeras med {{@keyframes}} example_size: Storlek example_position: Position example_opacity: Genomskinlighet postcss: text: I PostCSS är lättnadsfunktionen mycket lättare att beskriva. Det finns ett plugin ^postcss-easings^ som tar övergångsinformationen från den platsen. explanation: Deklarationen konverteras till den som beskrivs ovan. disabled: Tyvärr kan lättnadsfunktionen inte ställas in med något PostCSS-plugin. Kan göras med {{@keyframes}}, se ovan. gradient: name: Gradient text: Det är möjligt att rita en gradient med ^postcss-easing-gradients^. mathfunction: name: Matematisk funktion text: Nedan ser du koden för denna lättnadsfunktion skriven i TypeScript. Variabeln x representerar animeringens absoluta progressionen inom gränserna 0 (animeringens början) och 1 (animeringens slut). easing: all_easings: Alla lättnader check: Kontrollera lättnad för ändringar check_size: Storlekar check_position: Positioner check_opacity: Genomskinligheter current_func: Denna funktion linear_func: Linjär funktion load: Laddar... opensource: title: Öppen källkod translate: Hjälp till att översätta webbplatsen till ditt språk authors: sitnik: Andrey Sitnik separator: och solovev: Ivan Solovev theme: auto: Autotema light: Ljust tema dark: Mörkt tema ================================================ FILE: i18n/tr.yml ================================================ version: 2 lang_code: tr lang_name: Türkçe rtl: false title: Geçiş Fonksiyonları Hızlı Başvuru description: Animasyonları doğru geçiş fonksiyonlarını seçerek daha gerçekçi kılın. share: Geçiş fonksiyonları, hareketlerin daha doğal gözükmesi için animasyonun hızını ayarlar. Gerçekte objeler harekete birden başlayıp durmazlar ve neredeyse hiçbir zaman sabit hızda ilerlemezler. Bu site size doğru geçiş fonksiyonunu seçmenizde yardımcı olur. about: __format ~~Geçiş Fonksiyonları~~ bir parametrenin zaman çizelgesinde değişim oranını kontrol eder. Gerçek hayatta objeler hareket etmeye birden başlayıp durmazlar ve neredeyse hiçbir zaman sabit hızda ilerlemezler. Bir çekmeceyi açarken önce hızlıca çekeriz ve açıldıkça yavaşlatırız. Yere bir şey attığınızda önce aşağı doğru hızlanır ve sonra yere çarparak seker. Bu site size doğru geçiş fonksiyonunu seçmenizde yardımcı olur. howtos: css: text: CSS içindeki `transition` ve `animation` değerleri geçiş fonksiyonunu seçmenizi sağlar. edit: ^cubic-bezier.com^ sitesinde düzenle. with_animation: CSS içinde, bu fonksiyon {{@keyframes}} kullanılarak uygulanabilir. example_size: Boyut example_position: Pozisyon example_opacity: Şeffaflık postcss: text: PostCSS'de, hareket hızı işlevini tanımlamak çok daha kolaydır. Bu siteden geçiş bilgilerini alan bir ^ postcss-easings ^ eklentisi vardır. explanation: Bu beyan, yukarıda anlatılana dönüştürülür. disabled: Maalesef, hareket hızı işlevi herhangi bir PostCSS eklentisiyle ayarlanamaz. {{@Keyframes}} ile yapılabilir, yukarıya bakın. gradient: name: Geçiş text: ^postcss-easing-gradients^ kullanarak bir geçiş çizmek mümkündür. mathfunction: name: Matematik fonksiyonu text: Aşağıda bu hareket hızı işlevinin TypeScript ile yazılmış kodunu görüyorsunuz. X değişkeni, animasyonun mutlak ilerlemesini temsil eder 0 (animasyonun başlangıcı) ve 1 (animasyonun sonu) sınırlarında. easing: all_easings: Tüm geçişler check: Değişiklikler için geçişi kontrol edin check_size: Boyut check_position: Pozisyon check_opacity: Şeffaflık current_func: Bu fonksiyon linear_func: Doğrusal fonksiyon load: Yükleniyor... opensource: title: Açık kaynak translate: Siteyi dilinize çevirmeye yardımcı olun. authors: sitnik: Andrey Sitnik separator: ve solovev: Ivan Solovev theme: auto: Oto tema light: Aydınlık tema dark: Karanlık tema ================================================ FILE: i18n/uk.yml ================================================ version: 2 lang_code: uk lang_name: Українська rtl: false title: Шпаргалка функцій пом`якшення (easing) description: Зроби анімацію більш реалістичною, підібравши потрібну пом`якшуючу функцію (easing). share: Функція пом`якшення (easing) визначає швидкість протікання анімації, роблячи її більш реалістичною, тому що реальні речі не починають рухатися миттєво і з постійною швидкістю. Цей сайт допоможе підібрати потрібну пом`якшуючу фінкцію. about: __format ~~Функція пом`якшення (easing)~~ визначає швидкість перетікання анімації, роблячи її більш реалістичною. Реальні речі не починають рухатися миттєво та з постійною швидкістю. Відкриваючи ящик столу, ми спочатку прискорюємо його, а лише на другій половині шляху — гальмуємо. Коли щось падає, то спочатку воно прискорюється, а відбившись від підлоги — підстрибує вгору. Цей сайт допоможе підібрати потрібну функцію пом`якшення. howtos: css: text: CSS властивості transition та animation дозволяють задати функцію пом'якшення. edit: Редагувати на ^cubic-bezier.com^. with_animation: У CSS цю функцію можна реалізувати, використовуючи {{@keyframes}} example_size: Розмір example_position: Позиція example_opacity: Прозорість postcss: text: PostCSS функцію пом`якшення описати набагато простіше. Існує плагін ^postcss-easings^, який бере інформацію про перехід з цього сайту. explanation: Ця декларація перетворюється на подібну до тої яка описана вище. disabled: На жаль, таку функцію пом`якшення неможливо встановити жодним плагіном PostCSS. Це можна зробити за допомогою {{@keyframes}}, див. Вище. gradient: name: Градієнт text: Можна намалювати градієнт, використовуючи ^postcss-easing-gradients^. mathfunction: name: Математична функція text: Нижче подано код цієї функцій пом'якшення на TypeScript. Змінна x представляє абсолютний поступ анімації в межах від 0 (початок анімації) до 1 (кінець анімації). easing: all_easings: Всі функції check: Подивитись пом`якшення при зміні check_size: Розміру check_position: Положення check_opacity: Прозорості current_func: Вибрана функція linear_func: Лінійна функція load: Завантаження... opensource: title: Open Source translate: Перекладіть своєю мовою authors: sitnik: Андрєй Сітнік separator: та solovev: Іван Соловйов theme: auto: Auto theme light: Light theme dark: Dark theme ================================================ FILE: i18n/vi.yml ================================================ version: 2 lang_code: vi lang_name: Tiếng Việt rtl: false title: Bảng Tổng Hợp Hiệu Ứng Chuyển Động (Easing) description: Tạo các hiệu ứng chuyển động thực tế hơn bằng cách chọn đúng easing. share: Các hàm easing sẽ điều chỉnh tốc độ để chuyển động của animation 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 độ cố định, và cũng không bắt đầu hay kết thúc một cách tức thì. about: __format ~~Các hàm easing~~ xác định tỉ lệ của một tham số biến đổi theo thời gian. 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 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, ban đầu ta kéo nó nhanh, sau đó chậm dần cho đến khi mở ra hoàn toà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, và cứ bật như vậy, mỗi lần độ cao lại giảm đi cho tới khi nó đứng im. 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. howtos: css: text: Trong CSS, ta có thể sử dụng thuộc tính transition và animation để xác định easing. edit: Tuỳ chỉnh tại ^cubic-bezier.com^. with_animation: Trong CSS, chức năng này có thể được thực hiện với {{@keyframes}} example_size: Kích thước example_position: Vị trí example_opacity: Độ trong suốt postcss: text: Miêu tả một hàm ease trong PostCSS dễ dàng hơn nhiều. Bạn có thể lấy thông số transition từ plugin ^postcss-easings^. explanation: Câu lệnh này được chuyển đổi từ hàm bên trên. disabled: 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. Tuy nhiên, vẫn có thể làm được bằng cách sử dụng {{@keyframes}}, xem bên trên. gradient: name: Gradient text: Có thể tạo màu gradient với ^postcss-easing-gradients^. mathfunction: name: Công thức Toán học text: Dưới đây là code được viết bằng TypeScript cho hàm easing này. 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. easing: all_easings: Tất cả các hàm check: Kiểm tra easing để thấy sự thay đổi check_size: Kích thước check_position: Vị trí check_opacity: Độ trong suốt current_func: Hàm này linear_func: Hàm tuyến tính load: Xin chờ... opensource: title: Mã nguồn mở translate: Hỗ trợ dịch trang này sang ngôn ngữ của bạn authors: sitnik: Andrey Sitnik separator: và solovev: Ivan Solovev theme: auto: Tự động light: Ban ngày dark: Ban đêm ================================================ FILE: i18n/yue.yml ================================================ version: 2 lang_code: yue lang_name: 粵語 rtl: false title: 緩動函數小冊子 description: 揀啱緩動函數，令動畫更加真實。 share: 緩動函數嘅作用係控制動畫嘅速度，令到佢更加有真實性。 現實生活嘅嘢唔會穩定速度郁動，並且唔會忽然之間挑起或者停低。 呢個網頁會幫你揀返啱嘅緩動函數。 about: __format ~~緩動函數 (Easing function)~~ 嘅用途係順住時間控制一個數目嘅變化。 現實生活嘅嘢唔會忽然之間挑起或者停低，而且基本上冇可能以穩定速度郁動。 當我哋開櫃桶嘅時候，我哋會先快速地掹佢出嚟，再慢返落嚟，直至佢出晒嚟為止。 如果你跌低嘢嘅話，嗰樣嘢會首先慢慢往下加速，之後由地上彈返上嚟。 呢個網頁會幫你揀返啱嘅緩動函數。 howtos: css: text: 用 CSS 嘅時候，你可以用 transition 同埋 animation 元素嚟指定一個緩動函數。 edit: 喺 ^cubic-bezier.com^ 編輯。 with_animation: 呢個函數可以用 {{@keyframes}} 造成： example_size: 大細 example_position: 位置 example_opacity: 透明度 postcss: text: 用 PostCSS 整緩動函數就容易好多。 你可以用 ^postcss-easings^ 呢個插件嚟指定你想要嘅函數，佢會由呢個網頁抽出相關嘅資訊。 explanation: 呢個會被轉換成上面嘅 CSS 碼。 disabled: 呢個函數唔好彩地冇可能用任何 PostCSS 插件嚟製造。 你須要用上面嘅 {{@keyframes}} 方法。 gradient: name: 漸變式 text: 你可以用 ^postcss-easing-gradients^ 嚟畫漸變式。 mathfunction: name: 公式 text: 以下係呢個函數嘅 TypeScript 版。 裡面嘅變數 x 代表動畫嘅進度，由 0（動畫開始）至 1（動畫完結）。 easing: all_easings: 全部函數 check: 睇吓變化 check_size: 大細 check_position: 位置 check_opacity: 透明度 current_func: 呢個函數 linear_func: 線性函數 load: 載入緊… opensource: title: 開源 translate: 幫手將呢個網頁翻譯成你嘅語言 authors: sitnik: Andrey Sitnik separator: 同埋 solovev: Ivan Solovev theme: auto: 自動 light: 亮色 dark: 暗色 ================================================ FILE: i18n/zh-cn.yml ================================================ version: 2 lang_code: zh-cn lang_name: 简体中文 rtl: false title: 缓动函数速查表 description: 使用正确的缓动函数，让动画效果更加真实。 share: 缓动函数可以自定义动画在执行中的速度 使得物体的移动更加自然。现实生活中， 物体当然不是匀速移动，同样也不会立刻启动或结束。 这个页面将帮助你选择正确的缓动函数。 about: __format ~~缓动函数~~ 自定义参数随时间变化的速率。 现实生活中，物体并不是突然启动或者停止， 当然也不可能一直保持匀速移动。就像我们 打开抽屉的过程那样，刚开始拉的那一下动作很快， 但是当抽屉被拉出来之后我们会不自觉的放慢动作。 或是掉落在地板上的物体，一开始下降的速度很快， 接着就会在地板上来回反弹直到停止。 这个页面将帮助你选择正确的缓动函数。 howtos: css: text: 在 CSS 中，transition 和 animation 属性允许你自定义缓动函数。 edit: 在 ^cubic-bezier.com^ 上编辑。 with_animation: 在 CSS 中，使用 {{@keyframes}} 来实现这个函数 example_size: 大小 example_position: 位置 example_opacity: 不透明度 postcss: text: 在 PostCSS 中，使用缓动函数就变得方便多了。 可以使用这个插件 ^postcss-easings^ 来定义 transition 的属性值。 explanation: 这种形式和上面的贝塞尔曲线函数一致。 disabled: 可惜的是，这个缓动函数不能使用 PostCSS plugin 插件。 但可以用 {{@keyframes}} 实现，查阅上方。 gradient: name: 渐变 text: 可以使用工具 ^postcss-easing-gradients^ 来实现渐变。 mathfunction: name: 函数 text: 下面的代码由 TypeScript 实现。 变量 x 表示 0（动画开始）到 1（动画结束）范围内的值。 easing: all_easings: 所有缓动函数 check: 观看缓动变化 check_size: 大小 check_position: 位置 check_opacity: 不透明度 current_func: 当前函数 linear_func: 线性函数 load: 加载中... opensource: title: 开源 translate: 帮助我们将此页面翻译成你的语言 authors: sitnik: Andrey Sitnik separator: 和 solovev: Ivan Solovev theme: auto: 自动主题 light: 亮色主题 dark: 深色主题 ================================================ FILE: i18n/zh-tw.yml ================================================ version: 2 lang_code: zh-tw lang_name: 繁體中文 rtl: false title: 緩動函數 (Easing function) 小抄 description: 使用正確的緩動函數，讓動畫更加真實。 share: 緩動函數指定了動畫效果在執行時的進度，讓它看起來更加真實。現實生活中的物體不會以等速移動，也不會突然開始或停止。 本頁可以在每次你需要時，幫助你找到想要的函數。 about: __format ~~緩動函數 (Easing function)~~ 能夠調整數值變化的速度。 現實生活中的物體不會以等速移動，也不會突然開始或停止。例如我們打開抽屜時，首先會加速， 然後慢下來。又或是當某個物體由高處往下掉時，首先是越掉越快，撞到地上彈回，最後才又回到地板。 本頁可以在每次你需要時，幫助你找到想要的函數。 howtos: css: text: 在 CSS 中，transition 和 animation 這兩個屬性允許您指定緩動函數。 edit: 在 ^cubic-bezier.com^ 編輯。 with_animation: 在 CSS 中，這個函數可以透過 {{@keyframes}} 實現。 example_size: 大小 example_position: 位置 example_opacity: 透明度 postcss: text: 在 PostCSS 中，使用緩動函數就方便多了。 這個插件 ^postcss-easings^ 能夠將這個網頁的函數名稱轉換為貝茲曲線數值，您只需要輸入名稱就好了。 explanation: 等同於 CSS 的程式碼。 disabled: 很不幸的，這個函數不能透過 PostCSS 插件設定。請使用上方的 {{@keyframes}} 來實現。 gradient: name: 漸層 text: 您可以使用 ^postcss-easing-gradients^ 來繪製漸層。 mathfunction: name: 公式 text: 以下是此函數的程式碼，以 TypeScript 編寫。 變數 x 表示動畫的進度，範圍在 0 (動畫開始) 到 1 (動畫結束) 之間。 easing: all_easings: 所有函數 check: 查看變化 check_size: 大小 check_position: 位置 check_opacity: 透明度 current_func: 此函數 linear_func: 線性函數 load: 載入中... opensource: title: 開源 translate: 幫助我們將此網頁翻譯成您的語言 authors: sitnik: Andrey Sitnik separator: 和 solovev: Ivan Solovev theme: auto: 系統預設 light: 亮色主題 dark: 暗色主題 ================================================ FILE: package.json ================================================ { "name": "easings.net", "scripts": { "start": "node ./scripts/start.js", "build": "NODE_ENV=production node ./scripts/build.js", "lint": "eslint ./src/**/*.{ts,js} ./scripts/*.js" }, "browserslist": [ "defaults", "not ie 11", "not ie_mob 11" ], "postcss": { "plugins": { "postcss-dark-theme-class": {}, "postcss-pxtorem": { "rootValue": 16, "mediaQuery": true, "propList": [ "font", "font-size", "line-height", "letter-spacing", "margin", "padding" ] }, "postcss-flexbugs-fixes": {}, "postcss-font-family-system-ui": {}, "autoprefixer": {} } }, "devDependencies": { "@babel/core": "^7.11.4", "@babel/preset-env": "^7.11.0", "@typescript-eslint/eslint-plugin": "^3.9.1", "@typescript-eslint/parser": "^3.9.1", "autoprefixer": "^9.8.6", "css-mqpacker": "^7.0.0", "eslint": "^7.7.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-babel": "^5.3.1", "eslint-plugin-import": "^2.22.0", "eslint-plugin-prettier": "^3.1.4", "express": "^4.17.1", "htmlnano": "^0.2.6", "js-yaml": "^3.14.0", "mustache": "^4.0.1", "parcel-bundler": "^1.12.4", "postcss": "^7.0.32", "postcss-dark-theme-class": "^0.4.0", "postcss-flexbugs-fixes": "^4.2.1", "postcss-font-family-system-ui": "^4.3.0", "postcss-preset-env": "^6.7.0", "postcss-pxtorem": "^5.1.1", "posthtml": "^0.13.3", "prettier": "^2.1.0", "pug": "^3.0.0", "terser": "^5.2.1", "typescript": "^4.0.2" }, "dependencies": { "focus-visible": "^5.1.0" } } ================================================ FILE: scripts/build.js ================================================ const fs = require("fs"); const path = require("path"); const { promisify } = require("util"); const yamlParse = require("js-yaml"); const Mustache = require("mustache"); const readFile = promisify(fs.readFile); const writeFile = promisify(fs.writeFile); const unlink = promisify(fs.unlink); const copyFile = promisify(fs.copyFile); const Parcel = require("parcel-bundler"); const PostHTML = require("posthtml"); const PostHTMLNano = require("htmlnano"); const MQPacker = require("css-mqpacker"); const PostCSS = require("postcss"); const Terser = require("terser"); const format = require("./helpers/format"); const i18nDir = path.join(process.cwd(), "i18n"); /** * @type {Lang[]} */ const langList = fs .readdirSync(i18nDir) .filter((filename) => !/^_/.test(filename) && /\.ya?ml$/i.test(filename)) .map((filename) => fs.readFileSync(path.join(i18nDir, filename))) .map((file) => yamlParse.load(file)) .filter((dic) => dic.version && dic.version > 1 && dic.lang_name); const addedSelectors = [ "js-info-name", "js-info-func", "js-info-simple", "js-info-complex", "js-info-maths", "js-cubic-bezier", "example-copy__icon-action", "footer__theme", ]; const ignoreSelectors = ["is-light", "is-dark"]; const htmlMinifyOptions = { mergeScripts: false, minifySvg: false, }; const shortCssClassName = generateCssClassName(); const bundler = new Parcel("./src/index.pug", { sourceMaps: false, scopeHoist: true, publicUrl: "./", }); const errorBundler = new Parcel("./src/404.pug", { sourceMaps: false, scopeHoist: true, publicUrl: "./", }); async function build() { await errorBundler.bundle(); let serviceWorkerCode = await readFile("./src/sw.js", "utf8"); const bundleHome = await bundler.bundle(); const bundleAssets = findAssets(bundleHome); const cssFile = bundleAssets.find( (item) => item.type === "css" && item.entryName === "index.css" ); const keyframesFile = bundleAssets.find( (item) => item.type === "css" && item.entryName === "keyframes.css" ); const jsFile = bundleAssets.find( (item) => item.type === "js" && item.entryName === "index.ts" ); let cssData = await readFile(cssFile.name, "utf8"); let keyframesData = await readFile(keyframesFile.name, "utf8"); let jsData = await readFile(jsFile.name, "utf8"); await Promise.all([ unlink(cssFile.name), unlink(keyframesFile.name), unlink(jsFile.name), ]); const classesList = {}; ignoreSelectors.forEach((item) => { classesList[item] = item; }); addedSelectors.forEach((item) => { classesList[item] = shortCssClassName.next().value; }); function cssPlugin(root) { root.walkRules((rule) => { rule.selector = rule.selector.replace(/\.[\w_-]+/g, (str) => { const kls = str.substr(1); if (!classesList[kls]) { classesList[kls] = shortCssClassName.next().value; } return "." + classesList[kls]; }); }); } const stylesKeyframe = await PostCSS().process(keyframesData, { from: keyframesFile.name, }); await writeFile(keyframesFile.name, stylesKeyframe.css); await copyFile("./src/favicon.ico", "./dist/favicon.ico"); const styles = await PostCSS([cssPlugin, MQPacker]).process(cssData, { from: cssFile.name, }); Object.keys(classesList).forEach((origin) => { const startSelector = `["'.]`; const endSelector = `["'\\s\\[):,+~>]`; jsData = jsData.replace( new RegExp(`(${startSelector})${origin}(${endSelector})`, "g"), `$1${classesList[origin]}$2` ); }); jsData = jsData .replace( /parcelRequire=function.*\(function \(require\)\s?{/i, "(function(window,document){" ) .replace(/}\);$/, "})(window,document);"); const minifyJS = await Terser.minify(jsData, { toplevel: true, }); await writeFile(jsFile.name, minifyJS.code); bundleAssets.forEach((asset) => { serviceWorkerCode = serviceWorkerCode.replace( new RegExp(`['"]${asset.entryName}['"]`, "g"), `"/${path.basename(asset.name)}"` ); }); serviceWorkerCode = (await Terser.minify(serviceWorkerCode)).code; function htmlPlugin(lang = "en") { return (tree) => { tree.match({ attrs: { class: true } }, (i) => ({ tag: i.tag, content: i.content, attrs: { ...i.attrs, class: i.attrs.class .split(" ") .map((origin) => { if (!(origin in classesList)) { console.error(`Class "${origin}" don't use`); return ""; } return classesList[origin]; }) .join(" "), }, })); tree.match({ tag: "link", attrs: { rel: "stylesheet" } }, (file) => { if (file.attrs.href.includes("src.")) { return { tag: "style", content: styles.css, }; } return file; }); tree.match({ tag: "link", attrs: { rel: "manifest" } }, (file) => ({ tag: "link", attrs: { ...file.attrs, href: `manifest.${lang}.json`, }, })); tree.match({ tag: "meta", attrs: { property: "og:image" } }, (file) => ({ tag: "meta", attrs: { ...file.attrs, content: `https://easings.net/${file.attrs.content}`, }, })); }; } const manifest = bundleAssets.find((asset) => asset.type === "webmanifest"); const manifestFile = await readFile(manifest.name, "utf8"); await bundleAssets .filter((i) => i.type === "html") .map(async (item) => { const file = await readFile(item.name); const html = PostHTML([]).process(file, { sync: true }).html; if (/\/index\.html$/i.test(item.name)) { const distDirName = path.dirname(item.name); await langList.map(async (lang) => { const viewData = format( lang, langList.map((dic) => ({ code: dic.lang_code, name: dic.lang_name, })) ); const htmlFragment = Mustache.render(html, viewData); const manifestLang = Mustache.render(manifestFile, viewData); await writeFile( path.join(distDirName, `sw.${lang.lang_code}.js`), serviceWorkerCode.replace("/:lang", `/${lang.lang_code}`) ); await writeFile( path.join(distDirName, `manifest.${lang.lang_code}.json`), manifestLang ); const htmlMinFragment = await PostHTML([ PostHTMLNano(htmlMinifyOptions), ]) .use(htmlPlugin(lang.lang_code)) .process(htmlFragment); await writeFile( path.join(distDirName, `${lang.lang_code}.html`), htmlMinFragment.html.replace(/>\s<") ); }); const engLang = langList.find((lang) => lang.lang_code === "en"); const htmlFragment = Mustache.render( html, format( engLang, langList.map((dic) => ({ code: dic.lang_code, name: dic.lang_name, })) ) ); const htmlMinFragment = await PostHTML([ PostHTMLNano(htmlMinifyOptions), ]) .use(htmlPlugin()) .process(htmlFragment); await writeFile(item.name, htmlMinFragment.html.replace(/>\s<")); } else { await writeFile( item.name, PostHTML([]).use(htmlPlugin()).process(file, { sync: true }).html ); } }); } build().catch((error) => { process.stderr.write(error.stack + "\n"); process.exit(1); }); function findAssets(bundle) { return Array.from(bundle.childBundles).reduce( (all, item) => all.concat(findAssets(item)), [ { name: bundle.name, entryName: bundle.entryAsset.basename, type: bundle.type, }, ] ); } function* generateCssClassName() { const options = { alphabet: "abcefghijklmnopqrstuvwxyz0123456789-_", length: 1, index: 0, }; const getClassName = () => { let result = ""; for (let i = options.length - 1; i >= 0; i--) { const x = Math.pow(options.alphabet.length, i); const n = Math.floor(options.index / x); result += options.alphabet[n % options.alphabet.length]; } options.index++; if (options.index > Math.pow(options.alphabet.length, options.length) - 1) { options.length++; options.index = 0; } return result; }; while (true) { let result = getClassName(); while (/^[0-9-].*$/.test(result)) { result = getClassName(); } yield result; } } /** * @typedef {Object} Lang * @property {string} lang_code * @property {string} lang_name * @property {string} version */ ================================================ FILE: scripts/helpers/format.js ================================================ const { join } = require("path"); const { readFileSync } = require("fs"); const yamlParse = require("js-yaml"); const fileDefaultDictionary = readFileSync( join(process.cwd(), "i18n", "en.yml") ); const defaultDictionary = yamlParse.load(fileDefaultDictionary); function format(dictionary, langList) { const helpers = { dir: dictionary.rtl ? "rtl" : "ltr", short_name: "Easings.net", link: renderLink, langList: langList.map((item) => [ `
  • `, item.code === dictionary.lang_code ? `${item.name}` : `${item.name}`, `
    • `, ].join("") ), redirect_script: !dictionary.lang_code ? renderRedirectScript(langList.map((item) => item.code)) : "", service_worker: process.env.NODE_ENV === "production" ? renderRegisterServiceWorker(dictionary.lang_code) : "", }; const newDictionary = joinDictionary(defaultDictionary, dictionary); return Object.assign(formatObject(newDictionary), helpers); } function joinDictionary(defaultDictionary, dictionary) { const result = {}; Object.keys(defaultDictionary).forEach((key) => { if (typeof defaultDictionary[key] !== "object") { result[key] = dictionary !== undefined && dictionary[key] !== undefined ? dictionary[key] : defaultDictionary[key]; } else { result[key] = joinDictionary(defaultDictionary[key], dictionary[key]); } }); return result; } function formatObject(dictionary) { const newDictionary = Object.assign({}, dictionary); for (let field in newDictionary) { if ({}.hasOwnProperty.call(newDictionary, field)) { if (typeof newDictionary[field] !== "object") { newDictionary[field] = formatString(newDictionary[field]); } else { newDictionary[field] = formatObject(newDictionary[field]); } } } return newDictionary; } function formatString(source) { const text = source.toString().replace(/{{([^}]{2,})}}/g, "$1"); if (/^__format/i.test(text)) { const newText = text .replace(/^__format?\s/i, "") .replace(/~~([^~]{2,})~~/g, "$1") .replace(/\n/g, "

    "); return `

    ${newText}

    `; } return text; } function renderLink() { return (fragment, render) => { const [text, linkAttr] = fragment.match(/(\([^)]+\)|\[[^\]]+\])/g); const renderText = render(text.replace(/\(([^)]+)\)/, "{{$1}}")); return renderText .replace(/\((.*)\)/, "$1") .replace( /\^([^^]+)\^/, `$1` ); }; } function renderRedirectScript(langList) { return ` `; } function renderRegisterServiceWorker(lang) { return ` `; } module.exports = format; ================================================ FILE: scripts/start.js ================================================ const fs = require("fs"); const path = require("path"); const yamlParse = require("js-yaml"); const Parcel = require("parcel-bundler"); const app = require("express")(); const Mustache = require("mustache"); const format = require("./helpers/format"); const i18nDir = path.join(process.cwd(), "i18n"); const langList = fs .readdirSync(i18nDir) .filter((filename) => !/^_/.test(filename)) .filter((filename) => /\.ya?ml$/i.test(filename)) .map((filename) => fs.readFileSync(path.join(i18nDir, filename))) .map((file) => yamlParse.load(file)) .filter((dic) => dic.version && dic.version > 1 && dic.lang_name) .map((dic) => ({ code: dic.lang_code, name: dic.lang_name, })); const bundler = new Parcel("./src/*.pug", { watch: true, hmr: true, }); app.use("/", renderIndexPage); app.use("/:lang", renderIndexPage); app.use(bundler.middleware()); app.listen(1234); function renderIndexPage(req, res, next) { if ( req.originalUrl === "/" || (req.params.lang && req.params.lang.match(/^[a-zA-Z]{2}$/)) ) { const lang = req.params.lang; bundler.bundle().then((data) => { let indexHtml = ""; if (data.type === "html") { indexHtml = data.entryAsset.generated.html; } else { data.childBundles.forEach((item) => { if (item.entryAsset.id === "index.pug") { indexHtml = item.entryAsset.generated.html; } }); } try { const langFile = fs.readFileSync( `./i18n/${lang ? lang : "en"}.yml`, "utf8" ); const viewData = yamlParse.load(langFile); if (viewData.version >= 2) { res.send(Mustache.render(indexHtml, format(viewData, langList))); } else { res.writeHead(406); res.end("The translation must be at least the 2nd version!"); } } catch (e) { console.log(e); res.writeHead(404); res.end("The translation does not exist!"); } }); } else { next(); } } ================================================ FILE: src/404.css ================================================ @import "./variables/variables.css"; @import "./core/core.css"; @import "./error/error.css"; ================================================ FILE: src/404.pug ================================================ include error/error doctype html html(lang="en") head meta(charset="utf-8") meta(name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover") meta(http-equiv="x-ua-compatible" content="ie=edge") title Page not found meta(name="theme-color" content="#1473e6") link(rel="manifest" href="./manifest.webmanifest") link(rel="icon" type="image/png" href="./icons/96.png") link(rel="mask-icon" href="./icons/mask.svg" color="#1473e6" sizes="any") meta(property="og:url" content="http://easings.net/") meta(property="og:image" content="./icons/192.png") link(href="./404.css" rel="stylesheet") body +error ================================================ FILE: src/animation/easeInBounce.css ================================================ @keyframes opacity-easeInBounce { 0% { opacity: 1; } 4% { opacity: 0.985; } 8% { opacity: 0.995; } 18% { opacity: 0.938; } 26% { opacity: 0.9837; } 46% { opacity: 0.78; } 64% { opacity: 0.98; } 76% { opacity: 0.436; } 88% { opacity: 0.109; } 100% { opacity: 0; } } @keyframes scale-easeInBounce { 0% { transform: scale(1); } 4% { transform: scale(0.984); } 8% { transform: scale(0.995); } 18% { transform: scale(0.938); } 26% { transform: scale(0.9837); } 46% { transform: scale(0.78); } 64% { transform: scale(0.98); } 76% { transform: scale(0.436); } 88% { transform: scale(0.109); } 100% { transform: scale(0); } } @keyframes translate-easeInBounce { 0% { transform: translateX(0%); } 4% { transform: translateX(-1.6%); } 8% { transform: translateX(-0.5%); } 18% { transform: translateX(-6.8%); } 26% { transform: translateX(-1.7%); } 46% { transform: translateX(-22%); } 64% { transform: translateX(-2%); } 76% { transform: translateX(-56.4%); } 88% { transform: translateX(-89.1%); } 100% { transform: translateX(-100%); } } @keyframes cursor-easeInBounce { 0% { top: 101%; color: var(--main-text-color); } 4% { top: 99%; } 8% { top: 101%; } 18% { top: 95%; } 26% { top: 99%; } 46% { top: 76%; } 64% { top: 99%; color: var(--main-text-color); } 76% { top: 45%; } 88% { top: 12%; } 100% { top: 1%; color: var(--second-color); } } ================================================ FILE: src/animation/easeInElastic.css ================================================ @keyframes opacity-easeInElastic { 0%, 2%, 18%, 32%, 48%, 62%, 78%, 88% { opacity: 1; } 8%, 14% { opacity: 0.99; } 40%, 42% { opacity: 0.98; } 70%, 72% { opacity: 0.87; } 100% { opacity: 0; } } @keyframes scale-easeInElastic { 0%, 4%, 18% { transform: scale(1); } 8%, 14% { transform: scale(0.99); } 26%, 28% { transform: scale(1.01); } 40%, 42% { transform: scale(0.98); } 56%, 58% { transform: scale(1.05); } 72% { transform: scale(0.87); } 86% { transform: scale(1.37); } 100% { transform: scale(0); } } @keyframes translate-easeInElastic { 0%, 4%, 18% { transform: translateX(0%); } 8%, 14% { transform: translateX(-0.2%); } 26%, 28% { transform: translateX(0.6%); } 40%, 42% { transform: translateX(-1.6%); } 56%, 58% { transform: translateX(4.6%); } 72% { transform: translateX(-13.1%); } 86% { transform: translateX(37.1%); } 100% { transform: translateX(-100%); } } @keyframes cursor-easeInElastic { 0%, 4%, 18% { top: 101%; color: var(--main-text-color); } 8%, 14% { top: 100%; } 26%, 28% { top: 102%; } 40%, 42% { top: 99%; } 56%, 58% { top: 105%; } 72% { top: 88%; } 86% { top: 138%; color: var(--main-text-color); } 100% { top: 1%; color: var(--second-color); } } ================================================ FILE: src/animation/easeInOutBounce.css ================================================ @keyframes opacity-easeInOutBounce { 0% { opacity: 1; } 2%, 14%, 32% { opacity: 0.99; } 4% { opacity: 0.997; } 10% { opacity: 0.97; } 22% { opacity: 0.876; } 42% { opacity: 0.597; } 50% { opacity: 0.5; } 58% { opacity: 0.403; } 68%, 86%, 98% { opacity: 0.01; } 78% { opacity: 0.124; } 90% { opacity: 0.03; } 96% { opacity: 0.003; } 100% { opacity: 0; } } @keyframes scale-easeInOutBounce { 0% { transform: scale(1); } 2%, 14%, 32% { transform: scale(0.99); } 4% { transform: scale(0.997); } 10% { transform: scale(0.97); } 22% { transform: scale(0.876); } 42% { transform: scale(0.597); } 50% { transform: scale(0.5); } 58% { transform: scale(0.403); } 68%, 86%, 98% { transform: scale(0.01); } 78% { transform: scale(0.124); } 90% { transform: scale(0.03); } 96% { transform: scale(0.003); } 100% { transform: scale(0); } } @keyframes translate-easeInOutBounce { 0% { transform: translateX(0%); } 2%, 14%, 32% { transform: translateX(-1%); } 4% { transform: translateX(-0.3%); } 10% { transform: translateX(-3%); } 22% { transform: translateX(-12.4%); } 42% { transform: translateX(-40.3%); } 50% { transform: translateX(-50%); } 58% { transform: translateX(-59.7%); } 68%, 86%, 98% { transform: translateX(-99%); } 78% { transform: translateX(-87.6%); } 90% { transform: translateX(-97%); } 96% { transform: translateX(-99.7%); } 100% { transform: translateX(-100%); } } @keyframes cursor-easeInOutBounce { 0% { top: 101%; color: var(--brand-color); } 2%, 14%, 32% { top: 100%; } 4% { top: 101%; } 10% { top: 98%; } 22% { top: 89%; color: var(--brand-color); } 42% { top: 63%; } 50% { top: 51%; } 58% { top: 39%; } 68%, 86%, 98% { top: 2%; } 78% { top: 13%; color: var(--second-color); } 90% { top: 4%; } 96% { top: 1%; } 100% { top: 1%; color: var(--second-color); } } ================================================ FILE: src/animation/easeInOutElastic.css ================================================ @keyframes opacity-easeInOutElastic { 0%, 16%, 22%, 36% { opacity: 1; } 4%, 8% { opacity: 0.95; } 28%, 32% { opacity: 0.9; } 70%, 72% { opacity: 0.1; } 90%, 92% { opacity: 0.05; } 76%, 86%, 96%, 100% { opacity: 0; } } @keyframes scale-easeInOutElastic { 0% { transform: scale(1); } 4%, 8% { transform: scale(0.999); } 18%, 20% { transform: scale(1.01); } 28%, 30% { transform: scale(0.97); } 38%, 40% { transform: scale(1.1); } 60%, 62% { transform: scale(-0.1); } 70%, 72% { transform: scale(0.03); } 80%, 82% { transform: scale(-0.01); } 90%, 92% { transform: scale(0.001); } 100% { transform: scale(0); } } @keyframes translate-easeInOutElastic { 0% { transform: translateX(0%); } 4%, 8% { transform: translateX(-0.1%); } 18%, 20% { transform: translateX(0.5%); } 28%, 30% { transform: translateX(-2.4%); } 38%, 40% { transform: translateX(10%); } 60%, 62% { transform: translateX(-110%); } 70%, 72% { transform: translateX(-97.6%); } 80%, 82% { transform: translateX(-100.5%); } 90%, 92% { transform: translateX(-99.9%); } 100% { transform: translateX(-100%); } } @keyframes cursor-easeInOutElastic { 0% { top: 101%; color: var(--brand-color); } 4%, 8% { top: 100%; } 18%, 20% { top: 102%; } 28%, 30% { top: 99%; } 38%, 40% { top: 113%; color: var(--brand-color); } 60%, 62% { top: -11%; } 70%, 72% { top: 3.3%; color: var(--second-color); } 80%, 82% { top: 0%; } 90%, 92% { top: 2%; } 100% { top: 1%; color: var(--second-color); } } ================================================ FILE: src/animation/easeOutBounce.css ================================================ @keyframes opacity-easeOutBounce { 0% { opacity: 1; } 12% { opacity: 0.891; } 24% { opacity: 0.564; } 36% { opacity: 0.02; } 54% { opacity: 0.25; } 74% { opacity: 0.016; } 82% { opacity: 0.0625; } 92% { opacity: 0.007; } 96% { opacity: 0.015; } 100% { opacity: 0; } } @keyframes scale-easeOutBounce { 0% { transform: scale(1); } 12% { transform: scale(0.891); } 24% { transform: scale(0.564); } 36% { transform: scale(0.02); } 54% { transform: scale(0.25); } 74% { transform: scale(0.016); } 82% { transform: scale(0.0625); } 92% { transform: scale(0.007); } 96% { transform: scale(0.015); } 100% { transform: scale(0); } } @keyframes translate-easeOutBounce { 0% { transform: translateX(0%); } 12% { transform: translateX(-10.89%); } 24% { transform: translateX(-43.56%); } 36% { transform: translateX(-98%); } 54% { transform: translateX(-75%); } 74% { transform: translateX(-98.4%); } 82% { transform: translateX(-93.75%); } 92% { transform: translateX(-99.3%); } 96% { transform: translateX(-98.5%); } 100% { transform: translateX(-100%); } } @keyframes cursor-easeOutBounce { 0% { top: 101%; color: var(--brand-color); } 12% { top: 90%; } 24% { top: 56%; } 36% { top: 3%; color: var(--main-text-color); } 54% { top: 25%; } 74% { top: 3%; } 82% { top: 7%; } 92% { top: 1%; } 96% { top: 3%; } 100% { top: 1%; color: var(--main-text-color); } } ================================================ FILE: src/animation/easeOutElastic.css ================================================ @keyframes opacity-easeOutElastic { 0% { opacity: 1; } 28% { opacity: 0.13; } 56% { opacity: 0.014; } 86%, 92% { opacity: 0.002; } 8%, 22%, 68%, 82%, 100% { opacity: 0; } } @keyframes scale-easeOutElastic { 0% { transform: scale(1); } 16% { transform: scale(-0.323); } 28% { transform: scale(0.131); } 44% { transform: scale(-0.046); } 59% { transform: scale(0.017); } 73% { transform: scale(-0.007); } 88% { transform: scale(0.002); } 100% { transform: scale(0); } } @keyframes translate-easeOutElastic { 0% { transform: translateX(0%); } 14% { transform: translateX(-137.1%); } 28% { transform: translateX(-86.9%); } 44% { transform: translateX(-104.6%); } 59% { transform: translateX(-98%); } 73% { transform: translateX(-100.8%); } 88% { transform: translateX(-99.8%); } 100% { transform: translateX(-100%); } } @keyframes cursor-easeOutElastic { 0% { top: 101%; color: var(--brand-color); } 16% { top: -31%; color: var(--main-text-color); } 28% { top: 14%; } 44% { top: -4%; } 59% { top: 2.6%; } 73% { top: 0.4%; } 88% { top: 1.2%; } 100% { top: 1%; color: var(--main-text-color); } } ================================================ FILE: src/animation/index.css ================================================ @import "./easeInElastic.css"; @import "./easeOutElastic.css"; @import "./easeInOutElastic.css"; @import "./easeInBounce.css"; @import "./easeOutBounce.css"; @import "./easeInOutBounce.css"; ================================================ FILE: src/button/button.css ================================================ .button { font-family: inherit; font-size: 100%; margin: 0; border: none; overflow: visible; text-transform: none; outline: none; height: auto; box-sizing: border-box; position: relative; background: var(--button-background-color); color: var(--brand-color-text); font-stretch: 100%; font-weight: 500; text-align: center; text-decoration: none; line-height: var(--line-height); padding: 1em 1.25em; display: inline-block; border-radius: 0; cursor: pointer; transition: var(--transition-time); box-shadow: 0 2px 8px var(--transparent-color-5); } .button::after { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; pointer-events: none; box-shadow: 0 0 1px 4px var(--brand-color); transition: var(--transition-time); opacity: 0; } .button:hover { background: var(--brand-darken-color); color: var(--brand-darken-color-text); } .button:focus { background: var(--brand-darken-color); color: var(--brand-darken-color-text); } .button:active { background: var(--brand-color); transition: none; } .button.focus-visible { box-shadow: none; } .button.focus-visible::after { opacity: 1; } .button--small { font-size: 14px; padding: 0.75em 1em; } ================================================ FILE: src/card/card.css ================================================ .card { position: relative; overflow: hidden; } .card__image { width: 100%; display: block; } .card__wrap { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; background: var(--card-overlay); color: var(--card-overlay-text); box-sizing: border-box; padding: 10px 15px; transition: var(--transition-card-time) linear; } .card__wrap--no-transition { transition: none; } .card__wrap--opacity { opacity: 0; } .card__wrap--scale { transform: scale(0); } .card__wrap--translate { transform: translateX(-100%); } ================================================ FILE: src/card/card.pug ================================================ mixin card(name, isTarget) .card img.card__image(src="./card/card.jpg" alt="") .card__wrap(data-target=(isTarget ? "true" : "false"))= name ================================================ FILE: src/card/card.ts ================================================ import { forNodeList } from "../helpers/forNodeList"; import { getTransitionTime } from "../helpers/getTransitionTime"; import { getElement, getElementsList } from "../helpers/getElement"; const cardTarget = getElement(".card__wrap[data-target=false]"); const cardTargetWithFunc = getElement(".card__wrap[data-target=true]"); const casesButtonsList = getElementsList(".cases__action"); const cardTargetClassList: { [key: string]: string } = { opacity: "card__wrap--opacity", scale: "card__wrap--scale", translate: "card__wrap--translate", }; const cardClassWithoutTransition = "card__wrap--no-transition"; let isReverse = false; let currentName: string; let currentFunc: string; let currentType: string; forNodeList(casesButtonsList, (button) => { button.addEventListener("click", () => { const newType = button.getAttribute("data-type"); setTransition(cardTarget, newType); if (currentName) { setAnimation(newType); } else { cardTargetWithFunc.style.transitionTimingFunction = currentFunc; setTransition(cardTargetWithFunc, newType); } currentType = newType; }); }); export function setFuncForCard(cssFunc: string, name: string): void { if (cssFunc === "no") { currentName = name; } else { currentName = null; currentFunc = cssFunc; } } export function clearTransition(): void { cardTarget.classList.add(cardClassWithoutTransition); cardTargetWithFunc.classList.add(cardClassWithoutTransition); cardTargetWithFunc.removeAttribute("style"); cardTarget.classList.remove( cardTargetClassList.opacity, cardTargetClassList.scale, cardTargetClassList.translate ); cardTargetWithFunc.classList.remove( cardTargetClassList.opacity, cardTargetClassList.scale, cardTargetClassList.translate ); requestAnimationFrame(() => { cardTarget.classList.remove(cardClassWithoutTransition); cardTargetWithFunc.classList.remove(cardClassWithoutTransition); }); } function setTransition(target: HTMLElement, newType: string): void { target.classList.add(cardClassWithoutTransition); if (newType !== currentType) { target.classList.remove(cardTargetClassList[currentType]); void target.offsetWidth; target.classList.remove(cardClassWithoutTransition); target.classList.add(cardTargetClassList[newType]); } else { void target.offsetWidth; target.classList.remove(cardClassWithoutTransition); target.classList.toggle(cardTargetClassList[newType]); } } function setAnimation(animationType: string): void { const time = getTransitionTime(cardTargetWithFunc); const animationName = `${animationType}-${currentName}`; const styles = window.getComputedStyle(cardTargetWithFunc); if (styles.animationName === animationName) { isReverse = !isReverse; } else { isReverse = false; } cardTargetWithFunc.style.animation = "none"; void cardTargetWithFunc.offsetWidth; cardTargetWithFunc.style.animation = ` ${animationName} ${time}ms both ${isReverse ? "reverse" : ""} linear `; } ================================================ FILE: src/case/case.css ================================================ .case { padding: calc(1.5 * var(--general-line-height)) calc(var(--general-line-height) / 2) 0; min-width: 200px; box-sizing: border-box; flex: 1 1 auto; } .case__title { padding: 0 0 calc(var(--general-line-height) / 2); } ================================================ FILE: src/case/case.pug ================================================ include ../card/card mixin case(name, isTarget) .case .case__title= `${name}:` +card(name, isTarget) ================================================ FILE: src/cases/cases.css ================================================ .cases {} .cases__title { font-size: 22px; line-height: calc(var(--line-height) - 0.2); margin: 0; padding: 0; } .cases__actions { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 calc(-0.25 * var(--general-line-height)); transition: 0.5s; } .cases__action { margin: calc(var(--general-line-height) / 2) calc(var(--general-line-height) / 4) 0; } .cases__list { display: flex; flex-wrap: wrap; margin: 0 calc(-0.5 * var(--general-line-height)); } ================================================ FILE: src/chart/chart.css ================================================ .chart { display: flex; max-width: 107px; text-decoration: none; height: 100%; min-height: 70px; } .chart:focus { box-shadow: none; } .chart__wrap { position: relative; } .chart__wrap--offset_top { height: 55px; margin-top: auto; } .chart__wrap--offset_bottom { height: 55px; } .chart__image { width: 100%; min-width: 50px; height: 100%; overflow: visible; display: block; margin: 0 auto; } .chart__explanations { opacity: 0; transition: var(--transition-time); } .chart--active .chart__explanations { opacity: 1; } .chart__axis { fill: none; stroke-width: 1px; stroke: var(--gray-lighten-color); } .chart__text { fill: var(--gray-lighten-color); font-size: 10px; } .chart__curve { fill: none; stroke-width: 3px; stroke-linecap: round; transition: var(--transition-time); transform: translate(1px, -1px); } .chart__wrap--offset_top .chart__curve, .chart__wrap--offset_bottom .chart__curve { stroke-width: 4px; } .chart__cursor { position: absolute; top: 100%; right: -17px; opacity: 0; will-change: top; transition: top 0s, color 0s, opacity 0s; transition-delay: 0s, 0s, 0s; transform: translateY(-7px); color: var(--brand-color); } .chart__cursor--func-in { color: var(--main-text-color); } .chart__cursor--func-out, .chart__cursor--func-in-out { color: var(--brand-color); } .chart__cursor::after { content: ''; display: block; width: 10px; height: 10px; border-radius: 0 50% 50% 50%; background: currentColor; transform: rotate(-45deg); } .chart--active .chart__cursor { opacity: 1; top: 1%; transition: top var(--transition-show-time), color var(--transition-show-time), opacity var(--transition-time); transition-delay: var(--transition-time), var(--transition-time), 0s; } .chart--active .chart__cursor--func-in, .chart--active .chart__cursor--func-in-out { color: var(--second-color); } .chart--active .chart__cursor--func-out { color: var(--main-text-color); } @media (max-width: 550px) { .chart { width: 100px; } } ================================================ FILE: src/code/code.css ================================================ .code__maths { padding-left: 25px; tab-size: 25px; display: inline-block; } ================================================ FILE: src/code/codeCss.pug ================================================ mixin codeCss() pre | #[span.u-color-second .block] { | #[span.u-color-second transition]: transform 0.6s #[span.u-color-brand.js-info-func]; | } ================================================ FILE: src/code/codeGradient.pug ================================================ mixin codeGradient pre | #[span.u-color-second .block] { | #[span.u-color-second background]: linear-gradient( | to bottom, | #1473e6, | #[span.u-color-brand.js-info-func], | #247b5e | ); | } ================================================ FILE: src/code/codeMaths.pug ================================================ mixin codeMaths() pre | #[span.u-color-second function #[span.u-color-brand.js-info-name]](x: number): number { | #[div.code__maths.js-info-maths] | } ================================================ FILE: src/code/codePostCss.pug ================================================ mixin codePostCss() pre | #[span.u-color-second .block] { | #[span.u-color-second transition]: transform 0.6s #[span.u-color-brand.js-info-name]; | } ================================================ FILE: src/columns/columns.css ================================================ .columns { box-sizing: border-box; padding: 0.25rem 0 0; transition: var(--transition-time); } .columns--hide { position: absolute; left: 0; right: 0; opacity: 0; visibility: hidden; } .columns__wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; margin: 0 -15px; } .columns__group { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; width: calc(50% - var(--general-line-height)); box-sizing: border-box; margin: 0 calc(var(--general-line-height) / 2) var(--general-line-height); } @media (max-width: 900px) { .columns__group { width: 100%; text-align: center; } } @media (max-width: 550px) { .columns__wrap { margin: 0 -0.3125rem; } .columns__group { margin: 0 0 30px; } } ================================================ FILE: src/columns/columns.pug ================================================ include ../function/function mixin columns - var easings = all_easings.reduce(function(resultArray, item, index) { var chunkIndex = Math.floor(index / 3); if(!resultArray[chunkIndex]) { resultArray[chunkIndex] = []; } resultArray[chunkIndex].push(item); return resultArray; }, []); .columns .columns__wrap each group in easings .columns__group each item, index in group +function(item, index) ================================================ FILE: src/core/core.css ================================================ html { line-height: var(--line-height); text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: system-ui, sans-serif; font-size: 100%; color: var(--main-text-color); } body { line-height: var(--line-height); position: relative; box-sizing: border-box; background: var(--main-background); margin: 0; } a { color: var(--brand-color); text-decoration: none; transition: var(--transition-time); outline: none; border-bottom: 1px solid; } a:hover, a:focus { color: var(--brand-darken-color); } a:active { color: var(--brand-color); transition: none; } a.focus-visible { box-shadow: 0 0 1px 4px var(--brand-color); } a.focus-visible { box-shadow: 0 0 1px 4px var(--brand-color); } pre { font-family: var(--code-fonts); margin: 0; tab-size: 25px; } ================================================ FILE: src/details/details.css ================================================ .details { margin: calc(var(--general-line-height) / 2) 0 0; } .details__summary { outline: none; user-select: none; cursor: pointer; position: relative; } .details__summary::after { content: ''; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; pointer-events: none; box-shadow: 0 0 1px 4px var(--brand-color); transition: var(--transition-time); opacity: 0; } .details__summary.focus-visible::after { opacity: 1; } .details__content { margin: calc(var(--general-line-height) / 2) 0 var(--general-line-height); } .details__code { outline: none; width: 100%; max-height: 250px; display: block; box-sizing: border-box; padding: 0 var(--general-line-height); transition: var(--transition-time); direction: ltr; white-space: pre; word-wrap: break-word; font-family: var(--code-fonts); font-size: 13px; line-height: var(--line-height-code); tab-size : 25px; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gray-color); position: relative; z-index: 1; background-color: var(--second-background); background-repeat: no-repeat; background-image: radial-gradient(farthest-side at 50% 0, var(--transparent-color-20), var(--transparent-color)), radial-gradient(farthest-side at 50% 100%, var(--transparent-color-20), var(--transparent-color)); background-position: 0 0, 0 100%; background-size: 100% 10px; } .details__code::before, .details__code::after { content: ""; position: relative; z-index: -1; display: block; margin: 0 0 -15px; height: 30px; background: linear-gradient(to bottom, var(--second-background), var(--second-background) 30%, var(--second-background-transparent)); } .details__code::after { margin: -15px 0 0; background: linear-gradient(to bottom, var(--second-background-transparent), var(--second-background) 70%, var(--second-background)); } ================================================ FILE: src/details/details.pug ================================================ include ../example-copy/example-copy mixin details(name, type) details.details summary.details__summary= name .details__content +example-copy .details__code(data-type=type) block ================================================ FILE: src/easings/easings.ts ================================================ import keyframes from "./keyframes"; import easingsFunctions from "./easingsFunctions"; import roundTo2DecimalPlaces from "../helpers/roundTo2DecimalPlaces"; export const enum keyframeTypes { opacity = "opacity", scale = "scale", translate = "translate", } export function generateComplexEasings( name: string, property: keyframeTypes ): string { if (name in keyframes) { const keyframeList = keyframes[name] .map((item: number) => { const keyframeValue = easingsFunctions[name](item / 100); return ( `\t${item}% {\n` + `\t\t${getDeclaration(property, keyframeValue)}\n` + `\t}\n\n` ); }) .join(""); return ( `` + `@keyframes ${property}-${name} {\n` + keyframeList + `}` ); } return ""; } function getDeclaration(property: keyframeTypes, value: number): string { const roundValue = roundTo2DecimalPlaces(1 - value); switch (property) { case keyframeTypes.opacity: return `opacity: ${roundValue};`; case keyframeTypes.scale: return `transform: scale(${roundValue});`; case keyframeTypes.translate: return `transform: translateX(${roundTo2DecimalPlaces(-100 * value)}%);`; default: return ""; } } ================================================ FILE: src/easings/easingsFunctions.ts ================================================ type EasingFunction = (progress: number) => number; interface EasingDictionary { [easing: string]: EasingFunction; } const pow = Math.pow; const sqrt = Math.sqrt; const sin = Math.sin; const cos = Math.cos; const PI = Math.PI; const c1 = 1.70158; const c2 = c1 * 1.525; const c3 = c1 + 1; const c4 = (2 * PI) / 3; const c5 = (2 * PI) / 4.5; const bounceOut: EasingFunction = function (x) { const n1 = 7.5625; const d1 = 2.75; if (x < 1 / d1) { return n1 * x * x; } else if (x < 2 / d1) { return n1 * (x -= 1.5 / d1) * x + 0.75; } else if (x < 2.5 / d1) { return n1 * (x -= 2.25 / d1) * x + 0.9375; } else { return n1 * (x -= 2.625 / d1) * x + 0.984375; } }; const easingsFunctions: EasingDictionary = { linear: (x) => x, easeInQuad: function (x) { return x * x; }, easeOutQuad: function (x) { return 1 - (1 - x) * (1 - x); }, easeInOutQuad: function (x) { return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2; }, easeInCubic: function (x) { return x * x * x; }, easeOutCubic: function (x) { return 1 - pow(1 - x, 3); }, easeInOutCubic: function (x) { return x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2; }, easeInQuart: function (x) { return x * x * x * x; }, easeOutQuart: function (x) { return 1 - pow(1 - x, 4); }, easeInOutQuart: function (x) { return x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2; }, easeInQuint: function (x) { return x * x * x * x * x; }, easeOutQuint: function (x) { return 1 - pow(1 - x, 5); }, easeInOutQuint: function (x) { return x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2; }, easeInSine: function (x) { return 1 - cos((x * PI) / 2); }, easeOutSine: function (x) { return sin((x * PI) / 2); }, easeInOutSine: function (x) { return -(cos(PI * x) - 1) / 2; }, easeInExpo: function (x) { return x === 0 ? 0 : pow(2, 10 * x - 10); }, easeOutExpo: function (x) { return x === 1 ? 1 : 1 - pow(2, -10 * x); }, easeInOutExpo: function (x) { return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2; }, easeInCirc: function (x) { return 1 - sqrt(1 - pow(x, 2)); }, easeOutCirc: function (x) { return sqrt(1 - pow(x - 1, 2)); }, easeInOutCirc: function (x) { return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2; }, easeInBack: function (x) { return c3 * x * x * x - c1 * x * x; }, easeOutBack: function (x) { return 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2); }, easeInOutBack: function (x) { return x < 0.5 ? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2 : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2; }, easeInElastic: function (x) { return x === 0 ? 0 : x === 1 ? 1 : -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4); }, easeOutElastic: function (x) { return x === 0 ? 0 : x === 1 ? 1 : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1; }, easeInOutElastic: function (x) { return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2 : (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1; }, easeInBounce: function (x) { return 1 - bounceOut(1 - x); }, easeOutBounce: bounceOut, easeInOutBounce: function (x) { return x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2; }, }; export default easingsFunctions; ================================================ FILE: src/easings/keyframes.ts ================================================ /* eslint-disable prettier/prettier */ const keyframes: {[key: string]: number[]} = { easeInElastic: [0, 4, 8, 14, 18, 26, 28, 40, 42, 56, 58, 72, 86, 100], easeOutElastic: [0, 16, 28, 44, 59, 73, 88, 100], easeInOutElastic: [0, 4, 8, 18, 20, 28, 30, 38, 40, 60, 62, 70, 72, 80, 82, 90, 92, 100], easeInBounce: [0, 4, 8, 18, 26, 46, 64, 76, 88, 100], easeOutBounce: [0, 12, 24, 36, 54, 74, 82, 92, 96, 100], easeInOutBounce: [0, 2, 4, 10, 14, 22, 32, 42, 50, 58, 68, 78, 86, 90, 96, 98, 100], }; export default keyframes; ================================================ FILE: src/easings.yml ================================================ - name: easeInSine css: cubic-bezier(0.12, 0, 0.39, 0) maths: |-2 return 1 - Math.cos((x * Math.PI) / 2); - name: easeOutSine css: cubic-bezier(0.61, 1, 0.88, 1) maths: |-2 return Math.sin((x * Math.PI) / 2); - name: easeInOutSine css: cubic-bezier(0.37, 0, 0.63, 1) maths: |-2 return -(Math.cos(Math.PI * x) - 1) / 2; - name: easeInQuad css: cubic-bezier(0.11, 0, 0.5, 0) maths: |-2 return x * x; - name: easeOutQuad css: cubic-bezier(0.5, 1, 0.89, 1) maths: |-2 return 1 - (1 - x) * (1 - x); - name: easeInOutQuad css: cubic-bezier(0.45, 0, 0.55, 1) maths: |-2 return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; - name: easeInCubic css: cubic-bezier(0.32, 0, 0.67, 0) maths: |-2 return x * x * x; - name: easeOutCubic css: cubic-bezier(0.33, 1, 0.68, 1) maths: |-2 return 1 - Math.pow(1 - x, 3); - name: easeInOutCubic css: cubic-bezier(0.65, 0, 0.35, 1) maths: |-2 return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; - name: easeInQuart css: cubic-bezier(0.5, 0, 0.75, 0) maths: |-2 return x * x * x * x; - name: easeOutQuart css: cubic-bezier(0.25, 1, 0.5, 1) maths: |-2 return 1 - Math.pow(1 - x, 4); - name: easeInOutQuart css: cubic-bezier(0.76, 0, 0.24, 1) maths: |-2 return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2; - name: easeInQuint css: cubic-bezier(0.64, 0, 0.78, 0) maths: |-2 return x * x * x * x * x; - name: easeOutQuint css: cubic-bezier(0.22, 1, 0.36, 1) maths: |-2 return 1 - Math.pow(1 - x, 5); - name: easeInOutQuint css: cubic-bezier(0.83, 0, 0.17, 1) maths: |-2 return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2; - name: easeInExpo css: cubic-bezier(0.7, 0, 0.84, 0) maths: |-2 return x === 0 ? 0 : Math.pow(2, 10 * x - 10); - name: easeOutExpo css: cubic-bezier(0.16, 1, 0.3, 1) maths: |-2 return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); - name: easeInOutExpo css: cubic-bezier(0.87, 0, 0.13, 1) maths: |-2 return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2; - name: easeInCirc css: cubic-bezier(0.55, 0, 1, 0.45) maths: |-2 return 1 - Math.sqrt(1 - Math.pow(x, 2)); - name: easeOutCirc css: cubic-bezier(0, 0.55, 0.45, 1) maths: |-2 return Math.sqrt(1 - Math.pow(x - 1, 2)); - name: easeInOutCirc css: cubic-bezier(0.85, 0, 0.15, 1) maths: |-2 return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2; - name: easeInBack css: cubic-bezier(0.36, 0, 0.66, -0.56) maths: |-2 const c1 = 1.70158; const c3 = c1 + 1; return c3 * x * x * x - c1 * x * x; - name: easeOutBack css: cubic-bezier(0.34, 1.56, 0.64, 1) maths: |-2 const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2); - name: easeInOutBack css: cubic-bezier(0.68, -0.6, 0.32, 1.6) maths: |-2 const c1 = 1.70158; const c2 = c1 * 1.525; return x < 0.5 ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2; - name: easeInElastic css: no offset: bottom maths: |-2 const c4 = (2 * Math.PI) / 3; return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4); - name: easeOutElastic css: no offset: top maths: |-2 const c4 = (2 * Math.PI) / 3; return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1; - name: easeInOutElastic css: no maths: |-2 const c5 = (2 * Math.PI) / 4.5; return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : (Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1; - name: easeInBounce css: no maths: |-2 return 1 - easeOutBounce(1 - x); - name: easeOutBounce css: no maths: |-2 const n1 = 7.5625; const d1 = 2.75; if (x < 1 / d1) { return n1 * x * x; } else if (x < 2 / d1) { return n1 * (x -= 1.5 / d1) * x + 0.75; } else if (x < 2.5 / d1) { return n1 * (x -= 2.25 / d1) * x + 0.9375; } else { return n1 * (x -= 2.625 / d1) * x + 0.984375; } - name: easeInOutBounce css: no maths: |-2 return x < 0.5 ? (1 - easeOutBounce(1 - 2 * x)) / 2 : (1 + easeOutBounce(2 * x - 1)) / 2; ================================================ FILE: src/error/error.css ================================================ .error { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } .error__wrap { width: 100%; max-width: 500px; box-sizing: border-box; padding: 15px; margin: 0 auto; text-align: center; color: var(--gray-color); } .error__image { margin: 0 0 30px; } .error__image::after { content: ''; display: block; margin: 0 auto; height: 16px; width: 125px; border-radius: 50%; background: currentColor; opacity: 0.1; animation: ghostShadow 1.5s both infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .error__ghost { display: block; margin: 0 auto 40px; fill: none; stroke: currentColor; stroke-width: 3px; width: 162px; height: 187px; animation: ghost 1.5s both infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .error__title { font-size: 48px; line-height: 1; font-weight: 300; } .error__text { } @keyframes ghost { 0%, 5% { transform: translateY(0); } 95%, 100% { transform: translateY(-20px); } } @keyframes ghostShadow { 0%, 5% { transform: scale(1); } 95%, 100% { transform: scale(0.7); } } ================================================ FILE: src/error/error.pug ================================================ mixin error main.error .error__wrap .error__image svg.error__ghost(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 187") path(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") .error__title 404 .error__text Page not found a.error__link(href="/") Back to our site ================================================ FILE: src/example/example.css ================================================ .example { font-size: 1rem; } .example + .example { padding: var(--general-line-height) 0 0; } .example__title { font-size: 26px; font-weight: 500; line-height: calc(2 * var(--general-line-height)); margin: 0; padding: 0; } .example__code { padding: calc(var(--general-line-height) / 2) 0; margin: -2px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; direction: ltr; word-wrap: break-word; font-family: var(--code-fonts); font-size: 13px; line-height: var(--line-height-code); } .example__gradient { max-width: 100%; width: 300px; height: 200px; display: none; margin: 0 0 calc(var(--general-line-height) / 2) 0; } @media (max-width: 550px) { .example__title { font-weight: 400; font-size: 22px; } } ================================================ FILE: src/example-copy/example-copy.css ================================================ .example-copy { position: relative; } .example-copy__button { position: absolute; top: 10px; right: 10px; z-index: 2; opacity: 0; visibility: hidden; transition: var(--transition-time); } .example-copy:hover .example-copy__button { opacity: 1; visibility: visible; } .example-copy__icon { display: block; width: 15px; height: 15px; fill: currentColor; transition: opacity var(--transition-small-time); } .example-copy__icon-action {} .example-copy__icon-done { position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px); } .example-copy__icon-hidden { opacity: 0; } .example-copy__code { display: block; } ================================================ FILE: src/example-copy/example-copy.pug ================================================ mixin example-copy .example-copy button.example-copy__button.button.button--small svg.example-copy__icon.example-copy__icon-action(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink") use(xlink:href="#copy") svg.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") use(xlink:href="#done") .example-copy__code block ================================================ FILE: src/example-copy/example-copy.ts ================================================ import { selectorCopyButton, selectorCopyCode } from "../helpers/constants"; import { getElement, getElementsList } from "../helpers/getElement"; import { forNodeList } from "../helpers/forNodeList"; import { copyTextFromElement } from "../helpers/copyText"; const selectorIconAction = ".example-copy__icon-action"; const selectorIconDone = ".example-copy__icon-done"; const classIconHidden = "example-copy__icon-hidden"; const list = getElementsList(selectorCopyButton); forNodeList(list, (item) => { item.addEventListener("click", () => { const code = getElement(selectorCopyCode, item.parentElement); copyTextFromElement(code); const iconAction = getElement(selectorIconAction, item); const iconDone = getElement(selectorIconDone, item); iconAction.classList.add(classIconHidden); iconDone.classList.remove(classIconHidden); setTimeout(() => { iconAction.classList.remove(classIconHidden); iconDone.classList.add(classIconHidden); }, 1500); }); }); ================================================ FILE: src/external-link/external-link.pug ================================================ mixin external-link(link) a(href=link rel="noopener noreferrer" target="_blank")&attributes(attributes) block ================================================ FILE: src/footer/footer.css ================================================ .footer { box-sizing: border-box; width: 100%; margin: 0 auto; max-width: 1050px; padding: 20px 15px 15px; } .footer__group { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; } .footer__group::before { content: ""; order: 1; flex: 3 1 auto; } .footer__copyright { order: 2; margin: 0 auto 5px; text-align: center; } .footer__lang { order: -1; } .footer__list { margin: 0 0 5px 20px; } [dir="rtl"] .footer__list { margin: 0 20px 5px 0; } .footer__list select { font-size: 0.85rem; } .footer__link { color: var(--footer-link-color); } ================================================ FILE: src/footer/footer.pug ================================================ include ../external-link/external-link mixin footer .footer .footer__group .footer__copyright +external-link("https://sitnik.ru/").footer__link {{ authors.sitnik }} != ` {{ authors.separator }} ` +external-link("https://solovev.one/").footer__link {{ authors.solovev }} .footer__list select.footer__theme(aria-label="Select theme") option(value="auto") {{ theme.auto }} option(value="light") {{ theme.light }} option(value="dark") {{ theme.dark }} .footer__lang.footer__list ul(aria-label="Select language"). {{#langList}} {{{.}}} {{/langList}} ================================================ FILE: src/footer/footer.ts ================================================ import { getElement, getElementsList } from "../helpers/getElement"; const selectorFooterLang = ".footer__lang"; const selectorLangList = `${selectorFooterLang} ul`; const selectorLangItem = `${selectorFooterLang} li`; const footerLangList = getElement(selectorLangList); const footerListItems = getElementsList( `${selectorLangItem} a, ${selectorLangItem} span` ); const selectElement = document.createElement("select"); selectElement.onchange = changeLang; const label = footerLangList.getAttribute("aria-label"); selectElement.setAttribute("aria-label", label); footerListItems.forEach((langLink) => { const option = document.createElement("option"); const linkHref = langLink.getAttribute("href"); option.value = linkHref || window.location.pathname; option.innerText = langLink.innerText; if (langLink.tagName === "SPAN") { option.setAttribute("selected", "selected"); } selectElement.appendChild(option); }); const footerLang = getElement(selectorFooterLang); footerLang.appendChild(selectElement); footerLang.removeChild(getElement(`${selectorFooterLang} ul`)); function changeLang(event: any): void { if (/^\/easings.net/.test(window.location.pathname)) { window.location.pathname = `/easings.net${event.target.value}`; } else { window.location.pathname = event.target.value; } } ================================================ FILE: src/function/function.css ================================================ .function { width: calc(100%/3 - 10px); max-width: 160px; box-sizing: border-box; padding: 15px 15px 8px; margin: 0 5px 10px; transition: var(--transition-time); position: relative; outline: none; display: flex; flex-direction: column; background: var(--second-background); box-shadow: 0 2px 8px var(--function-shadow); } .function::after { content: ''; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; pointer-events: none; box-shadow: 0 0 1px 4px var(--brand-color); transition: var(--transition-time); opacity: 0; } .function:active { box-shadow: 0 2px 8px var(--function-shadow); transition: none; } .function.focus-visible::after, .function--focus::after { opacity: 1; } .function--active { z-index: 1; box-shadow: 0 2px 8px var(--function-shadow-active); } .function__chart { margin: 0 auto; outline: none; position: relative; width: 100%; transition: none; border: none; } .function__chart::after { display: none; } .function__chart:active { transform: none; transition: none; } .function__caption { padding: 0.75em 0 0; font-size: 1rem; text-align: center; transition: var(--transition-time); margin: auto 0 0; position: relative; z-index: 1; } @media (max-width: 1050px) { .function { min-width: 140px; } .function__caption { font-size: 14px; } } @media (max-width: 450px) { .function { width: auto; } } ================================================ FILE: src/function/function.pug ================================================ include ../math/math mixin function(item, index) - var gradient = 'inOut'; if (index === 0) gradient = 'in'; if (index === 1) gradient = 'out'; var cursorClass = 'chart__cursor--func-in-out'; if (index === 0) cursorClass = 'chart__cursor--func-in'; if (index === 1) cursorClass = 'chart__cursor--func-out'; var radioScale = 1; var chartWidth = 125 * radioScale; var chartHeight = 85 * radioScale; var x1, y1, x2, y2; if (item.css !== "no") { var points = /([-\d.]+), ([-\d.]+), ([-\d.]+), ([-\d.]+)/.exec(item.css); x1 = (parseFloat(points[1]) * chartWidth).toFixed(3); y1 = ((1 - parseFloat(points[2])) * chartHeight).toFixed(3); x2 = (parseFloat(points[3]) * chartWidth).toFixed(3); y2 = ((1 - parseFloat(points[4])) * chartHeight).toFixed(3); } var className = ""; if (item.offset === "top") className = "chart__wrap--offset_top"; if (item.offset === "bottom") className = "chart__wrap--offset_bottom"; .function(id=(`func-${item.name}`) data-name=item.name data-func=item.css data-maths=item.maths data-offset=item.offset) a.function__chart.chart(href=`#${item.name}`) .chart__wrap(class=className) svg.chart__image(viewBox=(`0 0 ${chartWidth} ${chartHeight}`) xmlns="http://www.w3.org/2000/svg") g.chart__explanations path.chart__axis(d=(`M1 0V${chartHeight - 1}H${chartWidth}`) fill="none") text.chart__text(x="4" y="8") x text.chart__text(x=(chartWidth - 3) y=(chartHeight - 5) text-anchor="end") t if item.css !== "no" path.chart__curve(d=(`M1 ${chartHeight-1}C${x1} ${y1} ${x2} ${y2} ${chartWidth-1} 1`) fill="none" stroke=(`url(#${gradient})`)) else path.chart__curve(fill="none" stroke=(`url(#${gradient})`) d=(`M1 ${chartHeight - 1} L${getEasing(item.name, chartWidth, chartHeight)}`)) .chart__cursor(style=`${item.css !== "no" ? `transition-timing-function:${item.css}` : ''}` class=cursorClass) .function__caption= item.name ================================================ FILE: src/function/function.ts ================================================ import { getElement, getElementsList } from "../helpers/getElement"; import { forNodeList } from "../helpers/forNodeList"; const listFunction = getElementsList(".function"); const classFunctionActive = "function--active"; const classFunctionFocus = "function--focus"; const classChartActive = "chart--active"; const selectorChart = ".function__chart"; const selectorCursor = ".chart__cursor"; const cursorTransitionTime = 1500; if (listFunction) { forNodeList(listFunction, (item, index) => { const chart = getElement(selectorChart, item); const cursor = getElement(selectorCursor, item); const animationName = item.getAttribute("data-name"); const cssFunc = item.getAttribute("data-func"); item.addEventListener("mouseenter", () => { forNodeList(listFunction, (other, otherIndex) => { if (otherIndex !== index) { other.classList.remove(classFunctionFocus); getElement(selectorChart, other).classList.remove(classChartActive); getElement(selectorCursor, other).style.animation = ""; } }); item.classList.add(classFunctionActive); chart.classList.add(classChartActive); if (cssFunc === "no") { cursor.style.animation = `${cursorTransitionTime}ms cursor-${animationName} both 0.2s linear`; } }); item.addEventListener("mouseleave", () => { item.classList.remove(classFunctionActive); chart.classList.remove(classChartActive); cursor.style.animation = ""; }); chart.addEventListener("focus", () => { forNodeList(listFunction, (other, otherIndex) => { if (otherIndex !== index) { other.classList.remove(classFunctionFocus); getElement(selectorChart, other).classList.remove(classChartActive); getElement(selectorCursor, other).style.animation = ""; } }); chart.classList.add(classChartActive); if (cssFunc === "no") { cursor.style.animation = `${cursorTransitionTime}ms cursor-${animationName} both 0.2s linear`; } }); chart.addEventListener("blur", () => { item.classList.remove(classFunctionFocus, classFunctionActive); chart.classList.remove(classChartActive); cursor.style.animation = ""; }); item.addEventListener("keyup", (event) => { if ( event.key.toLowerCase() === "tab" || event.code.toLowerCase() === "tab" ) { item.classList.add(classFunctionFocus); } }); item.addEventListener("keydown", (event) => { if ( event.key.toLowerCase() === "tab" || event.code.toLowerCase() === "tab" ) { item.classList.remove(classFunctionFocus); } }); }); } ================================================ FILE: src/gradient/gradient.ts ================================================ import { color1, color2, selectorGradient } from "../helpers/constants"; import { getElement } from "../helpers/getElement"; import { mixColors } from "../helpers/mixColors"; import easingsFunctions from "../easings/easingsFunctions"; const gradient = getElement(selectorGradient); export function setGradient(funcName: string, points: number[]): void { if (points.length !== 4 || !(funcName in easingsFunctions)) { return; } const colors: string[] = []; for (let i = 0; i <= 25; i++) { const bland = easingsFunctions[funcName](i / 25); const color = mixColors(color1, color2, bland); colors.push(`${color} ${i * 4}%`); } gradient.style.display = "block"; gradient.style.backgroundImage = `linear-gradient( to bottom, ${colors.join(", ")} )`; } export function hideGradient(): void { gradient.removeAttribute("style"); } ================================================ FILE: src/header/header.css ================================================ .header { padding: calc(var(--general-line-height) / 2) 0; display: flex; align-items: flex-start; } .header__definition { width: 100%; max-width: 900px; padding: 0 calc(2 * var(--general-line-height)) 0 0; } [dir="rtl"] .header__definition { padding: 0 0 0 calc(2 * var(--general-line-height)); } .header__definition p { margin: 0; padding: 0 0 calc(var(--general-line-height) / 2); } .header__opensource { flex: 0 0 auto; } @media (max-width: 900px) { .header__definition.header__definition { padding: 0; } .header__opensource { display: none; } } ================================================ FILE: src/header/header.pug ================================================ include ../external-link/external-link mixin header .header .header__definition {{{ about }}} .header__opensource.translate(class="{{#opensource.translate}}translate--with-background{{/opensource.translate}}") +external-link("https://github.com/ai/easings.net").button span.icon svg.icon__image(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24") path(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") != ` {{ opensource.title }}` | {{#opensource.translate}} |
    {{ opensource.translate }}
    | {{/opensource.translate}} ================================================ FILE: src/helpers/constants.ts ================================================ export const noTimingFunction = "no"; export const selectorInfo = ".info"; export const selectorInfoChart = ".info-chart"; export const selectorSimpleInfo = ".js-info-simple"; export const selectorComplexInfo = ".js-info-complex"; export const selectorDetails = ".details"; export const selectorCode = ".details__code"; export const selectorComplexKeyframeScale = `${selectorCode}[data-type=scale]`; export const selectorComplexKeyframeOpacity = `${selectorCode}[data-type=opacity]`; export const selectorComplexKeyframeTranslate = `${selectorCode}[data-type=translate]`; export const selectorGradient = ".example__gradient"; export const selectorCopyButton = ".example-copy__button"; export const selectorCopyCode = ".example-copy__code"; export const infoChartOffsetTopClassName = "info-chart--offset_top"; export const color1 = "#1473e6"; export const color2 = "#247b5e"; ================================================ FILE: src/helpers/copyText.ts ================================================ export function copyTextFromElement(element: HTMLElement): void { const selection = document.createRange(); selection.selectNode(element); window.getSelection().removeAllRanges(); window.getSelection().addRange(selection); document.execCommand("copy"); window.getSelection().removeAllRanges(); } ================================================ FILE: src/helpers/forNodeList.ts ================================================ /** * Call function for each NodeList */ export function forNodeList( elements: NodeList, callback: (item: HTMLElement, index: number) => void ): void { Array.prototype.slice.call(elements).forEach(callback); } ================================================ FILE: src/helpers/getElement.ts ================================================ /** * Get DOM Element * @param selector {string} * @param context {Document|HTMLElement} * @return {HTMLElement} */ export function getElement( selector: string, context: Document | HTMLElement = document ): T { return context.querySelector(selector); } /** * Get DOM Elements * @param selector {string} * @param context {Document|HTMLElement} * @return {NodeList} */ export function getElementsList( selector: string, context: Document | HTMLElement = document ): NodeListOf { return context.querySelectorAll(selector); } ================================================ FILE: src/helpers/getElementPosition.ts ================================================ export interface ElementPosition { height: number; width: number; x: number; y: number; } /** * Get element position * @param element {HTMLElement} * @return {{x: number, width: number, y: number, height: number}} */ export function getElementPosition(element: HTMLElement): ElementPosition { const position = element.getBoundingClientRect(); return { height: position.height, width: position.width, x: position.left + window.pageXOffset, y: position.top + window.pageYOffset, }; } ================================================ FILE: src/helpers/getTransitionTime.ts ================================================ /** * Computing transition time for the element * @param element {Element} * @return {number} */ export function getTransitionTime(element: Element): number { const style = window.getComputedStyle(element); const transitionDurationString = /([\d.]+m*s)/i.exec( style.transitionDuration ); const transitionDuration = parseFloat(transitionDurationString[1]); const ratioTime = transitionDurationString[1].indexOf("ms") > -1 ? 1 : 1000; return transitionDuration * ratioTime; } ================================================ FILE: src/helpers/linearInterpolation.ts ================================================ /** * Linear interpolation * @param y1 {number} * @param y2 {number} * @param x {number} * @return {number} */ export function linearInterpolation(y1: number, y2: number, x: number): number { return Math.round(x * (y2 - y1) + y1); } ================================================ FILE: src/helpers/mixColors.ts ================================================ import { linearInterpolation } from "./linearInterpolation"; /** * Mix 2 colors * @param color1 {string} - hex color * @param color2 {string} - hex color * @param blend {number} - between 0 and 1 * @return {string} - hex color */ export function mixColors( color1: string, color2: string, blend: number ): string { if (color1.length !== 7 || color2.length !== 7) { return ""; } const color1RGB: number[] = []; const color2RGB: number[] = []; const colorRGB: number[] = []; color1.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i).forEach((item) => { if (item.length === 2) { const color = parseInt(item, 16); color1RGB.push(color); } }); color2.match(/#*([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i).forEach((item) => { if (item.length === 2) { const color = parseInt(item, 16); color2RGB.push(color); } }); color1RGB.forEach((c1, index) => { const mixedColor = linearInterpolation(c1, color2RGB[index], blend); colorRGB.push(mixedColor); }); const colorResult = colorRGB .map((item) => { let hex = item.toString(16); if (hex.length === 0) { hex = "00"; } else if (hex.length === 1) { hex = `0${hex}`; } return hex; }) .join(""); return `#${colorResult}`; } ================================================ FILE: src/helpers/parseStringOfFourNumbers.ts ================================================ /** * Parse string of four numbers (example: viewBox) * @param stringOfFourNumbers {string} * @return {number[]} */ export function parseStringOfFourNumbers( stringOfFourNumbers: string ): number[] { const points = stringOfFourNumbers.match(/(-*[.\d]+)/g); if (!points || points.length !== 4) { return []; } return [ parseFloat(points[0]), parseFloat(points[1]), parseFloat(points[2]), parseFloat(points[3]), ]; } ================================================ FILE: src/helpers/roundTo2DecimalPlaces.ts ================================================ /** * Round to 2 decimal places * @param decimal {number} * @return {number} */ function roundTo2DecimalPlaces(decimal: number): number { return Math.round(decimal * 100) / 100; } export default roundTo2DecimalPlaces; ================================================ FILE: src/icon/icon.css ================================================ .icon { height: 1em; vertical-align: middle; transform: translateY(-10%); display: inline-flex; align-items: center; } .icon__image { flex: 0 0 auto; width: 24px; height: 24px; display: block; fill: currentColor; } .icon__image--small { width: 16px; height: 16px; } ================================================ FILE: src/index.css ================================================ @import "./variables/variables.css"; @import "./core/core.css"; @import "./utils/utils.css"; @import "./layout/layout.css"; @import "./button/button.css"; @import "./icon/icon.css"; @import "./header/header.css"; @import "./translate/translate.css"; @import "./footer/footer.css"; @import "./columns/columns.css"; @import "./info/info.css"; @import "./info-chart/info-chart.css"; @import "./function/function.css"; @import "./code/code.css"; @import "./chart/chart.css"; @import "./example/example.css"; @import "./example-copy/example-copy.css"; @import "./cases/cases.css"; @import "./case/case.css"; @import "./card/card.css"; @import "./details/details.css"; @import "./overlay/overlay.css"; ================================================ FILE: src/index.pug ================================================ include header/header include footer/footer include columns/columns include info/info include overlay/overlay doctype html html(lang="{{ lang_code }}" dir="{{ dir }}") head meta(charset="utf-8") meta(name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover") meta(http-equiv="x-ua-compatible" content="ie=edge") | {{{ redirect_script }}} title {{ title }} meta(content="{{ description }}" name="description") meta(name="theme-color" content="#1473e6") link(rel="manifest" href="./manifest.webmanifest") link(rel="icon" type="image/png" href="./icons/96.png") link(rel="mask-icon" href="./icons/mask.svg" color="#1473e6" sizes="any") meta(property="og:url" content="http://easings.net/") meta(property="og:image" content="./icons/192.png") meta(property="og:description" content="{{ share }}") link(href="./index.css" rel="stylesheet") body .layout svg.layout__gradients-curve(xmlns="http://www.w3.org/2000/svg" width="0" height="0") - var colorBase = 'var(--main-text-color)'; var colorStart = 'var(--brand-color)'; var colorEnd = 'var(--second-color)'; defs symbol#copy(viewBox="0 0 561 561") path(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") symbol#done(viewBox="0 0 512 512") path(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") linearGradient#in(x1="0%" y1="100%" x2="100%" y2="0%") stop(offset="0%" stop-color=colorBase) stop(offset="50%" stop-color=colorBase) stop(offset="70%" stop-color=colorEnd) stop(offset="100%" stop-color=colorEnd) linearGradient#out(x1="0%" y1="100%" x2="100%" y2="0%") stop(offset="0%" stop-color=colorStart) stop(offset="30%" stop-color=colorStart) stop(offset="50%" stop-color=colorBase) stop(offset="100%" stop-color=colorBase) linearGradient#inOut(x1="0%" y1="100%" x2="100%" y2="0%") stop(offset="0%" stop-color=colorStart) stop(offset="20%" stop-color=colorStart) stop(offset="80%" stop-color=colorEnd) stop(offset="100%" stop-color=colorEnd) h1.layout__title {{ title }} .layout__wrap +header .layout__content +columns +info +overlay +footer script(src='./index.ts' async) link(href="./keyframes.css" rel="stylesheet") | {{{ service_worker }}} ================================================ FILE: src/index.ts ================================================ import "focus-visible"; import "./navigation/navigation"; import "./function/function"; import "./example-copy/example-copy"; import "./footer/footer"; import "./theme/theme"; ================================================ FILE: src/info/info.css ================================================ .info { opacity: 0; visibility: hidden; transition: var(--transition-time); display: none; position: relative; z-index: 2; margin: 0 0 var(--general-line-height); } .info--evident { opacity: 1; visibility: visible; } .info__header { margin: 0 0 var(--general-line-height); } .info__icon {} [dir="rtl"] .info__icon { transform: scaleX(-1); } .info__wrap { display: flex; align-items: flex-start; } .info__case { box-sizing: border-box; padding: 0 0 0 20px; width: 100%; flex: 0 1 370px; } [dir="rtl"] .info__case { padding: 0 20px 0 0; } .info__main { flex: 1 1 auto; width: 1px; min-width: 60%; max-width: 800px; box-sizing: border-box; margin-top: -1rem; } .info__title { font-size: 42px; font-weight: 500; line-height: calc(2 * var(--general-line-height)); margin: 0; padding: 0 0 0.25em; } @media (max-width: 800px) { .info__wrap { margin: 0; display: block; } .info__case { padding: 0; width: 100%; } .info__main { padding: 0 0 calc(2 * var(--general-line-height)); width: 100%; } } @media (max-width: 550px) { .info__title { font-size: 30px; } } ================================================ FILE: src/info/info.pug ================================================ include ../code/codeCss include ../code/codePostCss include ../code/codeGradient include ../code/codeMaths include ../example-copy/example-copy include ../case/case include ../details/details mixin info section.info .info__header a.button.button--small(href="#") span.icon svg.icon__image.icon__image--small.info__icon(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 24") path(d="M14,3.8L12.2,2L2,12l10.2,10l1.8-1.8L5.6,12L14,3.8z") != ` {{ easing.all_easings }}` .info__wrap .info__main h2.info__title.js-info-name .info-chart .info-chart__wrap svg.info-chart__curve(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 85") path(d="M0 0L0 0z") .info-chart__text x .info-chart__text.info-chart__text--bottom t button.info-chart__target(aria-hidden="true") .info-chart__cursor .example .example__title CSS .js-info-simple div {{ howtos.css.text }} .example__code +example-copy +codeCss div. {{#link}} ( howtos.css.edit ) [href="http://cubic-bezier.com/" rel="noopener noreferrer" target="_blank" class="js-cubic-bezier"] {{/link}} .js-info-complex div {{{ howtos.css.with_animation }}}: +details("{{ howtos.css.example_size }}", "scale") {{ easing.load }} +details("{{ howtos.css.example_position }}", "translate") {{ easing.load }} +details("{{ howtos.css.example_opacity }}", "opacity") {{ easing.load }} .example .example__title PostCSS .js-info-simple div. {{#link}} ( howtos.postcss.text ) [href="https://github.com/postcss/postcss-easings" rel="noopener noreferrer" target="_blank"] {{/link}} .example__code +example-copy +codePostCss div {{ howtos.postcss.explanation }} .js-info-complex div {{{ howtos.postcss.disabled }}} .example.js-info-simple .example__title {{ howtos.gradient.name }} div. {{#link}} ( howtos.gradient.text ) [href="https://github.com/larsenwork/postcss-easing-gradients" rel="noopener noreferrer" target="_blank"] {{/link}} .example__code +example-copy +codeGradient .example__gradient .example .example__title {{ howtos.mathfunction.name }} .js-info-simple div {{ howtos.mathfunction.text }} .example__code +example-copy +codeMaths .js-info-complex div {{ howtos.mathfunction.text }} .example__code +example-copy +codeMaths .info__case .cases__title {{ easing.check }}: .cases__actions button.button.button--small.cases__action(data-type="scale") {{ easing.check_size }} button.button.button--small.cases__action(data-type="translate") {{ easing.check_position }} button.button.button--small.cases__action(data-type="opacity") {{ easing.check_opacity }} .cases__list +case("{{ easing.current_func }}", true) +case("{{ easing.linear_func }}") ================================================ FILE: src/info/info.ts ================================================ import { selectorComplexInfo, selectorComplexKeyframeOpacity, selectorComplexKeyframeScale, selectorComplexKeyframeTranslate, selectorInfo, selectorSimpleInfo, } from "../helpers/constants"; import { forNodeList } from "../helpers/forNodeList"; import { getElement, getElementsList } from "../helpers/getElement"; import { generateComplexEasings, keyframeTypes } from "../easings/easings"; const info = getElement(selectorInfo); const infoSimple = getElementsList(selectorSimpleInfo); const infoComplex = getElementsList(selectorComplexInfo); const infoName = getElementsList(".js-info-name", info); const infoFuncName = getElementsList(".js-info-func", info); const infoMaths = getElementsList(".js-info-maths", info); const infoKeyframes = { opacity: getElement(selectorComplexKeyframeOpacity), scale: getElement(selectorComplexKeyframeScale), translate: getElement(selectorComplexKeyframeTranslate), }; export function setInfoName(name: string): void { forNodeList(infoName, (e) => { e.innerText = name; }); } export function setInfoFunc(func: string): void { forNodeList(infoFuncName, (e) => { e.innerText = func; }); } export function setInfoMaths(maths: string): void { forNodeList(infoMaths, (e) => { e.innerText = maths; }); } export function showSimpleInfo(): void { forNodeList(infoSimple, (item) => (item.hidden = false)); forNodeList(infoComplex, (item) => (item.hidden = true)); } export function showComplexInfo(name: string): void { forNodeList(infoSimple, (item) => (item.hidden = true)); forNodeList(infoComplex, (item) => (item.hidden = false)); infoKeyframes.opacity.innerHTML = generateComplexEasings( name, keyframeTypes.opacity ); infoKeyframes.scale.innerHTML = generateComplexEasings( name, keyframeTypes.scale ); infoKeyframes.translate.innerHTML = generateComplexEasings( name, keyframeTypes.translate ); } ================================================ FILE: src/info-chart/info-chart.css ================================================ .info-chart { position: relative; width: 100%; padding: var(--general-line-height) 0 var(--general-line-height) 1px; user-select: none; } .info-chart--offset_top { padding-top: calc(2 * var(--general-line-height)); } .info-chart__wrap { position: relative; color: var(--gray-lighten-color); max-width: 150px; } .info-chart__wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: -1px; left: -1px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; } .info-chart__curve { fill: none; stroke: var(--brand-color); stroke-width: 1px; stroke-linecap: round; overflow: visible; display: block; } .info-chart__text { font-size: 14px; position: absolute; top: 1px; left: 5px; } .info-chart__text--bottom { top: auto; left: auto; right: 8px; bottom: 4px; } .info-chart__target { display: block; border: none; background: none; outline: none; width: 100%; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .info-chart__cursor { position: absolute; top: 100%; right: -17px; opacity: 0; will-change: top; transition: top 0s, opacity 0s; transition-delay: 0s, 0s; transform: translateY(-5px); } .info-chart__cursor--visible { opacity: 1; top: 1%; transition: top var(--transition-card-time), opacity var(--transition-time); transition-delay: var(--transition-time), 0s; } .info-chart__cursor::after { content: ''; display: block; width: 10px; height: 10px; border-radius: 0 50% 50% 50%; background: var(--brand-color); transform: rotate(-45deg); } ================================================ FILE: src/info-chart/info-chart.ts ================================================ import { getElement } from "../helpers/getElement"; const infoChartTargetState = getElement(".info-chart__target"); const infoChartCursor = getElement(".info-chart__cursor"); const infoChartCursorVisibleSelector = "info-chart__cursor--visible"; let nameAnimation: string | null = null; infoChartTargetState.addEventListener("pointerenter", showCursor); infoChartTargetState.addEventListener("pointerleave", hideCursor); infoChartTargetState.addEventListener("mouseenter", showCursor); infoChartTargetState.addEventListener("mouseleave", hideCursor); infoChartTargetState.addEventListener("focus", showCursor); infoChartTargetState.addEventListener("blur", hideCursor); export function setTransitionForInfoChartCursor( cssFunc: string, name: string ): void { if (cssFunc === "no") { nameAnimation = name; } else { nameAnimation = null; infoChartCursor.style.transitionTimingFunction = cssFunc; } } function showCursor(): void { if (nameAnimation) { infoChartCursor.style.animation = ` 1s cursor-${nameAnimation} both 0.2s linear `; } infoChartCursor.classList.add(infoChartCursorVisibleSelector); } function hideCursor(): void { infoChartCursor.style.transitionDuration = "0s"; void infoChartCursor.offsetWidth; if (nameAnimation) { infoChartCursor.style.animation = null; } infoChartCursor.classList.remove(infoChartCursorVisibleSelector); infoChartCursor.style.transitionDuration = null; } ================================================ FILE: src/keyframes.css ================================================ @import "./variables/variables.css"; @import "./animation/index.css"; ================================================ FILE: src/layout/layout.css ================================================ /*noinspection CssInvalidFunction,CssOverwrittenProperties*/ .layout { overflow: hidden; padding-top: constant(safe-area-inset-top, 0px);; padding-top: env(safe-area-inset-top, 0px);; padding-left: constant(safe-area-inset-left, 0px);; padding-left: env(safe-area-inset-left, 0px);; padding-right: constant(safe-area-inset-right, 0px);; padding-right: env(safe-area-inset-right, 0px);; padding-bottom: constant(safe-area-inset-bottom, 0px);; padding-bottom: env(safe-area-inset-bottom, 0px);; } .layout__gradients-curve, .layout__title { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; } .layout__wrap { position: relative; box-sizing: border-box; width: 100%; margin: 0 auto; max-width: 1050px; padding: 0 15px; } .layout__content { position: relative; } ================================================ FILE: src/manifest.webmanifest ================================================ { "lang": "{{ lang_code }}", "name": "{{ title }}", "short_name": "{{ short_name }}", "description": "{{ description }}", "start_url": "/{{ lang_code }}", "display": "standalone", "theme_color": "#1473e6", "background_color": "#fff", "icons": [ { "src": "./icons/logo.svg", "type": "image/svg", "sizes": "48x48 72x72 96x96 144x144" }, { "src": "./icons/192.png", "sizes": "192x192" }, { "src": "./icons/512.png", "sizes": "512x512" } ] } ================================================ FILE: src/math/math.pug ================================================ - const pow = Math.pow; const sin = Math.sin; const cos = Math.cos; const PI = Math.PI; const c1 = 1.70158; const c2 = c1 * 1.525; const c3 = c1 + 1; const c4 = (2 * PI) / 3; const c5 = (2 * PI) / 4.5; const functionsList = { easeInElastic: function (x) { return x === 0 ? 0 : x === 1 ? 1 : -pow( 2, 10 * x - 10 ) * sin( ( x * 10 - 10.75 ) * c4 ); }, easeOutElastic: function (x) { return x === 0 ? 0 : x === 1 ? 1 : pow( 2, -10 * x ) * sin( ( x * 10 - 0.75 ) * c4 ) + 1; }, easeInOutElastic: function (x) { return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -( pow( 2, 20 * x - 10 ) * sin( ( 20 * x - 11.125 ) * c5 )) / 2 : pow( 2, -20 * x + 10 ) * sin( ( 20 * x - 11.125 ) * c5 ) / 2 + 1; }, easeInBounce: function (x) { return 1 - bounceOut( 1 - x ); }, easeOutBounce: bounceOut, easeInOutBounce: function (x) { return x < 0.5 ? ( 1 - bounceOut( 1 - 2 * x ) ) / 2 : ( 1 + bounceOut( 2 * x - 1 ) ) / 2; } }; function getEasing(name, width, height) { if (functionsList.hasOwnProperty(name)) { var line = ""; for (var index = 0.01; index < 1; index = index + 0.01) { const offsetX = index * (width - 1); const offsetY = (1 - functionsList[name](index)) * (height - 1); line = line.concat(`${offsetX.toFixed(2)} ${offsetY.toFixed(2)} `); } return line; } return ""; } function bounceOut(x) { const n1 = 7.5625; const d1 = 2.75; if ( x < 1/d1 ) { return n1*x*x; } else if ( x < 2/d1 ) { return n1*(x-=(1.5/d1))*x + .75; } else if ( x < 2.5/d1 ) { return n1*(x-=(2.25/d1))*x + .9375; } else { return n1*(x-=(2.625/d1))*x + .984375; } } ================================================ FILE: src/navigation/navigation.ts ================================================ import { clearTransition, setFuncForCard } from "../card/card"; import { getTransitionTime } from "../helpers/getTransitionTime"; import { getElementPosition } from "../helpers/getElementPosition"; import { parseStringOfFourNumbers } from "../helpers/parseStringOfFourNumbers"; import { infoChartOffsetTopClassName, noTimingFunction, selectorInfo, selectorInfoChart, selectorDetails, } from "../helpers/constants"; import { forNodeList } from "../helpers/forNodeList"; import { getElement, getElementsList } from "../helpers/getElement"; import { setInfoFunc, setInfoName, setInfoMaths, showComplexInfo, showSimpleInfo, } from "../info/info"; import { resetOverlay, setSizeOverlay, setTransitionDurationOverlay, showOverlay, } from "../overlay/overlay"; import { hideGradient, setGradient } from "../gradient/gradient"; import { setTransitionForInfoChartCursor } from "../info-chart/info-chart"; const selectorColumns = ".columns"; const timeTransitionForOverlay = 300; const linkCubicBezierElement = getElement(".js-cubic-bezier"); const linkCubicBezierHref = linkCubicBezierElement.href; const header = getElement(".header"); const info = getElement(selectorInfo); const infoChart = getElement(selectorInfoChart); const columns = getElement(selectorColumns); const overlayOffsetVertical = 30; const overlayOffsetHorizontal = 30; let openItemId: string | null; window.addEventListener("resize", resizeInfo, false); info.addEventListener("click", () => { requestAnimationFrame(resizeInfo); }); const chartId = window.location.hash.slice(1); if (chartId) { navigateChart(chartId); } window.addEventListener( "hashchange", () => { if (window.getSelection) { window.getSelection().removeAllRanges(); } forNodeList(getElementsList(selectorDetails), (item) => { if (item.hasAttribute("open")) { item.removeAttribute("open"); } }); const id = window.location.hash.slice(1); if (id) { navigateChart(id); } else { navigateMain(); } }, false ); window.addEventListener("keydown", (event) => { const keyName = "escape"; if ( event.key.toLowerCase() === keyName || event.code.toLowerCase() === keyName ) { window.location.hash = ""; } }); function navigateMain(): void { window.scrollTo({ behavior: "smooth", top: 0, }); const item = document.getElementById(`func-${openItemId}`); const infoTransitionTime = getTransitionTime(info); openItemId = null; columns.removeAttribute("style"); columns.classList.remove("columns--hide"); info.classList.remove("info--evident"); info.style.position = "absolute"; info.style.top = "0px"; info.style.left = "0px"; info.style.right = "0px"; setTransitionDurationOverlay(timeTransitionForOverlay); setTimeout(() => { info.removeAttribute("style"); const itemPosition = getElementPosition(item); setSizeOverlay({ height: itemPosition.height, left: itemPosition.x, top: itemPosition.y, width: itemPosition.width, }); }, infoTransitionTime); setTimeout(resetOverlay, timeTransitionForOverlay + infoTransitionTime); } function navigateChart(id: string): void { const item = document.getElementById(`func-${id}`); if (!item || openItemId === id) { return; } clearTransition(); openItemId = id; const name = item.getAttribute("data-name"); const func = item.getAttribute("data-func"); const maths = item.getAttribute("data-maths"); const itemOffset = item.getAttribute("data-offset"); const transitionTimingFunction = func === noTimingFunction ? "ease" : func; if (name && func) { const infoCurve = getElement(".info-chart__curve", info); const itemCurve = getElement(".chart__curve", item); const columnsTransitionTime = getTransitionTime(columns); if (itemOffset === "top") { infoChart.classList.add(infoChartOffsetTopClassName); } else { infoChart.classList.remove(infoChartOffsetTopClassName); } setInfoName(name); setInfoFunc(func); setInfoMaths(maths); setFuncForCard(func, name); setTransitionForInfoChartCursor(func, name); if (func !== noTimingFunction) { const points = parseStringOfFourNumbers(func); linkCubicBezierElement.href = `${linkCubicBezierHref}#${points.join( "," )}`; showSimpleInfo(); setGradient(name, points); } else { showComplexInfo(name); hideGradient(); } getElement("path", infoCurve).setAttribute( "d", itemCurve.getAttribute("d") ); info.style.transitionTimingFunction = transitionTimingFunction; info.style.display = "block"; requestAnimationFrame(() => { const itemPosition = getElementPosition(item); setTransitionDurationOverlay(timeTransitionForOverlay); showOverlay(); setSizeOverlay({ height: itemPosition.height, left: itemPosition.x, top: itemPosition.y, width: itemPosition.width, }); columns.classList.add("columns--hide"); requestAnimationFrame(() => { const infoPosition = getElementPosition(info); setSizeOverlay({ height: infoPosition.height + overlayOffsetVertical, left: infoPosition.x - overlayOffsetHorizontal / 2, top: infoPosition.y - overlayOffsetVertical / 2, width: infoPosition.width + overlayOffsetHorizontal, }); const headerPosition = getElementPosition(header); const topOffset = headerPosition.height + headerPosition.y - overlayOffsetVertical / 2; requestAnimationFrame(() => { window.scrollTo({ behavior: "smooth", top: topOffset, }); }); }); }); setTimeout(() => { info.classList.add("info--evident"); }, timeTransitionForOverlay); setTimeout(() => { columns.style.display = "none"; }, timeTransitionForOverlay + columnsTransitionTime); } } function resizeInfo(): void { if (!openItemId) { return; } const infoPosition = getElementPosition(info); setTransitionDurationOverlay(0); setSizeOverlay({ height: infoPosition.height + overlayOffsetVertical, left: infoPosition.x - overlayOffsetHorizontal / 2, top: infoPosition.y - overlayOffsetVertical / 2, width: infoPosition.width + overlayOffsetHorizontal, }); } ================================================ FILE: src/overlay/overlay.css ================================================ .overlay { position: absolute; z-index: 1; background: var(--second-background); will-change: width, height, top, left; transform: translateZ(0); box-shadow: 0 2px 8px var(--transparent-color-5); } ================================================ FILE: src/overlay/overlay.pug ================================================ mixin overlay .overlay(hidden) ================================================ FILE: src/overlay/overlay.ts ================================================ import { getElement } from "../helpers/getElement"; export interface OverlaySize { top: number; left: number; height: number; width: number; } const overlay = getElement(".overlay"); export function setTransitionDurationOverlay(timeAtMs: number): void { overlay.style.transitionDuration = `${timeAtMs}ms`; } export function resetOverlay(): void { overlay.removeAttribute("style"); overlay.hidden = true; } export function showOverlay(): void { overlay.hidden = false; } export function setSizeOverlay(size: OverlaySize): void { overlay.style.height = `${size.height}px`; overlay.style.width = `${size.width}px`; overlay.style.top = `${size.top}px`; overlay.style.left = `${size.left}px`; } ================================================ FILE: src/pug.config.js ================================================ const fs = require("fs"); const yamlParse = require("js-yaml"); const easings = yamlParse.safeLoad( fs.readFileSync("./src/easings.yml", "utf8") ); module.exports = { locals: { all_easings: easings, }, pretty: false, }; ================================================ FILE: src/sw.js ================================================ const version = "v3.0.3"; self.addEventListener("install", (event) => { event.waitUntil( caches .open(version) .then((cache) => cache.addAll([ "keyframes.css", "index.ts", "card.jpg", "96.png", "192.png", "512.png", "logo.svg", "mask.svg", "/", "/:lang", ]) ) ); }); self.addEventListener("fetch", function (event) { event.respondWith(cacheOrNetwork(event.request)); event.waitUntil(updateCache(event.request)); }); function fromNetwork(request) { return fetch(request); } function cacheOrNetwork(request) { return fromCache(request).catch(() => fromNetwork(request)); } function fromCache(request) { return caches .open(version) .then((cache) => cache .match(request) .then((matching) => matching || Promise.reject(request)) ); } function updateCache(request) { return caches .open(version) .then((cache) => fetch(request).then((response) => cache.put(request, response.clone()).then(() => response) ) ); } ================================================ FILE: src/theme/theme.ts ================================================ import { getElement } from "../helpers/getElement"; const selectorThemeSelect = ".footer__theme"; const themeSelect = getElement(selectorThemeSelect); const classLightTheme = "is-light"; const classDarkTheme = "is-dark"; const storageThemeKey = "theme"; if (typeof localStorage.getItem(storageThemeKey) === "string") { const theme = localStorage.getItem(storageThemeKey); themeSelect.value = theme; changeTheme(theme); } themeSelect.addEventListener("change", () => { localStorage.setItem(storageThemeKey, themeSelect.value); changeTheme(themeSelect.value); }); function changeTheme(value: string): void { switch (value) { case "light": document.documentElement.classList.remove(classDarkTheme); document.documentElement.classList.add(classLightTheme); break; case "dark": document.documentElement.classList.remove(classLightTheme); document.documentElement.classList.add(classDarkTheme); break; default: document.documentElement.classList.remove( classLightTheme, classDarkTheme ); } } ================================================ FILE: src/translate/translate.css ================================================ .translate { margin: 0 0 calc(var(--general-line-height) / 2); position: relative; text-align: center; border: none; text-decoration: none; } .translate--with-background { background: var(--second-background); padding: 10px 15px; } .translate__text { width: 1px; min-width: 100%; box-sizing: border-box; padding: 5px 0 0; } ================================================ FILE: src/utils/utils.css ================================================ .u-color-brand { color: var(--brand-color); } .u-color-second { color: var(--second-color); } ================================================ FILE: src/variables/variables.css ================================================ :root { --main-background: #f8f8f8; --main-text-color: #222; --second-background: #fff; --second-background-transparent: rgba(255, 255, 255, 0); --brand-color: #1473e6; --brand-color-text: #fff; --brand-darken-color: #095aba; --brand-darken-color-text: #fff; --brand-lighten-color: #2680eb; --second-color: #247b5e; --gray-color: #6e6e6e; --gray-lighten-color: #cacaca; --button-background-color: var(--brand-color); --footer-link-color: var(--brand-darken-color); --function-shadow: rgba(0, 0, 0, 0.05); --function-shadow-active: rgba(0, 0, 0, 0.2); --card-overlay: rgba(0, 0, 0, 0.7); --card-overlay-text: #fff; --transparent-color: rgba(0, 0, 0, 0); --transparent-color-5: rgba(0, 0, 0, 0.05); --transparent-color-20: rgba(0, 0, 0, 0.2); --transparent-invert-color: rgba(255, 255, 255, 0); --transition-time: 0.2s; --transition-small-time: 0.1s; --transition-card-time: 1s; --transition-show-time: 1.5s; --line-height: 1.4; --line-height-code: 1.5; --general-line-height: 22px; --code-fonts: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } @media (prefers-color-scheme: dark) { :root { --main-background: #222; --main-text-color: #fff; --second-background: rgb(17, 17, 17); --second-background-transparent: rgba(17, 17, 17, 0); --brand-color: #227dec; --second-color: #298e6d; --button-background-color: #136edd; --footer-link-color: #4993ee; --function-shadow: rgba(255, 255, 255, 0.05); --function-shadow-active: rgba(255, 255, 255, 0.2); --transparent-color: rgba(255, 255, 255, 0); --transparent-color-5: rgba(255, 255, 255, 0.05); --transparent-color-20: rgba(255, 255, 255, 0.2); --transparent-invert-color: rgba(0, 0, 0, 0); } } ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "declaration": true, "declarationDir": "./dist", "module": "es6", "outDir": "./dist", "target": "es5", "noImplicitAny": true }, "include": ["src/**/*"], "exclude": ["node_modules"] }