{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7irn7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":8,"offset":151,"style":"BOLD"}],"text":"Представьте: вы заходите на сайт, и элементы плавно появляются, кнопки реагируют на ваши движения, страница \"оживает\" под курсором. Это не магия — это анимации, и сегодня я покажу, как создать их своими руками!","type":"unstyled","key":"73sq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDF1F Зачем нужны анимации?","type":"header-two","key":"gdpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Не просто \"красиво\":","type":"header-three","key":"878af"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":2,"style":"BOLD"}],"text":"✅ Улучшают UX — направляют внимание пользователя","type":"unordered-list-item","key":"9kqd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":2,"style":"BOLD"}],"text":"✅ Обратная связь — кнопка нажата, форма отправлена","type":"unordered-list-item","key":"33cse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":2,"style":"BOLD"}],"text":"✅ Скрывают загрузку — лоадеры вместо пустого экрана","type":"unordered-list-item","key":"efm24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":2,"style":"BOLD"}],"text":"✅ Создают настроение — брендинг через движение","type":"unordered-list-item","key":"c1caa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Факт: Анимированные интерфейсы увеличивают вовлечённость на 70%!","type":"unstyled","key":"4ti9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFA8 Тип 1: CSS Transition — плавные переходы","type":"header-two","key":"8971a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это?","type":"header-three","key":"3qctf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой способ анимации — плавное изменение свойств элемента.","type":"unstyled","key":"532b3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".button {\n background-color: blue;\n transition: background-color 0.3s ease;\n}\n\n.button:hover {\n background-color: red; /* Плавно станет красной за 0.3 сек */\n}","type":"blockquote","key":"45g3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Что можно анимировать?","type":"header-three","key":"b5vdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Цвета */\ntransition: color 0.3s, background-color 0.5s;\n\n/* Размеры */\ntransition: width 0.4s, height 0.4s;\n\n/* Положение */\ntransition: transform 0.3s;\n\n/* Прозрачность */\ntransition: opacity 0.5s;\n\n/* Тени и границы */\ntransition: box-shadow 0.3s, border 0.3s;","type":"blockquote","key":"carjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Формула длительности:","type":"header-three","key":"2ulpi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: [свойство] [длительность] [функция] [задержка];\n\n/* Примеры: */\ntransition: all 0.5s ease-in-out;\ntransition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;","type":"blockquote","key":"674ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Функции времени (timing functions):","type":"header-three","key":"c9r2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"linear → постоянная скорость\nease ← по умолчанию (медленно-быстро-медленно)\nease-in → медленный старт\nease-out → медленное завершение\nease-in-out → медленный старт и завершение\ncubic-bezier() → полный контроль над кривой","type":"blockquote","key":"cecfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Практика: Создаём кнопку с hover-эффектом","type":"unstyled","key":"3dntv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".btn-magic {\n padding: 12px 24px;\n background: #4f46e5;\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.btn-magic:hover {\n background: #7c3aed;\n transform: translateY(-2px);\n box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);\n}\n\n.btn-magic:active {\n transform: translateY(0);\n box-shadow: 0 5px 10px rgba(124, 58, 237, 0.2);\n}","type":"blockquote","key":"8aodp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":2,"style":"BOLD"}],"text":"✨ Тип 2: CSS Animation — сложные последовательности","type":"header-two","key":"6nr45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Когда использовать:","type":"header-three","key":"482i1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бесконечные анимации (лоадеры)","type":"unordered-list-item","key":"7rrs0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сложные последовательности","type":"unordered-list-item","key":"chupj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимации по времени, а не по действию","type":"unordered-list-item","key":"7kj8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Два шага для создания:","type":"header-three","key":"9q8g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Шаг 1: Определяем ключевые кадры","type":"unstyled","key":"49th9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes slideIn {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n \n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n/* Или с процентами: */\n@keyframes bounce {\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-20px);\n }\n 100% {\n transform: translateY(0);\n }\n}","type":"blockquote","key":"8fjtk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Шаг 2: Применяем анимацию к элементу","type":"unstyled","key":"5u18u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".element {\n animation: slideIn 0.8s ease-out;\n}\n\n/* Полный синтаксис: */\nanimation: [имя] [длительность] [функция] [задержка] \n [количество] [направление] [заполнение] [состояние];","type":"blockquote","key":"f2vk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Параметры анимации:","type":"header-three","key":"1m4rg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Количество повторений */\nanimation-iteration-count: 3; /* ровно 3 раза */\nanimation-iteration-count: infinite; /* бесконечно */\n\n/* Направление */\nanimation-direction: normal; /* 0% → 100% */\nanimation-direction: reverse; /* 100% → 0% */\nanimation-direction: alternate; /* туда-обратно */\n\n/* Состояние после завершения */\nanimation-fill-mode: none; /* вернуться к началу */\nanimation-fill-mode: forwards; /* остаться в конце */\n\n/* Пауза/воспроизведение */\nanimation-play-state: running; /* играет */\nanimation-play-state: paused; /* на паузе */","type":"blockquote","key":"prnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF 5 готовых анимаций для ваших проектов:","type":"header-three","key":"em4lo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"1. Появление элемента (Fade In)","type":"unstyled","key":"7jj37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.fade-in {\n animation: fadeIn 0.6s ease-out;\n}","type":"blockquote","key":"bpqh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"2. Пульсация (для уведомлений)","type":"unstyled","key":"7lp5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n}\n\n.pulse {\n animation: pulse 2s infinite;\n}","type":"blockquote","key":"fcf6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"3. Вращающийся лоадер","type":"unstyled","key":"55bc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.loader {\n border: 3px solid #f3f3f3;\n border-top: 3px solid #3498db;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n}","type":"blockquote","key":"53crp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"4. \"Шейк\" при ошибке","type":"unstyled","key":"9reol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n 20%, 40%, 60%, 80% { transform: translateX(5px); }\n}\n\n.shake {\n animation: shake 0.5s;\n}","type":"blockquote","key":"af0mq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"5. Параллакс-эффект","type":"unstyled","key":"5qmuv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n}\n\n.floating-element {\n animation: float 3s ease-in-out infinite;\n}","type":"blockquote","key":"c2sqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":2,"style":"BOLD"}],"text":"⚡ Тип 3: JavaScript анимации — полный контроль","type":"header-two","key":"6t36s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Когда нужен JavaScript:","type":"header-three","key":"1n55f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сложная логика (зависимость от скролла, ввода)","type":"unordered-list-item","key":"9g2u1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Интерактивные анимации (перетаскивание)","type":"unordered-list-item","key":"34grv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимации Canvas/SVG","type":"unordered-list-item","key":"budro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда нужна высокая производительность (WebGL)","type":"unordered-list-item","key":"bat6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Библиотеки, которые упрощают жизнь:","type":"header-three","key":"c7vb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"1. GSAP (GreenSock) — профессиональный инструмент","type":"header-three","key":"7heek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Установка: npm install gsap\n\nimport gsap from 'gsap';\n\n// Простая анимация\ngsap.to('.box', {\n duration: 1,\n x: 100, // переместить на 100px вправо\n rotation: 360,\n ease: \"power2.out\"\n});\n\n// Последовательность\nconst tl = gsap.timeline();\ntl.to('.element1', { x: 100, duration: 1 })\n .to('.element2', { y: 50, duration: 0.5 }, \"-=0.5\") // перекрытие\n .to('.element3', { opacity: 0, duration: 0.3 });\n\n// Анимация по скроллу\ngsap.to('.parallax', {\n scrollTrigger: {\n trigger: '.container',\n start: \"top top\",\n end: \"bottom center\",\n scrub: true\n },\n y: -100\n});","type":"blockquote","key":"2n531"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"2. Anime.js — лёгкий и мощный","type":"header-three","key":"b6ega"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"anime({\n targets: '.element',\n translateX: 250,\n rotate: '1turn',\n backgroundColor: '#FFF',\n duration: 2000,\n loop: true,\n direction: 'alternate'\n});","type":"blockquote","key":"a514t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"3. Framer Motion (для React)","type":"header-three","key":"4s3uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { motion } from 'framer-motion';\n\nconst Component = () => (\n \n Интерактивный элемент\n \n);","type":"blockquote","key":"7ibhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Практический пример: Интерактивная карточка","type":"header-three","key":"3phgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// CSS\n.card {\n transition: transform 0.3s;\n cursor: pointer;\n}\n\n// JavaScript\nconst cards = document.querySelectorAll('.card');\n\ncards.forEach(card => {\n card.addEventListener('mouseenter', () => {\n card.style.transform = 'rotateY(10deg) scale(1.05)';\n });\n \n card.addEventListener('mouseleave', () => {\n card.style.transform = 'rotateY(0) scale(1)';\n });\n \n card.addEventListener('click', () => {\n card.style.transition = 'all 0.5s';\n card.style.transform = 'scale(0.9) rotateY(180deg)';\n \n setTimeout(() => {\n card.style.transform = 'scale(1) rotateY(0)';\n }, 300);\n });\n});","type":"blockquote","key":"7pr4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAE Тип 4: SVG анимации — векторная магия","type":"header-two","key":"9j9gc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Анимируем иконки и графику:","type":"header-three","key":"agsh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"490i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"CSS для SVG:","type":"header-three","key":"5g2q5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Анимация пути */\n.path {\n stroke-dasharray: 1000;\n stroke-dashoffset: 1000;\n animation: draw 3s ease forwards;\n}\n\n@keyframes draw {\n to {\n stroke-dashoffset: 0;\n }\n}","type":"blockquote","key":"63p8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCF1 Тип 5: Микроанимации — маленькие, но важные","type":"header-two","key":"bg09v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Примеры для улучшения UX:","type":"header-three","key":"19m63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* 1. Плавный скролл */\nhtml {\n scroll-behavior: smooth;\n}\n\n/* 2. Анимация placeholder'а */\n.input-field:focus::placeholder {\n transform: translateX(10px);\n opacity: 0.5;\n transition: all 0.3s;\n}\n\n/* 3. Анимация появления tooltip */\n.tooltip {\n opacity: 0;\n transition: opacity 0.2s, transform 0.2s;\n}\n\n.element:hover .tooltip {\n opacity: 1;\n transform: translateY(-5px);\n}","type":"blockquote","key":"9ocn5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDE80 Практика: Создаём анимированный лендинг","type":"header-two","key":"1ljf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"HTML структура:","type":"header-three","key":"f4pi4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n\n\n

Добро пожаловать!

\n \n

Наши услуги

Дизайн

Разработка

Маркетинг

\n \n \n

\n \n

\n \n \n\n","type":"blockquote","key":"7l4v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"CSS стили:","type":"header-three","key":"65mab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Базовые анимации */\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes slideInLeft {\n from {\n transform: translateX(-50px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes lift {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(-10px); }\n}\n\n/* Применение анимаций */\n.fade-in {\n animation: fadeIn 1s ease-out;\n}\n\n.slide-in {\n animation: slideInLeft 0.8s ease-out;\n}\n\n.hover-lift {\n transition: transform 0.3s;\n}\n\n.hover-lift:hover {\n animation: lift 0.3s forwards;\n}\n\n.pulse-on-hover:hover {\n animation: pulse 0.5s;\n}\n\n/* Лоадер */\n.loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3498db;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 2s linear infinite;\n display: none;\n}","type":"blockquote","key":"901ob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"JavaScript логика:","type":"header-three","key":"dlm06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Показываем лоадер при загрузке\nwindow.addEventListener('load', () => {\n const loader = document.getElementById('loader');\n loader.style.display = 'block';\n \n setTimeout(() => {\n loader.style.display = 'none';\n // Запускаем анимацию элементов после загрузки\n document.querySelectorAll('.service-card').forEach((card, index) => {\n setTimeout(() => {\n card.classList.add('bounce');\n setTimeout(() => card.classList.remove('bounce'), 1000);\n }, index * 200);\n });\n }, 2000);\n});\n\n// Анимация кнопки CTA\nconst ctaButton = document.querySelector('.cta-button');\nctaButton.addEventListener('click', function() {\n this.style.animation = 'none';\n setTimeout(() => {\n this.style.animation = '';\n }, 10);\n \n // Добавляем эффект \"пузыря\"\n this.classList.add('clicked');\n setTimeout(() => this.classList.remove('clicked'), 300);\n});","type":"blockquote","key":"7gpat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":2,"style":"BOLD"}],"text":"⚡ Производительность: Делаем анимации быстрыми","type":"header-two","key":"2pe32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Чек-лист оптимизации:","type":"header-three","key":"61cke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* ✅ ХОРОШО — анимируем эти свойства */\ntransform: translate(), scale(), rotate();\nopacity: 0.5;\nfilter: blur(), brightness();\n\n/* ❌ ПЛОХО — избегаем анимации этих свойств */\nwidth: 100px; /* вызывает перерасчёт layout */\nheight: 100px;\nmargin: 10px;\npadding: 10px;\nleft: 10px; /* используйте transform вместо left/top */","type":"blockquote","key":"9aocf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Быстрый рецепт:","type":"header-three","key":"71snj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".fast-animation {\n /* GPU ускорение */\n transform: translateZ(0);\n will-change: transform, opacity;\n \n /* Отключить antialiasing для движения */\n -webkit-font-smoothing: antialiased;\n}","type":"blockquote","key":"b3lau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDEE0 Инструменты для работы","type":"header-two","key":"8n35h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Для прототипирования:","type":"header-three","key":"6tqto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"},{"length":8,"offset":10,"style":"BOLD"}],"text":"Codepen / JSFiddle — онлайн-песочницы","type":"ordered-list-item","key":"bknk6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":6,"offset":8,"style":"BOLD"}],"text":"Figma + Lottie — дизайн → код","type":"ordered-list-item","key":"tu7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"Rive — интерактивные анимации","type":"ordered-list-item","key":"cq4nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Для отладки:","type":"header-three","key":"65kht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Chrome DevTools → Animations panel","type":"ordered-list-item","key":"5d381"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Firefox DevTools → Animation inspector","type":"ordered-list-item","key":"ib7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Готовые решения:","type":"header-three","key":"mk8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Animate.css — набор CSS-анимаций","type":"ordered-list-item","key":"5ko38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Hover.css — эффекты при наведении","type":"ordered-list-item","key":"6uopa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Magic Animations — необычные эффекты","type":"ordered-list-item","key":"b3ps0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCA1 Золотые правила анимаций","type":"header-two","key":"8pa2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Быстро начинай, медленно заканчивай — ease-out для лучшего восприятия","type":"ordered-list-item","key":"9vsta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Длительность 200-500мс — дольше только для важных переходов","type":"ordered-list-item","key":"ds1ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Согласованность — все анимации в одном стиле","type":"ordered-list-item","key":"5ms1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Осмысленность — каждая анимация должна иметь цель","type":"ordered-list-item","key":"7elob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Доступность — prefers-reduced-motion для чувствительных пользователей","type":"ordered-list-item","key":"34n3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":79,"style":"BOLD"},{"length":10,"offset":124,"style":"BOLD"},{"length":10,"offset":168,"style":"BOLD"}],"text":"@media (prefers-reduced-motion: reduce) {\n * {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}","type":"blockquote","key":"5tt47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDE80 Ваш первый проект","type":"header-two","key":"agupa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Задание: Создайте страницу с:","type":"unstyled","key":"2e5s7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовком, который плавно появляется","type":"ordered-list-item","key":"alr92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тремя карточками с hover-эффектом","type":"ordered-list-item","key":"58q6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопкой, которая \"пульсирует\" при наведении","type":"ordered-list-item","key":"6nsc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лоадером, который исчезает через 2 секунды","type":"ordered-list-item","key":"9p30j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Бонус: Добавьте анимацию при скролле — элементы появляются при прокрутке.","type":"unstyled","key":"5q281"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":2,"style":"BOLD"}],"text":"✨ P.S. Запомните","type":"header-two","key":"8vin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимации — как специи в кулинарии: немного улучшает, слишком много — портит. Начните с малого, тестируйте на реальных пользователях и помните: лучшая анимация та, которую не замечают, но которая улучшает опыт.","type":"unstyled","key":"54a32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Ваш код сегодня:","type":"unstyled","key":"e06s7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Просто начните */\n.element {\n transition: transform 0.3s;\n}\n\n.element:hover {\n transform: scale(1.05);\n}","type":"blockquote","key":"fv6v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"BOLD"}],"text":"Завтра вы сможете создавать целые анимированные миры! \uD83C\uDF1F","type":"unstyled","key":"1gl7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#анимации #css #javascript #frontend #webdev #ui #ux #вебразработка","type":"unstyled","key":"94jq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"941c2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hwfem0CQAuTsdRsnHh2l"}],"entityMap":{}},"mentions":[]}