Тема: css анімацю в gif анімацю

Я бачу багато цікавих анімацій css, але навіщо навантажувати сторінку, і ускладнювати відображення її, краще анімації вставляти у вигляді gif. Напевно дивне питання: Є які способи конвертувати css в gif ? Як такі задачі вирішувати ?

Прихований текст

Звичайно я гуглив, але всі "онлайн конвертори" працюють неадекватно

Ось наприклад
html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

css

div {
  border-radius:50%;
  position:absolute;
  top:50%; left:75%;
}
div:nth-of-type(odd) { background:black; }
div:nth-of-type(even) { background:white; border:2px solid black; }
div:nth-of-type(11) {
  height:10px; width:10px;
  margin-top:-5px; margin-left:-5px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 3s ease-in-out infinite;
}
div:nth-of-type(10) {
  height:20px; width:20px;
  margin-top:-12px; margin-left:-12px;
  -webkit-animation:slide 3s -2.7s ease-in-out infinite;
  animation:slide 3s -2.7s ease-in-out infinite;
}
div:nth-of-type(9) {
  height:40px; width:40px;
  margin-top:-20px; margin-left:-20px;
  -webkit-animation:slide 3s -2.4s ease-in-out infinite;
  animation:slide 3s -2.4s ease-in-out infinite;
}
div:nth-of-type(8) {
  height:60px; width:60px;
  margin-top:-32px; margin-left:-32px;
  -webkit-animation:slide 3s -2.1s ease-in-out infinite;
  animation:slide 3s -2.1s ease-in-out infinite;
}
div:nth-of-type(7) {
  height:80px; width:80px;
  margin-top:-40px; margin-left:-40px;
  -webkit-animation:slide 3s -1.8s ease-in-out infinite;
  animation:slide 3s -1.8s ease-in-out infinite;
}
div:nth-of-type(6) {
  height:100px; width:100px;
  margin-top:-52px; margin-left:-52px;
  -webkit-animation:slide 3s -1.5s ease-in-out infinite;
  animation:slide 3s -1.5s ease-in-out infinite;
}
div:nth-of-type(5) {
  height:120px; width:120px;
  margin-top:-60px; margin-left:-60px;
  -webkit-animation:slide 3s -1.2s ease-in-out infinite;
  animation:slide 3s -1.2s ease-in-out infinite;
}
div:nth-of-type(4) {
  height:140px; width:140px;
  margin-top:-72px; margin-left:-72px;
  -webkit-animation:slide 3s -0.9s ease-in-out infinite;
  animation:slide 3s -0.9s ease-in-out infinite;
}
div:nth-of-type(3) {
  height:160px; width:160px;
  margin-top:-80px; margin-left:-80px;
  -webkit-animation:slide 3s -0.6s ease-in-out infinite;
  animation:slide 3s -0.6s ease-in-out infinite;
}
div:nth-of-type(2) {
  height:180px; width:180px;
  margin-top:-92px; margin-left:-92px;
  -webkit-animation:slide 3s -0.3s ease-in-out infinite;
  animation:slide 3s -0.3s ease-in-out infinite;
}
div:nth-of-type(1) {
  height:200px; width:200px;
  margin-top:-100px; margin-left:-100px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 3s ease-in-out infinite;
}
@keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}
@-webkit-keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}
Подякували: Monolith, 0xDADA11C7, ostap34PHP, leofun014

2 Востаннє редагувалося Monolith (06.09.2017 00:20:37)

Re: css анімацю в gif анімацю

Не розумію, чим це гірше? Тобто, чим CSS-анімації гірше за .gif? Не треба вантажити .gif-анімацію з серверу - це вже економія. Також, якщо у користувача відключені картинки(я сам сиджу так, коли ліміт), то він побачить CSS-анімацію, а замість .gif у нього буде....нічого не буде. Також CSS-анімаціями можна керувати зі сторони JavaScript. Це дуже корисно.

От як ви за допомогою .gif, скажіть мені, анімуєте шапку сайту після кліку? Га?

Єдиний, як на мене, мінус CSS-анімацій - вони хавають ресурси. Це помітно лише на старих(дуже старих) машинах, але помітно. Особливо коли оперативна пам'ять піджимає. Також як ще мінус - підтримка. Якщо розробник збочинець, і йому важливий IE5, то тут, цілком можливо, треба буде трошки довше попаритися.

А щодо конвертації, то особливо ніколи й не використовував. Так бачив тільки онлайн-сервіси, але Вам вони не підходять.

Можу хіба що запропонувати, зробити запис екрану, а потім це відео конвертувати у .gif  :)  Я так робив...

3

Re: css анімацю в gif анімацю

Є ліба RecordRTC на JS
http://recordrtc.org/GifRecorder.html
Можливо чимось буде корисна.

Подякували: Betterthanyou1

4

Re: css анімацю в gif анімацю

Betterthanyou написав:

Я бачу багато цікавих анімацій css, але навіщо навантажувати сторінку, і ускладнювати відображення її...

:o
Ось досить цікаве відео, де можна почути про плюси та мінуси CSS анімації: https://www.youtube.com/watch?v=zJxPuXNHx_M

Подякували: Betterthanyou, 221VOLT, leofun013

5

Re: css анімацю в gif анімацю

запишіть з екрану
користуюсь Gifcam http://blog.bahraniapps.com/gifcam/

Подякували: Monolith, Betterthanyou, NaharD, leofun014