Тема: 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%; }
}
Я так робив...
