Skip to content

👾 smth #3039

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

👾 smth #3039

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d67955f
👾 smth
Rnbsov Jun 6, 2022
1c66aba
👾 smth
Rnbsov Jun 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions 7-animation/2-css-animations/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,19 @@ That's a "soft" variant for sure. If we put `y` values like `-99` and `99` then

But how do we make a Bezier curve for a specific task? There are many tools. For instance, we can do it on the site <http://cubic-bezier.com/>.

Or you can do it right in the developer tools dashboard (most browsers supports editing Bezier curve):

- First of all turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
- Select the `Elements` panel, then pay attention to the `Styles` sub-panel.

![image](https://user-images.githubusercontent.com/73550760/175558991-7fef3a19-7808-4e83-881e-cfad4805a194.png)

Here you need to find your element and click on transition-timing-function property

![Screenshot_4](https://user-images.githubusercontent.com/104252639/164887739-d17fca89-de67-4171-9a8a-037301abf0e1.jpg)

Here you go, you can experiment with your Bezier curve as you wish

### Steps

The timing function `steps(number of steps[, start/end])` allows splitting an transition into multiple steps.
Expand Down