motion-offset. 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 motion-offsetpropriedade em CSS diz: quão longe motion-pathvocê está? Esta é a propriedade animável associada aos caminhos de movimento.
.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'); motion-offset: 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'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )No exemplo acima, definimos o motion-offsetvalor inicial como 0%, embora seja importante notar que zero é o valor padrão, mesmo quando não definido explicitamente (poderíamos ter deixado de fora).
Variáveis
A offset-distancepropriedade aceita os seguintes valores:
lengthpercentage
Em ambos os casos, o valor especifica o comprimento da distância do ponto inicial do caminho (o padrão é 0pxou 0%) até o ponto final do caminho.
Exemplo
Neste exemplo, temos dois círculos onde um pequeno círculo viaja ao longo do caminho de um círculo maior.
Aqui está o arquivo SVG que usamos para desenhar as formas:
Agora, podemos definir a .markerclasse em nosso CSS para seguir as .trackcoordenadas da classe:
/* The motion-offset is zero by default */ .marker ( 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 ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )Veja o exemplo simples de caneta de animação ao longo de um caminho por Geoff Graham (@geoffgraham) em CodePen.
Da mesma forma, podemos parar o offset-distancevalor em 50% e a animação cairia na metade do caminho:
Veja o exemplo simples de caneta de animação ao longo de um caminho por Geoff Graham (@geoffgraham) em CodePen.
Ou, para controlar a velocidade da animação, podemos multiplicar o offset-distancevalor por 300% para acelerar as coisas. No entanto, se tivermos especificado a quantidade de tempo que a animação é executada em um valor maior do que o necessário para o elemento percorrer o caminho, o movimento irá parar até que a animação tenha completado seu intervalo antes de repetir:
Veja o exemplo simples de caneta de animação ao longo de um caminho por Geoff Graham (@geoffgraham) em CodePen.
Suporte de navegador
a offset-distancepropriedade ainda é considerada um recurso experimental no momento em que este livro foi escrito e não há documentação sobre o suporte do navegador. No entanto, há documentação sobre motion-pathsuporte e podemos usá-la como uma linha de base por enquanto.
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 |
Informações adicionais
- Especificações de nível 1 do módulo de caminho de movimento
- Exemplos em CodePen
- WebKit Ticket # 139128
- Mozilla Ticket # 1186329
- Solicitação de recurso do Microsoft Edge