Различные виды CSS анимации

Название	Анимация	CSS код
Движение вправо (нажать на картинку)		.slideRight:active{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50%{ transform: translateX(8%); } 65%{ transform: translateX(-4%); } 80%{ transform: translateX(4%); } 95%{ transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50%{ -webkit-transform: translateX(8%); } 65%{ -webkit-transform: translateX(-4%); } 80%{ -webkit-transform: translateX(4%); } 95%{ -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } }

Представляю вам 100 видов анимации с использованием CSS

• Скопировать код из 3-го столбца таблицы
• Вставить его в ваш файл .css
• Задать класс вашему HTML объекту или же оградить его тегами: <div class="класс-анимации"></div>
• Пример: <img class="slideRight" src="/адрес-до-картинки/картинка.png" alt="Анимация - движение вправо">
• Сохранить все ваши изменения и увидеть результат

Движение влево (нажать на картинку)		.slideLeft:active{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50%{ transform: translateX(-8%); } 65%{ transform: translateX(4%); } 80%{ transform: translateX(-4%); } 95%{ transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50%{ -webkit-transform: translateX(-8%); } 65%{ -webkit-transform: translateX(4%); } 80%{ -webkit-transform: translateX(-4%); } 95%{ -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } }
Движение вверх (нажать на картинку)		.slideUp:active{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } }
Движение вниз (нажать на картинку)		.slideDown:active{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } }
Движение вверх, расширение (нажать на картинку)		.slideExpandUp:active{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } }
Расширение вверх (нажать на картинку)		.expandUp:active{ animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ transform: translateY(-7%) scaleY(1.12); } 75%{ transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ -webkit-transform: translateY(-7%) scaleY(1.12); } 75%{ -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } }
Появление - увеличение (нажать на картинку)		.fadeIn:active{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } }
Появление - уменьшение (нажать на картинку)		.expandOpen:active{ animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } }
Появление - расшатывание (нажать на картинку)		.bigEntrance:active{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } }
Качание (нажать на картинку)		.hatch:active{ animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } }
Прыжок и падение (нажать на картинку)		.bounce:active{ animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } }
Пульсация (Навести на картинку)		.pulse:hover{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } }
Движение вверх-вниз (Навести на картинку)		.floating:hover{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } }
Качание (Навести на картинку)		.tossing:hover{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } }
Рост вверх (Нажать на картинку)		.pullUp:active{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } }
Рост вниз (Нажать на картинку)		.pullDown:active{ animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } }
Рост справа налево (Нажать на картинку)		.stretchLeft:active{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } }
Рост слева направо (Нажать на картинку)		.stretchRight:active{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } }
Приземление (Навести на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .puffIn:active { animation-name: puffIn; } @keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2,2); filter: blur(2px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1,1); filter: blur(0px); } }
Взлёт (Навести на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .puffOut:hover { animation-name: puffOut; } @keyframes puffOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1,1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2,2); filter: blur(2px); } }
Фокусировка - появление (Навести на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .vanishIn:hover { animation-name: vanishIn; } @keyframes vanishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(90px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } }
Фокусировка - исчезновение (Навести на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } vanishOut:hover { animation-name: vanishOut; } @keyframes vanishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(20px); } }
Шторка (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .boingInUp:active { animation-name: boingInUp; } @keyframes boingInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); } }
Падение (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .boingOutDown:active { animation-name: boingOutDown; } @keyframes boingOutDown { 0% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; transform-origin: 100% 100%; transform: perspective(800px) rotateX(90deg) rotateY(0deg); } }
Вылет влево (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .bombLeftOut:active { animation-name: bombLeftOut; } @keyframes bombLeftOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(20px); } }
Вылет вправо (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .bombRightOut:active { animation-name: bombRightOut; } @keyframes bombRightOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(20px); } }
Магическое исчезновение (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .magic:active { animation-name: magic; } @keyframes magic { 0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0, 0) rotate(270deg); } }
Магическое появление (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .swap:active { animation-name: swap; } @keyframes swap { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) translate(0px, 0px); } }
Твистер снизу (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .twisterInDown:active { animation-name: twisterInDown; } @keyframes twisterInDown { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } }
Твистер сверху (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .twisterInUp:active { animation-name: twisterInUp; } @keyframes twisterInUp { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); } }
Хаотичное появление (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .foolishIn:active { animation-name: foolishIn; } @keyframes foolishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(0deg); } }
Хаотичное исчезновение (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .foolishOut:active { animation-name: foolishOut; } @keyframes foolishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(0deg); } }
Провалился (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .holeOut:active { animation-name: holeOut; } @keyframes holeOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotateY(180deg); } }
Приближение с остановкой (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .swashIn:active { animation-name: swashIn; } @keyframes swashIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } }
Засосало :D (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .swashOut:active { animation-name: swashOut; } @keyframes swashOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } }
Выход снизу (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceInDown:active { animation-name: spaceInDown; } @keyframes spaceInDown { 0% { opacity: 0; transform-origin: 50% 100%; transform: scale(.2) translate(0%, 200%); } 100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } }
Выход слева (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceInLeft:active { animation-name: spaceInLeft; } @keyframes spaceInLeft { 0% { opacity: 0; transform-origin: 0% 50%; transform: scale(.2) translate(-200%, 0%); } 100% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } }
Выход справа (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceInRight:active { animation-name: spaceInRight; } @keyframes spaceInRight { 0% { opacity: 0; transform-origin: 100% 50%; transform: scale(.2) translate(200%, 0%); } 100% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } }
Выход сверху (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceInUp:active { animation-name: spaceInUp; } @keyframes spaceInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); } 100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } }
Посадка вниз (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceOutDown:active { animation-name: spaceOutDown; } @keyframes spaceOutDown { 0% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(.2) translate(0%, 200%); } }
Посадка влево (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceOutLeft:active { animation-name: spaceOutLeft; } @keyframes spaceOutLeft { 0% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 0% 50%; transform: scale(.2) translate(-200%, 0%); } }
Посадка вправо (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceOutRight:active { animation-name: spaceOutRight; } @keyframes spaceOutRight { 0% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 100% 50%; transform: scale(.2) translate(200%, 0%); } }
Посадка вверх (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .spaceOutUp:active { animation-name: spaceOutUp; } @keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); } }
Перспектива вниз (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveDown:active { animation-name: perspectiveDown; } @keyframes perspectiveDown { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } }
Перспектива подъём снизу (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveDownReturn:active { animation-name: perspectiveDownReturn; } @keyframes perspectiveDownReturn { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } }
Перспектива влево (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveLeft:active { animation-name: perspectiveLeft; } @keyframes perspectiveLeft { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } }
Перспектива подъём слева (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveLeftReturn:active { animation-name: perspectiveLeftReturn; } @keyframes perspectiveLeftReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } }
Перспектива вправо (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveRight:active { animation-name: perspectiveRight; } @keyframes perspectiveRight { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } }
Перспектива подъём справа (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveRightReturn:active { animation-name: perspectiveRightReturn; } @keyframes perspectiveRightReturn { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } }
Перспектива сверху (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveUp:active { animation-name: perspectiveUp; } @keyframes perspectiveUp { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } }
Перспектива подъём сверху (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .perspectiveUpReturn:active { animation-name: perspectiveUpReturn; } @keyframes perspectiveUpReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } }
Бумеранг (Нажать на картинку)		.anim-opiums { animation-fill-mode: both; } @keyframes boomerang { 10% { z-index: 1; transform: rotate(-20deg); } 35% { z-index: 1; transform: translate(220%, -55%) scale(0.5) rotate(-200deg); } 74% { z-index: -1; } 75% { transform: translate(-200%, 55%) scale(0.9) rotate(-860deg); } 80% { z-index: 1; } 90% { z-index: 1; transform: translate(0%, 0%) rotate(-10deg); } } .boomerang:active { animation-name: boomerang; animation-duration: 3s; }
Вращение снизу (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .rotateDown:active { animation-name: rotateDown; } @keyframes rotateDown { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); } }
Вращение слева (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .rotateLeft:active { animation-name: rotateLeft; } @keyframes rotateLeft { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(300px); } }
Вращение справа (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .rotateRight:active { animation-name: rotateRight; } @keyframes rotateRight { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(150px); } }
Вращение сверху (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .rotateUp:active { animation-name: rotateUp; } @keyframes rotateUp { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); } }
Слайд снизу (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .slideDownReturn:active { animation-name: slideDownReturn; } @keyframes slideDownReturn { 0% { transform-origin: 0 0; transform: translateY(100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } }
Слайд слева (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .slideLeftReturn:active { animation-name: slideLeftReturn; } @keyframes slideLeftReturn { 0% { transform-origin: 0 0; transform: translateX(-100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } }
Слайд справа (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .slideRightReturn:active { animation-name: slideRightReturn; } @keyframes slideRightReturn { 0% { transform-origin: 0 0; transform: translateX(100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } }
Слайд сверху (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .slideUpReturn:active { animation-name: slideUpReturn; } @keyframes slideUpReturn { 0% { transform-origin: 0 0; transform: translateY(-100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } }
Открытие влево (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .openDownLeft:active { animation-name: openDownLeft; } @keyframes openDownLeft { 0% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; } }
Закрытие слева (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .openDownLeftReturn:active { animation-name: openDownLeftReturn; } @keyframes openDownLeftReturn { 0% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } }
Открытие вправо (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .openDownRight:active { animation-name: openDownRight; } @keyframes openDownRight { 0% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; } }
Закрытие справа (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .openDownRightReturn:active { animation-name: openDownRightReturn; } @keyframes openDownRightReturn { 0% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } }
Открытие влево с исчезновение (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .openDownLeftOut:active { animation-name: openDownLeftOut; } @keyframes openDownLeftOut { 0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; } }
Открытие вправо с исчезновение (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .openDownRightOut:active { animation-name: openDownRightOut; } @keyframes openDownRightOut { 0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; } }
Слайд снизу и пульсация (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinDownIn:active { animation-name: tinDownIn; } @keyframes tinDownIn { 0% { opacity: 0; transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } }
Пульсация и слайд вниз (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinDownOut:active { animation-name: tinDownOut; } @keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(900%); } }
Слайд слева и пульсация (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinLeftIn:active { animation-name: tinLeftIn; } @keyframes tinLeftIn { 0% { opacity: 0; transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } }
Пульсация и слайд влево (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinLeftOut:active { animation-name: tinLeftOut; } @keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); } }
Слайд справа и пульсация (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinRightIn:active { animation-name: tinRightIn; } @keyframes tinRightIn { 0% { opacity: 0; transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } }
Пульсация и слайд вправо (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinRightOut:active { animation-name: tinRightOut; } @keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(900%); } }
Слайд вниз и пульсация (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinUpIn:active { animation-name: tinUpIn; } @keyframes tinUpIn { 0% { opacity: 0; transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } }
Пульсация и слайд вверх (Нажать на картинку)		.magictime { animation-duration: 1s; animation-fill-mode: both; } .tinUpOut:active { animation-name: tinUpOut; } @keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(-900%); } }
Гаечный ключ (Навести на картинку)		.wrench:hover { animation: wrench_7142 3.875s ease infinite; transform-origin: 90% 35%; } @keyframes wrench_7142 { 0% { transform:rotate(-12deg) } 5.16129% { transform:rotate(12deg) } 6.45161% { transform:rotate(24deg) } 11.6129% { transform:rotate(-24deg) } 12.90323% { transform:rotate(-24deg) } 18.06451% { transform:rotate(24deg) } 19.35484% { transform:rotate(24deg) } 24.51613% { transform:rotate(-24deg) } 25.80645% { transform:rotate(-24deg) } 30.96774% { transform:rotate(24deg) } 32.25807% { transform:rotate(24deg) } 37.41935% { transform:rotate(-24deg) } 38.70968% { transform:rotate(-24deg) } 43.87097% { transform:rotate(24deg) } 48.3871% { transform:rotate(0deg) } 100% { transform:rotate(0deg) } }
Встряхивание (Навести на картинку)		.shake:hover { animation: shake_9883 3.875s ease infinite; transform-origin: 50% 50%; } @keyframes shake_9883 { 0% { transform:rotate(-12deg) } 5.16129% { transform:rotate(12deg) } 6.45161% { transform:rotate(24deg) } 11.6129% { transform:rotate(-24deg) } 12.90323% { transform:rotate(-24deg) } 18.06451% { transform:rotate(24deg) } 19.35484% { transform:rotate(24deg) } 24.51613% { transform:rotate(-24deg) } 25.80645% { transform:rotate(-24deg) } 30.96774% { transform:rotate(24deg) } 32.25807% { transform:rotate(24deg) } 37.41935% { transform:rotate(-24deg) } 38.70968% { transform:rotate(-24deg) } 43.87097% { transform:rotate(24deg) } 48.3871% { transform:rotate(0deg) } 100% { transform:rotate(0deg) } }
Колокольчик (Навести на картинку)		.ring:hover { animation: ring_1479 2.4s ease infinite; transform-origin: 50% 0%; } @keyframes ring_1479 { 0% { transform: rotate(-15deg) } 1.66667% { transform: rotate(15deg) } 3.33333% { transform: rotate(-18deg) } 5% { transform: rotate(18deg) } 6.66667% { transform: rotate(-22deg) } 8.33333% { transform: rotate(22deg) } 10% { transform: rotate(-18deg) } 11.66667% { transform: rotate(18deg) } 13.33333% { transform: rotate(-12deg) } 15% { transform: rotate(12deg) } 16.66667% { transform: rotate(0deg) } 100% { transform: rotate(0deg) } }
Вертикаль (Навести на картинку)		.vertical:hover { animation: vertical_5409 2.44s ease infinite; transform-origin: 50% 50%; } @keyframes vertical_5409 { 0% { transform:translate(0,-3px) } 3.27869% { transform:translate(0,3px) } 6.55738% { transform:translate(0,-3px) } 9.83606% { transform:translate(0,3px) } 13.11475% { transform:translate(0,-3px) } 16.39344% { transform:translate(0,3px) } 18.03279% { transform:translate(0,0) } 100% { transform:translate(0,0) } }
Горизонталь (Навести на картинку)		.horizontal:hover { animation: horizontal_8073 2.72s ease infinite; transform-origin: 50% 50%; } @keyframes horizontal_8073 { 0% { transform:translate(0,0) } 4.41177% { transform:translate(5px,0) } 8.82353% { transform:translate(0,0) } 13.23529% { transform:translate(5px,0) } 17.64706% { transform:translate(0,0) } 22.05882% { transform:translate(5px,0) } 26.47059% { transform:translate(0,0) } 100% { transform:translate(0,0) } }
Двойная вспышка (Навести на картинку)		.double-flash:hover { animation: double-flash_5684 4s ease infinite; transform-origin: 50% 50%; } @keyframes double-flash_5684 { 0% { opacity:1 } 12.5% { opacity:0 } 25% { opacity:1 } 37.5% { opacity:0 } 50% { opacity:1 } 100% { opacity:1 } }
Вращение (Навести на картинку)		.spin:hover { animation: spin_3868 3.5s linear infinite; transform-origin: 50% 50%; } @keyframes spin_3868 { 0% { transform:rotate(0deg) } 42.85714% { transform:rotate(359deg) } 100% { transform:rotate(359deg) } }
Поплавок (Навести на картинку)		.float:hover { animation: float_7428 4s linear infinite; transform-origin: 50% 50%; } @keyframes float_7428 { 0% { transform: translateY(0) } 25% { transform: translateY(-6px) } 50% { transform: translateY(0) } 100% { transform: translateY(0) } }
Та-да (Навести на картинку)		.tada:hover { animation: tada_8254 3.6s linear infinite; transform-origin: 50% 50%; } @keyframes tada_8254 { 0% { transform: scale(1) } 5.55556% { transform:scale(.9) rotate(-8deg) } 11.11111% { transform:scale(.9) rotate(-8deg) } 16.66667% { transform:scale(1.3) rotate(8deg) } 22.22222% { transform:scale(1.3) rotate(-8deg) } 27.77778% { transform:scale(1.3) rotate(8deg) } 33.33333% { transform:scale(1.3) rotate(-8deg) } 38.88889% { transform:scale(1.3) rotate(8deg) } 44.44444% { transform:scale(1) rotate(0) } 100% { transform:scale(1) rotate(0) } }
Прохождение (Нажать на картинку)		.passing:active { animation: passing_4817 4s linear infinite; transform-origin: 50% 50%; } @keyframes passing_4817 { 0% { transform:translateX(-50%); opacity:0 } 25% { transform:translateX(0%); opacity:1 } 50% { transform:translateX(50%); opacity:0 } 100% { transform:translateX(50%); opacity:0 } }
Обратное прохождение (Нажать на картинку)		.passing-reverse:active { animation: passing-reverse_6558 4s linear infinite; transform-origin: 50% 50%; } @keyframes passing-reverse_6558 { 0% { transform:translateX(50%); opacity:0 } 25% { transform:translateX(0%); opacity:1 } 50% { transform:translateX(-50%); opacity:0 } 100% { transform:translateX(-50%); opacity:0 } }
Увеличение и исчезновение (Навести на картинку)		.burst:hover { animation: burst_1720 4s linear infinite; transform-origin: 50% 50%; } @keyframes burst_1720 { 0% { opacity:1 } 49.9995% { transform:scale(1.8); opacity:0 } 50% { transform:scale(1); opacity:1 } 100% { transform:scale(1); opacity:1 } }
Тень (Навести на картинку)		.shadow-drop-center:hover { -webkit-animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes shadow-drop-center { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35); } } @keyframes shadow-drop-center { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35); } }
Внутренняя тень (Навести на картинку)		.shadow-inset-center:hover { -webkit-animation: shadow-inset-center 0.4s steps(2, end) both; animation: shadow-inset-center 0.4s steps(2, end) both; } @-webkit-keyframes shadow-inset-center { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); } 100% { box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5); } } @keyframes shadow-inset-center { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); } 100% { box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5); } }
Лампа появление (Навести на картинку)		.text-flicker-in-glow:hover { -webkit-animation: text-flicker-in-glow 4s linear both; animation: text-flicker-in-glow 4s linear both; } @-webkit-keyframes text-flicker-in-glow { 0% { opacity: 0; } 10% { opacity: 0; text-shadow: none; } 10.1% { opacity: 1; text-shadow: none; } 10.2% { opacity: 0; text-shadow: none; } 20% { opacity: 0; text-shadow: none; } 20.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); } 20.6% { opacity: 0; text-shadow: none; } 30% { opacity: 0; text-shadow: none; } 30.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 30.5% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 30.6% { opacity: 0; text-shadow: none; } 45% { opacity: 0; text-shadow: none; } 45.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 50% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 55% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 55.1% { opacity: 0; text-shadow: none; } 57% { opacity: 0; text-shadow: none; } 57.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 60% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 60.1% { opacity: 0; text-shadow: none; } 65% { opacity: 0; text-shadow: none; } 65.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 75% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 75.1% { opacity: 0; text-shadow: none; } 77% { opacity: 0; text-shadow: none; } 77.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 85% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 85.1% { opacity: 0; text-shadow: none; } 86% { opacity: 0; text-shadow: none; } 86.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } 100% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } } @keyframes text-flicker-in-glow { 0% { opacity: 0; } 10% { opacity: 0; text-shadow: none; } 10.1% { opacity: 1; text-shadow: none; } 10.2% { opacity: 0; text-shadow: none; } 20% { opacity: 0; text-shadow: none; } 20.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); } 20.6% { opacity: 0; text-shadow: none; } 30% { opacity: 0; text-shadow: none; } 30.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 30.5% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 30.6% { opacity: 0; text-shadow: none; } 45% { opacity: 0; text-shadow: none; } 45.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 50% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 55% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 55.1% { opacity: 0; text-shadow: none; } 57% { opacity: 0; text-shadow: none; } 57.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 60% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 60.1% { opacity: 0; text-shadow: none; } 65% { opacity: 0; text-shadow: none; } 65.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 75% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 75.1% { opacity: 0; text-shadow: none; } 77% { opacity: 0; text-shadow: none; } 77.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 85% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 85.1% { opacity: 0; text-shadow: none; } 86% { opacity: 0; text-shadow: none; } 86.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } 100% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } }
Лампа исчезновение (Навести на картинку)		.text-flicker-out-glow:hover { -webkit-animation: text-flicker-out-glow 2.5s linear both; animation: text-flicker-out-glow 2.5s linear both; } @-webkit-keyframes text-flicker-out-glow { 0% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } 13.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } 14% { opacity: 0; text-shadow: none; } 14.9% { opacity: 0; text-shadow: none; } 15% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 22.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 23% { opacity: 0; text-shadow: none; } 24.9% { opacity: 0; text-shadow: none; } 25% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 34.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 35% { opacity: 0; text-shadow: none; } 39.9% { opacity: 0; text-shadow: none; } 40% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 42.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 43% { opacity: 0; text-shadow: none; } 44.9% { opacity: 0; text-shadow: none; } 45% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 50% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 54.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 55% { opacity: 0; text-shadow: none; } 69.4% { opacity: 0; text-shadow: none; } 69.5% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 69.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 70% { opacity: 0; text-shadow: none; } 79.4% { opacity: 0; text-shadow: none; } 79.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); } 80% { opacity: 0; text-shadow: none; } 89.8% { opacity: 0; text-shadow: none; } 89.9% { opacity: 1; text-shadow: none; } 90% { opacity: 0; text-shadow: none; } 100% { opacity: 0; } } @keyframes text-flicker-out-glow { 0% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } 13.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); } 14% { opacity: 0; text-shadow: none; } 14.9% { opacity: 0; text-shadow: none; } 15% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 22.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); } 23% { opacity: 0; text-shadow: none; } 24.9% { opacity: 0; text-shadow: none; } 25% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 34.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); } 35% { opacity: 0; text-shadow: none; } 39.9% { opacity: 0; text-shadow: none; } 40% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 42.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); } 43% { opacity: 0; text-shadow: none; } 44.9% { opacity: 0; text-shadow: none; } 45% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 50% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 54.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 55% { opacity: 0; text-shadow: none; } 69.4% { opacity: 0; text-shadow: none; } 69.5% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 69.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); } 70% { opacity: 0; text-shadow: none; } 79.4% { opacity: 0; text-shadow: none; } 79.9% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); } 80% { opacity: 0; text-shadow: none; } 89.8% { opacity: 0; text-shadow: none; } 89.9% { opacity: 1; text-shadow: none; } 90% { opacity: 0; text-shadow: none; } 100% { opacity: 0; } }
Вибрация (Навести на картинку)		.vibrate-1:hover { -webkit-animation: vibrate-1 0.3s linear infinite both; animation: vibrate-1 0.3s linear infinite both; } @-webkit-keyframes vibrate-1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } @keyframes vibrate-1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); transform: translate(0); } }
Пинг (Нажать на картинку)		.ping:active { -webkit-animation: ping 0.8s ease-in-out infinite both; animation: ping 0.8s ease-in-out infinite both; } @-webkit-keyframes ping { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0.8; } 80% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } 100% { -webkit-transform: scale(2.2); transform: scale(2.2); opacity: 0; } } @keyframes ping { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0.8; } 80% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } 100% { -webkit-transform: scale(2.2); transform: scale(2.2); opacity: 0; } }
Плавное увеличение (Навести на картинку)		.kenburns-top:hover { -webkit-animation: kenburns-top 5s ease-out both; animation: kenburns-top 5s ease-out both; } @-webkit-keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } @keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } }
Фокусировка (Навести на картинку)		.blur:hover { -webkit-animation: blur 3s infinite; } @-webkit-keyframes blur { 0%, 100% { -webkit-filter: blur(0px); } 50% { -webkit-filter: blur(10px); } }
Скругление краёв (Навести на картинку)		.circle-opi:hover { transition: 0.5s; border-radius:50%; }
Тень-окаймление (Навести на картинку)		.border-opi:hover{ transition: 0.5s; box-shadow: inset 0 0 0 25px #d5bebe; }
Смена цветов (Навести на картинку)		.element-opi:hover { animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #d5bebe; } 100% { background-color: #800000; } }
Исчезновение с появлением (Навести на картинку)		.i-opiums:hover { -webkit-animation: opacityToggle .7s; animation: opacityToggle .7s; } @-webkit-keyframes opacityToggle{ 0%{ opacity: 1; } 50%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes opacityToggle{ 0%{ opacity: 1; } 50%{ opacity: 0; } 100%{ opacity: 1; } } }
Пропеллер (Навести на картинку)		.anim-opiums { animation-fill-mode: both; } @keyframes airplanePropeller { from { transform-origin: center; transform: rotate(-20000deg); opacity: 1; } to { transform-origin: center; transform: none; opacity: 1; } } .airplanePropeller:hover { animation-name: airplanePropeller; animation-duration: 5s; animation-timing-function: ease-in-out; }

• Теги: 
• html, css, animation

Нет опубликованных комментариев.