Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2020, 23:15
Новичок на форуме
Отправить личное сообщение для lexelok Посмотреть профиль Найти все сообщения от lexelok
 
Регистрация: 15.04.2020
Сообщений: 2

CSS анимация SVG файла
Всем привет. Я тут впервые. Буду рад увидеть любые решения.
Вот в чём дело: пытаюсь сделать css анимацию лого в svg.
Долго ковырялся с разными атрибутами(rotate,scale,skrew) ничего толково не вышло. Задумка как на фото ( вертикальный логотип смещается в одну точку вверх при этом уменьшаясь и выходит из это точки горизонтально увеличиваясь).
фотоhttps://ibb.co/k0dcXGJ

Ссылочка на кодпен
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2020, 03:40
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от lexelok
Долго ковырялся с разными атрибутами(rotate,scale,skrew) ничего толково не вышло. Задумка как на фото ( вертикальный логотип смещается в одну точку вверх при этом уменьшаясь и выходит из это точки горизонтально увеличиваясь).
Вам нужно описать анимацию, затрагивающую масштаб s и угол поворота φ логотипа, которая состоит из 4-ёх шагов:
  • начало (0%) — логотип находится в вертикальном положении, (s = 1, φ = 0°)
  • середина (49.9999%) — масштаб логотипа равен нулю, (s = 0, φ = 0°)
  • середина (50%) — масштаб логотипа равен нулю и логотип повёрнут на 90°, (s = 0, φ = 90°)
  • конец (100%) — логотип находится в горизонтальном положении. (s = 1, φ = 90°)

Теперь эти данные нужно перевести в CSS-анимацию (@keyframes) или SMIL-анимацию (<animateTransform>).

CSS-анимация (@keyframes) — https://codepen.io/Malleys/pen/KKdVRLj?editors=1000
SMIL-анимация (<animateTransform>) — https://codepen.io/Malleys/pen/eYpJrRw?editors=1000

Также вам нужно учитывать точку вращения (см. примеры)
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2020, 18:11
Новичок на форуме
Отправить личное сообщение для lexelok Посмотреть профиль Найти все сообщения от lexelok
 
Регистрация: 15.04.2020
Сообщений: 2

Спасибо большое) Вроде всё настроил.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить доступ к элементами внешнего svg файла? pokk Общие вопросы Javascript 1 06.12.2019 12:17
css анимация, плавный вовзрат к начальному значению FanAizu (X)HTML/CSS 0 30.01.2014 18:28
css анимация, плавный вовзрат к начальному значению FanAizu (X)HTML/CSS 4 16.01.2014 17:49
CSS анимация после :target gJam (X)HTML/CSS 0 01.08.2013 22:42
SVG CSS, SVG to WOFF kobezzza Firefox/Mozilla 2 29.03.2013 15:59