Css движение по эллипсу

Анимация 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); >>

Ответы (2 шт):

При движении элемента по заданной траектории лучше вместо трансформаций CC3, использовать анимацию SVG: animateMotion
При этом варианте вам не нужно будет мучаться, подбирая многочисленные параметры и трансформации CSS.
Достаточно создать path траектории движения и объект будет четко двигаться по назначенному в теге пути.

Если вам нужна будет какая-то другая траектория, то не возникнет никаких проблем, достаточно будет указать эту траекторию.

Прочтите пожалуйста комментарии в коде:

Если нужно запустить звезду по другому эллипсу, достаточно вместо
указать id другого эллипса

Настройка размера звезды и её положения относительно эллипса

Приложение будет адаптивно и кроссбраузерным в современных браузерах, включая Edge MS/

Настройки и несколько совмещенных анимаций

Если не смещать объект, то при animateMotion он будет двигаться по трассе соединяясь с ней верхним левым углом.

Поднимаем звезду вверх, теперь она касается траектории нижним углом

Добавляем к анимации движения, анимацию вращения звезды, чтобы согласовать две анимации друг с другом необходимо добавить additive=»sum»

Две звездочки бегут по одной трассе, но они разного размера и имеют разные скорости

Источник

How to Move an Element in a Circular Path with CSS

Moving an element along a circular path is an interesting problem to solve using CSS. It can be achieved by animating the CSS transform property.

Demo #1 — Moving Along a Circe by 120 Degrees from the Starting Point

Demo #2 — Moving Along a Circle by 120 Degrees Each Time

This is similar to Demo #1, except that the sum of rotation angles is saved. On each click, the element moves from X degrees to X+120 degrees.

How Circular Motion is Achieved

The element which is to be rotated must have a parent element. To rotate the child by 60 degrees, first rotate the parent by 60 degrees. At the same time, rotate the child by minus(-) 60 degrees. The child must be rotated by an equal opposite angle so that it does look inverted when the animation is completed.

You can animate using CSS transition, CSS animation or the new Web Animations API.

Step 1 : CSS of the Parent Element

The child is going to have absolute position, so the parent must have relative position (or absolute position). Give equal height and width, and make its border-radius as 50% so that it becomes circular in shape. Add the initial value of transform property. Also add transition property for animating the transform property.

Step 2 : CSS of the Child Element

The child is absolutely positioned. Place the child at an appropriate starting position, in this case at the top center of the parent.

Add transform and transition properties.

In this example case, the child contains an image.

Step 3 : Showing the Animation

Assume that you have a button, which on clicked is supposed to move the child by 120 degrees. In the event handler, rotate the parent by 120 degrees and rotate the child by -120 degrees.

$("#button").on('click', function() < $("#parent").css(< transform: 'rotate(120deg)' >); $("#child").css(< transform: 'rotate(-120deg)' >); >); 

This is how the circular motion in Demo #1 is achieved.

In Demo #2, the total angle moved is saved in a variable. Upon click, rotation happens from the old angle to the newly incremented angle.

var _CURRENT_ANGLE = 0; $("#button").on('click', function() < _CURRENT_ANGLE += 120; $("#parent-2").css(< transform: 'rotate(' + _CURRENT_ANGLE + 'deg)' >); $("#child-2").css(< transform: 'rotate(-' + _CURRENT_ANGLE + 'deg)' >); >); 

Using Web Animations API

The animation can also be done with the new Web Animations API, except that the syntax is a little different and the performance of the animation will be better.

Of course you don’t need to add transition property here to perform the animation. In this case animate method will perform the animation.

Using Web Animations API, the code would be like :

$("#button").on('click', function() < $("#parent").get(0).animate([ < transform: 'rotate(0deg)' >, < transform: 'rotate(120deg)' >, ], < duration: 700, easing: 'linear', iterations: 1, fill: 'forwards' >); $("#child").get(0).animate([ < transform: 'rotate(0deg)' >, < transform: 'rotate(-120deg)' >, ], < duration: 700, easing: 'linear', iterations: 1, fill: 'forwards' >); >); 

Note that Web Animations API is available only in the latest versions of Chrome & Opera.

Источник

Анимации элементов по дугам, окружностям и эллипсам с использованием CSS

Веб-анимация наиболее часто создается с использованием двух положений: начального и конечного состояний или расположений A и B. Движение элементов по дугам, эллипсам и окружностям используется реже, но об этом тоже важно знать.

Окружности

Окружности — наиболее простой вариант. Самое важное, от чего зависит все остальное, — задать значения свойства начала трансформации элемента. Здесь и далее весь код CSS приведен для ясности без приставок производителей, которые уже и не нужны для большинства современных версий браузеров:

div#redball  width: 50px; height: 50px; border-radius: 50%; background: red; transform-origin: 200% center; >

Начальная точка для каждой трансформации будет располагаться в 200px правее элемента:

Элемент HTML со смещенным началом трансформации

