quiplunar, окей
Смотрите, надо анимировать шкалу загрузки. Просто прямоугольник ползет вправо, за 5 секунд, чтоб проще считать, от 0 пикселей до 50.
Вначале ширина 0, через секунду сделаем ширину 10 пикселей, еще через секунду увеличим еще на 10 - получим 20 пикселей, на 3 секунде сделаем 30, на 4 - 40, и 5 - 50.
Анимация прошла линейно, на каждой секунде ширина блока увеличилась на одно и тоже самое количество пикселей.
А что если на 1 секунде сделать ширину 5 пикселей, на второй - 15, на третьей 40, на 4 - 55, а на 5 - 50?
Анимация будет выглядеть так, как будто начинается медленно, а к концу ускоряется, а потом немного возвращается назад.
А что если сначала прибавлять мало, в середине много, а в конце снова мало? Тогда она как бы ускориться, потом замедлится к концу.
А что если.... так вот, чтобы описать закон, как менять значение свойства в зависимости от времени используют кривую Безье, а точнее функцию, которая по переданным значениям меняет эту кривую. На сайте есть кривая визуально, снизу по горизонтали шкала времени (от 0 до 1, типа от 0% до 100%), а по вертикали - как будет меняться значение со временем, например ширина (тоже от 0 до 1, или от 0% до 100%).
Функция сглаживания - функция, которая с течением времени меняет свойство по закону, который в нее передан, часто применяют Безье. Она считает значение кривой, берет его в нормальном виде (от 0 до 1) и умножает на свойство, которое анимируется, в итоге свойство то ускоряется, то замедляется в процессе анимации.
В js Вы видите воплощение этой функции кривой Безье в облике js. Чтоб передать туда easeIn разберитесь, как работает этот код, и на сайте, что я скинул - есть значение параметров, чтоб передать в функцию Безье и получить результат.
Посмотрите еще, была библиотека для jquery, чтоб выдавала функцию сглаживания по координатам, те что описывают кривую.
Сергей Бурдужа, 100%, если css отвечает за вид страницы, то лучше подумать, как его заставить, в случаях по-тяжелее - вот так, условия на беке и прочее..
maralov, можно блок с этой скругленной штукой объеденить в один блок с командой медиков, команду медиков с текстом закинуть в контейнер и задать им паддин справа, а эту штуку посчитать в процентах от ширины макета и вставить вправо. Короче, надо только посчитать все размеры правильно, и будет ок, но заморочная штука.
Рад, что помог) Напишу ответ, что можно псевдоэлементом решить)
maralov, а что если к блокам добавить псевдоэлемент, размером под блок в этом месте, во флекс-контейнере задать расположение справа налево, и там before окажется аккурат в том месте где круг, а блок поверх него уже позишеном, или отрицательными маржинами втянуть попробовать?
Да, кстати, я не подумал, что это мот быть вопрос про стрелочные функции)
PS: советую для других уточнить, что если в стрелочной функции все тело можно уложить в выражение, результат которого надо вернуть, то фигурные скобки не ставятся, и return писать не нужно, потому что он сам по себе подразумевается. Можно в коммент дописать вот так:
// Не нужен return, потому что стрелочная однострочная функция без фигурных скобок делает return по умолчанию
От себя добавлю, что функция test не только лишь все) она только объявлена, вызвать бы не помешало, но она все равно как написали в ответе вернет undefined.
