Анимация GSAP, AnimeJs или CSS?

никак не могу анимировать логотип.
1. текст съезжается в звездочку
2.текст плавно переходит в звездочку
3. текст встает по середине
4. звездочка пульсирует
По ссылке то, как у меня получилось.
А на картинке - как должно быть.
Что я делаю не так?
628957a255a52257594864.png
Код html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="./script.js" defer></script>
</head>
<body>
    <svg id="stern" version="1.0" xmlns="http://www.w3.org/2000/svg"
    width="1280.000000pt" height="1234.000000pt" viewBox="0 0 1280.000000 1234.000000"
    preserveAspectRatio="xMidYMid meet">

    <g id="g"></g>
    <text x="400" y="360" fill="black" font-family="Verdana, serif" font-size="24" font-weight="900">Fotostudio Stern</text> 



   <metadata>
   Created by potrace 1.15, written by Peter Selinger 2001-2017
   </metadata>
   <g transform="translate(0.000000,1234.000000) scale(0.100000,-0.100000)"
   fill="#ffeb3b" stroke="none">
   <path d="M6293 11153 c-37 -40 -297 -432 -375 -568 -53 -91 -298 -594 -298
   -611 0 -3 -18 -44 -41 -92 -23 -48 -52 -112 -66 -142 -14 -30 -38 -82 -53
   -115 -79 -168 -120 -257 -120 -260 0 -1 -29 -64 -65 -140 -36 -75 -65 -138
   -65 -140 0 -6 -111 -239 -179 -374 -118 -236 -203 -361 -323 -477 -174 -168

Код css
#stern {
    width: 300px;
    height: 300px;
    margin:100px;
    display: block;
    border-radius: 50%;
    animation: pulse 1.3s none;
  }

 
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(255, 235, 58, 1);
      box-shadow: 0 0 0 0 rgba(255, 235, 58, 1);
    }
    70% {
        -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
        box-shadow: 0 0 0 20px rgba(204,169,44, 0);
    }
}

Код js
anime({
    targets: [
        '#stern',
        document.querySelector('#stern'),

    ],
    translateX: {
        value: 250,
        duration: 800,
    },
    rotate: {
        value: 360,
        duration: 1800,
        easing: 'easeInOutSine'
      }
});
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы