Анимация css3 движение звездочки по эллипсу svg
Подскажите пожалуйста, как сделать вращение звёздочки по синему кругу?
.svg__hidden{
display: none;
}
.ellipse {
width: 550px;
height: 160px;
border-radius: 50%;
top: 500px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
border: 2px #e5007e solid;
transform-style: preserve-3d;
}
.ellipse svg {
width: 27px;
height: 27px;
top: 160px;
left: -140px;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
animation: move linear infinite;
}
.ellipse:nth-child(1) {
transform: rotateZ(20deg);
}
.ellipse:nth-child(2) {
transform: rotateZ(30deg);
border: 2px #006ab4 solid;
z-index: 1;
}
.ellipse:nth-child(2) svg {
transform: rotateZ(-30deg);
animation-duration: 20s;
}
@keyframes move {
from {
transform: rotateZ(0deg) translateX(180px) rotateZ(0deg) rotateY(-30deg);
}
to {
transform: rotateZ(360deg) translateX(180px) rotateZ(-360deg) rotateY(-30deg);
}
} <svg width="0" height="0" class="svg__hidden">
<symbol version="1.0" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 95.000000 95.000000" id="star">
<g transform="translate(0.000000,95.000000) scale(0.100000,-0.100000)" stroke="none">
<path d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z"></path>
</g>
</symbol>
</svg>
<div class="a" style="position:relative;">
<div class="ellipse">
</div>
<div class="ellipse">
<svg class="intro__star-sm blink">
<use xlink:href="#star"></use>
</svg>
</div>
</div>Ответы (2 шт):
Автор решения: Alexandr_TT
→ Ссылка
При движении элемента по заданной траектории лучше вместо трансформаций CC3, использовать анимацию SVG: animateMotion
При этом варианте вам не нужно будет мучаться, подбирая многочисленные параметры и трансформации CSS.
Достаточно создать path траектории движения и объект будет четко двигаться по назначенному в теге <mpath> пути.
Если вам нужна будет какая-то другая траектория, то не возникнет никаких проблем, достаточно будет указать эту траекторию.
Прочтите пожалуйста комментарии в коде:
.container {
width:100vw;
heght:auto;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg1" viewBox="0 0 600 400">
<!-- Синяя трасса движения -->
<path id="traceB" d="M98 51c18-2 48 5 72 10a474 474 0 0 1 121 47l41 23c34 20 69 39 99 63 32 26 64 52 87 86 9 12 18 25 18 40 1 8-2 16-7 22-6 6-16 9-24 10-19 3-39 0-58-4-13-3-26-6-39-11a884 884 0 0 1-287-168c-17-15-32-32-45-52-4-6-9-17-10-25-6-27 7-37 32-41Z" id="path817" fill="none" stroke="#3589C4" stroke-width="2" />
<!-- Розовая трасса движения -->
<path id="traceP" d="M75 89c65-11 133 5 197 21 53 13 104 36 153 62 37 19 76 40 106 70 9 9 17 20 21 32 4 16 2 25-11 34-9 6-20 9-31 10-47 5-96-3-143-13A764 764 0 0 1 95 186c-14-11-28-25-39-40-18-35-10-51 19-57Z" id="path819" fill="none" stroke="#ED50A7" stroke-width="2" />
<!-- Звездочка -->
<g id="star" transform="translate(0,-13) scale(0.03)">
<path d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z"/>
<!-- Анимация движения звездочки по эллипсу -->
<animateMotion begin="0s" dur="14s" rotate="auto" repeatCount="indefinite" additive="sum">
<mpath xlink:href="#traceB" />
</animateMotion>
</g>
</svg>
</div>Если нужно запустить звезду по другому эллипсу, достаточно вместо
<mpath xlink:href="#traceB" /> указать id другого эллипса <mpath xlink:href="#traceP"
Настройка размера звезды и её положения относительно эллипса
<g id="star" transform="translate(0,-13) scale(0.03)">
.container {
width:100vw;
heght:auto;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg1" viewBox="0 0 600 400">
<!-- Синяя трасса движения -->
<path id="traceB" d="M98 51c18-2 48 5 72 10a474 474 0 0 1 121 47l41 23c34 20 69 39 99 63 32 26 64 52 87 86 9 12 18 25 18 40 1 8-2 16-7 22-6 6-16 9-24 10-19 3-39 0-58-4-13-3-26-6-39-11a884 884 0 0 1-287-168c-17-15-32-32-45-52-4-6-9-17-10-25-6-27 7-37 32-41Z" id="path817" fill="none" stroke="#3589C4" stroke-width="2" />
<!-- Розовая трасса движения -->
<path id="traceP" d="M75 89c65-11 133 5 197 21 53 13 104 36 153 62 37 19 76 40 106 70 9 9 17 20 21 32 4 16 2 25-11 34-9 6-20 9-31 10-47 5-96-3-143-13A764 764 0 0 1 95 186c-14-11-28-25-39-40-18-35-10-51 19-57Z" id="path819" fill="none" stroke="#ED50A7" stroke-width="2" />
<!-- Звездочка -->
<g id="star" transform="translate(0,-13) scale(0.03)">
<path d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z"/>
<!-- Анимация движения звездочки по эллипсу -->
<animateMotion begin="0s" dur="14s" rotate="auto" repeatCount="indefinite" additive="sum">
<mpath xlink:href="#traceP" />
</animateMotion>
</g>
</svg>
</div>Приложение будет адаптивно и кроссбраузерным в современных браузерах, включая Edge MS/
Автор решения: Alexandr_TT
→ Ссылка
Настройки и несколько совмещенных анимаций
<g id="star" transform="translate(0,0) scale(0.03)">
Если не смещать объект, то при animateMotion он будет двигаться по трассе соединяясь с ней верхним левым углом.
.container {
width:100vw;
heght:auto;
background:black;
}
#path {
transform-origin: 50% 50%;
transform-box: fill-box;
fill:yellow;
fill-opacity:1;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg1" viewBox="0 0 600 400">
<!-- Розовая трасса движения -->
<path id="traceP" d="M75 89c65-11 133 5 197 21 53 13 104 36 153 62 37 19 76 40 106 70 9 9 17 20 21 32 4 16 2 25-11 34-9 6-20 9-31 10-47 5-96-3-143-13A764 764 0 0 1 95 186c-14-11-28-25-39-40-18-35-10-51 19-57Z" fill="none" stroke="#ED50A7" stroke-width="2" />
<!-- Звездочка -->
<g>
<g id="star" transform="translate(0,0) scale(0.03)">
<path id="path" d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z"/>
</g>
<!-- Анимация движения звездочки по эллипсу -->
<animateMotion begin="0s" dur="14s" rotate="auto" repeatCount="indefinite" additive="sum">
<mpath xlink:href="#traceP" />
</animateMotion>
</g>
</svg>
</div>Поднимаем звезду вверх, теперь она касается траектории нижним углом
<g id="star" transform="translate(0,-28) scale(0.03)">
.container {
width:100vw;
heght:auto;
background:black;
}
#path {
transform-origin: 50% 50%;
transform-box: fill-box;
fill:yellow;
fill-opacity:1;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg1" viewBox="0 0 600 400">
<!-- Розовая трасса движения -->
<path id="traceP" d="M75 89c65-11 133 5 197 21 53 13 104 36 153 62 37 19 76 40 106 70 9 9 17 20 21 32 4 16 2 25-11 34-9 6-20 9-31 10-47 5-96-3-143-13A764 764 0 0 1 95 186c-14-11-28-25-39-40-18-35-10-51 19-57Z" fill="none" stroke="#ED50A7" stroke-width="2" />
<!-- Звездочка -->
<g>
<g id="star" transform="translate(0,-28) scale(0.03)">
<path id="path" d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z"/>
</g>
<!-- Анимация движения звездочки по эллипсу -->
<animateMotion begin="0s" dur="14s" rotate="auto" repeatCount="indefinite" additive="sum">
<mpath xlink:href="#traceP" />
</animateMotion>
</g>
</svg>
</div>Добавляем к анимации движения, анимацию вращения звезды, чтобы согласовать две анимации друг с другом необходимо добавить additive="sum"
<!-- Анимация вращения звездочки -->
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="1.8s"
values="0;360" repeatCount="indefinite" additive="sum" />
.container {
width:100vw;
heght:auto;
background:black;
}
#path {
transform-origin: 50% 50%;
transform-box: fill-box;
fill:yellow;
fill-opacity:1;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg1" viewBox="0 0 600 400">
<!-- Розовая трасса движения -->
<path id="traceP" d="M75 89c65-11 133 5 197 21 53 13 104 36 153 62 37 19 76 40 106 70 9 9 17 20 21 32 4 16 2 25-11 34-9 6-20 9-31 10-47 5-96-3-143-13A764 764 0 0 1 95 186c-14-11-28-25-39-40-18-35-10-51 19-57Z" fill="none" stroke="#ED50A7" stroke-width="2" />
<!-- Звездочка -->
<g>
<g id="star" transform="translate(0,-28) scale(0.03)">
<path id="path" d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z">
<!-- Анимация вращения звездочки -->
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="1.8s" values="0;360" repeatCount="indefinite" />
</path>
</g>
<!-- Анимация движения звездочки по эллипсу -->
<animateMotion begin="0s" dur="16s" rotate="auto" repeatCount="indefinite" additive="sum">
<mpath xlink:href="#traceP" />
</animateMotion>
</g>
</svg>
</div>Две звездочки бегут по одной трассе, но они разного размера и имеют разные скорости
.container {
width:100vw;
heght:auto;
background:black;
}
#path {
transform-origin: 50% 50%;
transform-box: fill-box;
fill:yellow;
fill-opacity:1;
}
#path2 {
transform-origin: 50% 50%;
transform-box: fill-box;
fill:crimson;
fill-opacity:1;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg1" viewBox="0 0 600 400">
<!-- Розовая трасса движения -->
<path id="traceP" d="M75 89c65-11 133 5 197 21 53 13 104 36 153 62 37 19 76 40 106 70 9 9 17 20 21 32 4 16 2 25-11 34-9 6-20 9-31 10-47 5-96-3-143-13A764 764 0 0 1 95 186c-14-11-28-25-39-40-18-35-10-51 19-57Z" fill="none" stroke="#ED50A7" stroke-width="2" />
<!-- Звездочка -->
<g>
<g id="star" transform="translate(0,-32) scale(0.035)">
<path id="path" d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z">
<!-- Анимация вращения звездочки -->
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="1.8s" values="0;360" repeatCount="indefinite" />
</path>
</g>
<!-- Анимация движения звездочки по эллипсу -->
<animateMotion begin="0s" dur="16s" rotate="auto" repeatCount="indefinite" additive="sum">
<mpath xlink:href="#traceP" />
</animateMotion>
</g>
<!-- Звездочка2 (красная) -->
<g>
<g id="star2" transform="translate(0,-28) scale(0.03)">
<path id="path2" d="M435 760 c-24 -112 -44 -185 -54 -194 -9 -7 -95 -31 -191 -51 -96
-21 -176 -38 -178 -40 -1 -1 79 -19 178 -40 112 -24 185 -44 194 -54 7 -9 31
-95 51 -191 21 -96 38 -176 40 -178 1 -1 19 79 40 178 24 112 44 185 54 194 9
7 95 31 191 51 96 21 176 38 178 40 1 1 -79 19 -178 40 -112 24 -185 44 -194
54 -7 9 -31 95 -51 191 -21 96 -38 176 -40 178 -1 1 -19 -79 -40 -178z">
<!-- Анимация вращения звездочки -->
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="1.4s" values="0;360" repeatCount="indefinite" />
</path>
</g>
<!-- Анимация движения звездочки по эллипсу -->
<animateMotion begin="0s" dur="12s" rotate="auto" repeatCount="indefinite" additive="sum">
<mpath xlink:href="#traceP" />
</animateMotion>
</g>