OUJOOD.COM
éfinition de la propriété css offset-path
La propriété offset-path en CSS définit une trajectoire de mouvement qu'un élément doit suivre pendant l'animation.
Syntaxe de la propriété css offset-path
offset-path: none|valeur|initial|inherit;
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')" |
valeurs possibles de la propriété css offset-path
| Valeur | Description |
|---|---|
| none | Valeur par défaut de la propriété offset-path de l'élément. | /tr>
| path() | Spécifier un chemin dans la syntaxe SVG. En savoir plus sur les chemins SVG. | /tr>
| ray() | Non pris en charge actuellement. Spécifier un chemin avec la fonction CSS ray().. | /tr>
| url() | Non pris en charge actuellement. Spécifier un chemin en utilisant l'URL d'un fichier SVG. . | /tr>
| <basic-shape> | Non pris en charge actuellement. Spécifier un chemin en définissant une forme de base à l'aide de fonctions CSS telles que inset(), circle(), ellipse() ou polygon().. | /tr>
Voici un exemple utilisant la syntaxe du chemin SVG :
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");
}
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 55 | 79 | 72 | 15.4 | 45 |
Exemple
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS offset-distance </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mover {
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23, 101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51, 74.56S18.45,58.46,18.45,58.46Z");
offset-rotation: reverse;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
.mover {
width: 71px;
height: 54px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pointer-hand.svg)
no-repeat;
position: absolute;
left: 10%;
top: 100px;
}
</style>
</head>
<body>
<h1>La propriété CSS offset-path </h1>
<div class="mover"></div>
</body>
</html>
Voici un autre exemple plus pratique pour l'utilisation de la propriété css offset-path
Imaginez que l’élément animé le long d’un chemin soit une petite voiture de course. Au fur et à mesure que la voiture de course se déplace le long du chemin, nous voulons qu'elle doit vraiment tourner pour que l’avant de la voiture soit orienté dans la direction où elle se déplace, sinon elle aura l’air bizarre et contre nature. Heureusement, la valeur par défaut de offset-path est auto, ce qui fait exactement ce que nous voulons.
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS offset-distance </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*, *:before, *:after {
box-sizing: inherit;
}
* {margin:0;padding:0;border:0 none; position: relative;}
html {
background: #f5f5f5;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
body {
height:100%;
}
div {
width: 800px;
height: 400px;
margin: 0 auto;
}
svg {
position: absolute;
left: 0; top: 0;
}
.fil0 {
fill: none;
}
.str0 {
stroke: #444;
stroke-width: 30px;
}
.str1 {
stroke: #fff;
stroke-width: 1px;
}
img {
z-index: 1;
width: 100px;
height: auto;
offset-path: path('M626.2 249.2c-36.1, 18.1 -80.6, -1.9 -127.2, -12.2 -67.9, -14.9 -4.3, -56.8 -71.9, -122.6 -82.6, -80.4 -71.3, -43.1 -187.2, 50.7 -33.8, 27.4 -52.3, -3.3 -87.3, 27.2 -13.4, 11.7 -86.8, 75.8 -91.0, 86.3 -11.1, 27.6 6.1, 49.5 31.05, 49.8 134.9, 1.5 274.5, 0.5 410.0, 0.0 65.1, -0.2 98.6, 0.6 120.8, -0.0 34.0, -0.9 41.4, -7.8 95.5, -48.1 45.5, -33.8 12.3, -54.3 -6.9, -58.5 -17.8, -3.8 -69.1, 21.3 -85.7, 27.2z');
animation: infinite scalextric linear 3s;
}
@keyframes scalextric {
0% { offset-distance: 0;}
70% { offset-distance: 46%;}
80% {offset-distance: 90%;}
100% { offset-distance: 100%;}
}
.aviso {
font-family: sans-serif;
position: fixed;
bottom: 0;
left: 0;
background: orange;
color: #fff;
font-weight: 300;
line-height: 1;
padding: .5rem;
border-radius: 0 5px 0 0;
box-shadow: 0 0 4px rgba(0,0,0,.4);
z-index: 100;
}
.aviso a {
text-decoration: none;
color: #000;
}
</style>
</head>
<body>
<h1>La propriété CSS offset-path </h1>
<div>
<img src="https://www.oujood.com/propriete-css/images/voiture.png" alt="voiture" />
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800px" height="400px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 800 400"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path class="fil0 str0" d="M626.2 249.2c-36.1,18.1 -80.6,-1.9 -127.2,-12.2 -67.9,-14.9 -4.3,-56.8 -71.9,-122.6 -82.6,-80.4 -71.3,-43.1 -187.2,50.7 -33.8,27.4 -52.3,-3.3 -87.3,27.2 -13.4,11.7 -86.8,75.8 -91.0,86.3 -11.1,27.6 6.1,49.5 31.05,49.8 134.9,1.5 274.5,0.5 410.0,0.0 65.1,-0.2 98.6,0.6 120.8,-0.0 34.0,-0.9 41.4,-7.8 95.5,-48.1 45.5,-33.8 12.3,-54.3 -6.9,-58.5 -17.8,-3.8 -69.1,21.3 -85.7,27.2z" />
<path class="fil0 str1" d="M626.2 249.2c-36.1,18.1 -80.6,-1.9 -127.2,-12.2 -67.9,-14.9 -4.3,-56.8 -71.9,-122.6 -82.6,-80.4 -71.3,-43.1 -187.2,50.7 -33.8,27.4 -52.3,-3.3 -87.3,27.2 -13.4,11.7 -86.8,75.8 -91.0,86.3 -11.1,27.6 6.1,49.5 31.05,49.8 134.9,1.5 274.5,0.5 410.0,0.0 65.1,-0.2 98.6,0.6 120.8,-0.0 34.0,-0.9 41.4,-7.8 95.5,-48.1 45.5,-33.8 12.3,-54.3 -6.9,-58.5 -17.8,-3.8 -69.1,21.3 -85.7,27.2z" />
</g>
</svg>
<div>
<span class='aviso'>Lien pour la source de l'animation <a href='https://escss.blogspot.com/2015/10/animation-CSS-motion-path-SVG.html'>VOIR</a>, </span>
</body>
</html>