Как анимировать элемент?

Как анимировать элемент на фронтенде

Есть несколько способов создавать анимации на веб-странице. Выбор зависит от сложности, производительности и требований проекта. Рассмотрю все основные подходы.

1. CSS Transitions

Простейший и самый эффективный способ для простых анимаций:

<style>
  .button {
    background-color: blue;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    
    /* Плавный переход при изменении свойств */
    transition: all 0.3s ease-in-out;
  }
  
  .button:hover {
    background-color: red;
    transform: scale(1.05);
  }
</style>

<button class="button">Hover me</button>

Преимущества:

• Минимальный код
• Отличная производительность (использует GPU)
• Нативный браузерный механизм

Недостатки:

• Только переходы между двумя состояниями
• Нельзя анимировать, не запуская свойство

2. CSS Animations

Для более сложных анимаций с несколькими ключевыми кадрами:

<style>
  @keyframes slideIn {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }
    
    50% {
      opacity: 0.5;
    }
    
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .box {
    animation: slideIn 0.5s ease-out forwards;
    /* 
      animation: name duration timing-function delay 
                iteration-count direction fill-mode;
    */
  }
  
  /* Анимация с задержкой */
  .box:nth-child(1) { animation-delay: 0s; }
  .box:nth-child(2) { animation-delay: 0.1s; }
  .box:nth-child(3) { animation-delay: 0.2s; }
</style>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

Параметры анимации:

• duration — длительность
• timing-function — функция ускорения (ease, linear, ease-in, ease-out)
• delay — задержка начала
• iteration-count — количество повторений (infinite для цикла)
• direction — направление (normal, reverse, alternate)
• fill-mode — состояние до/после (forwards, backwards, both)

3. JavaScript и requestAnimationFrame

Для сложных анимаций с точным контролем:

function animateElement(element, targetValue, duration) {
  const startTime = performance.now();
  const startValue = 0;
  
  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    // Линейная интерполяция
    const value = startValue + (targetValue - startValue) * progress;
    element.style.opacity = value;
    
    if (progress < 1) {
      // Продолжить анимацию
      requestAnimationFrame(animate);
    } else {
      // Анимация завершена
      console.log('Animation complete');
    }
  }
  
  requestAnimationFrame(animate);
}

const box = document.querySelector('.box');
animateElement(box, 1, 1000); // 1000ms

Функции ускорения (easing functions):

// Линейная
const easeLinear = t => t;

// Ease-in (медленно начинается)
const easeInQuad = t => t * t;

// Ease-out (быстро начинается, медленно заканчивается)
const easeOutQuad = t => t * (2 - t);

// Ease-in-out
const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;

// Использование
function animateWithEasing(element, targetValue, duration, easing) {
  const startTime = performance.now();
  const startValue = 0;
  
  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    // Применяем функцию ускорения
    const easedProgress = easing(progress);
    const value = startValue + (targetValue - startValue) * easedProgress;
    element.style.opacity = value;
    
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }
  
  requestAnimationFrame(animate);
}

4. Canvas анимация

Для высокопроизводительных анимаций:

<canvas id="canvas" width="400" height="300"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let x = 0;
let y = 150;

function animate() {
  // Очистить canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Рисовать с новой позицией
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, y, 50, 50);
  
  // Изменить позицию
  x += 2;
  
  if (x < canvas.width) {
    requestAnimationFrame(animate);
  }
}

animate();
</script>

5. SVG анимация

Для векторной графики:

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="blue">
    <!-- SMIL анимация -->
    <animate 
      attributeName="cx" 
      from="50" 
      to="150" 
      dur="2s" 
      repeatCount="infinite" />
  </circle>
</svg>

<!-- Или CSS анимация для SVG -->
<style>
  circle {
    animation: moveSVG 2s infinite;
  }
  
  @keyframes moveSVG {
    0% { cx: 50; }
    100% { cx: 150; }
  }
</style>

6. Библиотеки для анимации

GSAP (GreenSock Animation Platform)

Мощная библиотека для сложных анимаций:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>
// Простая анимация
gsap.to('.box', { 
  duration: 1, 
  x: 100, 
  opacity: 0.5,
  rotation: 360,
  ease: 'power2.inOut'
});

// Очередь анимаций
const timeline = gsap.timeline();
timeline
  .to('.box1', { x: 100, duration: 1 })
  .to('.box2', { x: 100, duration: 1 }, 0) // начать одновременно
  .to('.box3', { x: 100, duration: 1 });

// Контроль воспроизведения
gsap.to('.box', { 
  x: 100, 
  duration: 2,
  onComplete: () => console.log('Done!')
});
</script>

Framer Motion (для React)

import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5 }}
    >
      Animated content
    </motion.div>
  );
}

// С hover
function HoverBox() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
    >
      Click me
    </motion.button>
  );
}

// Очередь анимаций
function StaggeredList() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };
  
  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 }
  };
  
  return (
    <motion.ul 
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {[1, 2, 3].map(i => (
        <motion.li key={i} variants={itemVariants}>
          Item {i}
        </motion.li>
      ))}
    </motion.ul>
  );
}

7. Практический пример: Анимация загрузки

<style>
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes fadeInOut {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }
  
  .loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  .fade {
    animation: fadeInOut 1.5s ease-in-out infinite;
  }
</style>

<div class="loader"></div>
<div class="fade">Loading...</div>

8. Оптимизация производительности

// ХОРОШО: анимировать transform (GPU ускорено)
gsap.to('.box', { x: 100, duration: 1 });

// ПЛОХО: анимировать left (вызывает reflow)
gsap.to('.box', { left: 100, duration: 1 });

// ХОРОШО: используйте will-change
.box {
  will-change: transform;
}

// Отменить will-change когда анимация завершена
function optimize(element) {
  element.style.willChange = 'transform';
  
  gsap.to(element, {
    x: 100,
    duration: 1,
    onComplete: () => {
      element.style.willChange = 'auto';
    }
  });
}

Выбор метода

Вывод

Для большинства случаев используйте:

• CSS Transitions/Animations для простых эффектов
• Framer Motion если используете React
• GSAP для сложных и кросс-браузерных анимаций
• requestAnimationFrame если нужен точный контроль

Запомните:

• Анимируйте transform и opacity (GPU ускорено)
• Избегайте анимирования layout свойств (left, width, height)
• Используйте will-change для оптимизации
• Тестируйте на слабых устройствах