Это означает, что вращение элемента будет происходить вокруг точки смещения начала трансформации:

@keyframes circle  to  transform: rotate(1turn); > > div#redball  animation: circle 2s infinite; >

Также важно изменить значение по умолчанию временной характеристики перехода: если Вам нужно, чтобы движение было бесконечным прямолинейным, используйте следующие значения:

div#redball  animation: circle 2s infinite linear; >

Это создаст бесшовную анимации движения по кругу.

Lea Verou предложила другой хороший способ анимирования движения элементов по кругу.

Дуги

Линейная анимация, примененная к движению по дуге, обычно будет выглядеть искусственно и неуместно. Для создания движения маятника, как в уроке о гипнотизирующей анимации логотипа, нужно применить значение временной характеристики перехода ease-in-out, при котором анимация начнется медленно, немного ускорится и закончится тоже медленно, а также ограничить область вращения:

@keyframes sway to  transform: rotate(30deg); > > #watch  transform-origin: center top; transform: rotate(-30deg); animation: sway 2.2s infinite alternate ease-in-out; >

Такой тип анимации часто используется для показа чего-то : урок «веер из фотографий с иcпользованием CSS» — это хороший пример такого применения.

Эллипсы

Самая сложная форма движения — наиболее характерное для нашей вселенной движение по эллипсу. Наиболее простой известный нам способ создать это движение — разделить анимированное движение на слои: двигать элемент вверх и вниз половину фазы, когда он двигается по кругу. Чтобы добиться этого, элемент вкладывается в контейнер:

И каждый элемент анимируется отдельно:

@keyframes circle  to  transform: rotate(1turn); > > @keyframes updown to  transform: translateY(200px); > > figure  animation: updown 1s infinite ease-in-out alternate; > div#redball  width: 100px; height: 50px; border-radius: 50%; background: red; transform-origin: center 300%; animation: circle 2s infinite linear; >

Движение вверх-вниз продляет круговую анимацию в эллипс, усиливая вертикальное или горизонтальное движение, определяя основные оси эллипса. Значение временной характеристики перехода ease-in-out используется, чтобы сделать движение плавным, так как иначе получится движение по закругленному ромбу, Направление анимации alternate проигрывает ключевые кадры вперед, затем назад и так по кругу и используется для того, чтобы вертикальное движение повторялось вперед-назад плавно. Обратите внимание на то, что анимация вверх-вниз происходит половину времени, в отличие от анимации по кругу.

И результат выглядит следующим образом:

Автор урока Dudley Storey

Источник

Анимация путей по окружности с помощью CSS3

От автора: Долгое время я предполагал, что нельзя применять CSS Transitions или анимацию для передвижения объектов DOM каким-либо другим образом, кроме движения по прямой. Конечно, разработчик мог бы применить множество ключевых кадров для создания списка прямых путей и симулировать кривую, но не думал, что можно определить кривую с помощью всего двух ключевых кадров или простого CSS transition. Я ошибался.

Вышеприведенный пример анимирован с помощью всего двух ключевых кадров анимации CSS3! Хотя вы могли применить для этого jQuery.animate() или requestAnimationFrame, лучше взять CSS3 вместо JavaScript’а — полученная анимация всегда гарантированно будет глаже (особенно на мобильных устройствах) плюс может сэкономить энергию батареи. В данной статье приведен рецепт CSS выполнения этого трюка во всех браузерах с включенной анимацией CSS3 с тщательным описанием примененной математики, а также альтернативный вариант для старых версий IE, не поддерживающих анимацию CSS3.

Дайте мне CSS!

Единственная причина, почему CSS здесь такой длинный – повторение кода префикса для браузеров:

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Источник

Moving along a curved path in CSS with layered animation

CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying an animation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.

Instead of turning to JavaScript for producing more natural-looking motion, there’s an easy way to work around this limitation: layered animation. By using two or more objects to drive an animation, we get fine-grained control over an object’s path, and can apply one timing function for the movement along the X-axis, and another one for the Y-axis.

The problem

Before we dive into the solution, let’s look closer at the problem. CSS animations and transitions restrict us to animating along straight paths. How? By always taking the shortest path from point A to point B. That’s great—this is what we’re after in most cases—but we lack a way of telling CSS to “take a nicer path” rather than “take the shortest path”.

The most straightforward way of animating between two points in CSS (with hardware acceleration) is to use transform to translate an object over time. This produces movement along a linear path. In this @keyframes block, we’re going back and forth between (0,0) and (100,-100), as seen in the example above:

@keyframes straightLine  50%  transform: translate3D(100px, -100px, 0); > > .dot  animation: straightLine 2.5s infinite linear; > 

This isn’t complicated, but let’s stop here for a moment. To understand the solution to the problem we need to, at least visually, take the animation apart.

At 0% we start out at (0,0), and at 50% we use translate3D(100px, -100px, 0) to move to (100,-100), then back again. Put another way, we move the object 100px to the right, and 100px upwards, and these two translations combined move the object at an angle.

Источник