Caminho de deslocamento - CSS-Tricks

Esta propriedade começou como motion-path. Esta, e todas as outras propriedades de motion- * relacionadas, estão sendo renomeadas para offset- * na especificação. Estamos mudando os nomes aqui no almanaque. Se você deseja usá-lo agora, provavelmente é melhor usar as duas sintaxes.

A offset-pathpropriedade em CSS define um caminho de movimento para um elemento seguir durante a animação. Aqui está um exemplo usando a sintaxe de caminho SVG:

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); )

Esta propriedade não pode ser animada, mas define o caminho da animação. Usamos a motion-offsetpropriedade para criar a animação. Aqui está um exemplo simples de animação de deslocamento de movimento com uma animação @keyframes:

.thing-that-moves ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Veja o exemplo simples de caneta de animação ao longo de um caminho por CSS-Tricks (@ css-tricks) no CodePen.

Nesta demonstração, o círculo laranja está sendo animado ao longo do offset-pathque definimos no CSS. Na verdade, traçamos esse caminho em SVG com exatamente os mesmos path()dados, mas isso não é necessário para obter o movimento.

Digamos que desenhamos um caminho estranho como este em algum software de edição SVG:

Encontraríamos um caminho como:

O dvalor do atributo é o que buscamos e podemos movê-lo diretamente para o CSS e usá-lo como offset-path:

Veja o Pen zEpLRo por CSS-Tricks (@ css-tricks) no CodePen.

Observe os valores sem unidade na sintaxe do caminho. Se você estiver aplicando CSS a um elemento dentro de SVG, esses valores de coordenadas usarão o sistema de coordenadas configurado nesse SVG viewBox. Se você estiver aplicando o movimento a algum outro elemento HTML, esses valores serão pixels.

Observe também que usamos um gráfico de um dedo apontando para mostrar como o elemento é girado automaticamente para que fique voltado para frente. Você pode controlar isso com offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Valores

Tanto quanto podemos dizer, path()e nonesão os únicos valores de trabalho para offset-path.

A offset-pathpropriedade deve aceitar todos os valores a seguir.

path(): Especifica um caminho na sintaxe de coordenadas SVG
url: Faz referência ao ID de um elemento SVG a ser usado como um caminho de movimento
basic-shape: Especifica uma forma de acordo com a especificação CSS Shapes, que inclui:
- circle()
- ellipse()
- inset()
- polygon()
Clippy é uma ferramenta incrível para gerar valores de formas básicas, aliás.
none: Não especifica nenhum caminho de movimento

Aqui estão alguns testes:

Veja o teste de valores de caminho de movimento da caneta por CSS-Tricks (@ css-tricks) em CodePen.

Até mesmo dizer a um elemento SVG para fazer referência a um caminho definido pelo mesmo SVG via url()não parece funcionar.

Com a API Web Animations

Dan Wilson explorou um pouco disso em Uso futuro: CSS Motion Paths. Você tem acesso a todas essas mesmas coisas em JavaScript por meio da API Web Animations. Por exemplo, digamos que você tenha definido um offset-pathem CSS, você ainda pode controlar a animação por meio de JavaScript:

Veja o Pen CSS MotionPath por CSS-Tricks (@ css-tricks) no CodePen.

Mais exemplos

Atenção! Muitos deles foram criados antes da mudança de motion- * naming para offset- *. Deve ser muito fácil consertá-los se você quiser.

Veja a Caneta Whoosh! por Merih Akar (@merih) em CodePen.

Veja o Pen pJarJO de Eric Willigers (@ericwilligers) no CodePen.

Veja o Pen scalextric car on motion-path por Kseso (@Kseso) no CodePen.

Veja o Pen CSS Motion Path Airplane de Ali Klein (@AliKlein) no CodePen.

Veja o Pen CSS Animate no caminho SVG por 一丝 (@yisi) no CodePen.

Veja o Pen Motion Path Infinity de Dan Wilson (@danwilson) na CodePen.

Veja o Pen CSS Motion Path Spiral de Dan Wilson (@danwilson) no CodePen.

Veja a Caneta zGzJYd de 一丝 (@yisi) no CodePen.

Suporte de navegador

A offset-pathpropriedade ainda é considerada um recurso experimental no momento da redação deste artigo. Se a atual falta de suporte do navegador faz você hesitar em usá-lo em um projeto, então você pode querer considerar o uso do GSAP para este nível de animação, que Sarah também aborda em seu post. Isso oferecerá a você o suporte de navegador mais amplo no momento.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada	Raposa de fogo	IE	Beira	Safári
46	72	Não	79	Não

Celular / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Não

A partir do Chrome 46 e Opera 33 (e as versões móveis relacionadas), temos “suporte inicial” no Blink (sem bandeira).

Há outra maneira de fazer isso?

Nossa própria Sarah Drasner escreveu sobre SMIL, o método nativo de SVG para animações, e como animateMotioné usado para animar objetos ao longo de um caminho SVG. Parece:

Mas SMIL está sendo descontinuado! Portanto, isso não é recomendado.

GreenSock é uma outra maneira, que é recomendada. Sarah fala sobre isso no GSAP + SVG para usuários avançados: movimento ao longo de um caminho (SVG não obrigatório). Exemplo:

Veja a demonstração da caneta para autoRotate true / false por Sarah Drasner (@sdras) em CodePen.