CSS Motion Path modal

🏠 Accueil blog » CSS
Votre navigateur ne prend pas en charge cette démonstration.

👉 CSS Motion Path :

Motion Path est un module qui fait partie de la spécification CSS. Il s'agit pour l'heure du premier niveau. Le support est donc très limité et la documentation n'est pas très riche. En attendant, ce module paraît très prometteur.

CSS motion Path définit les propriétés suivantes :

  1. offset-path
  2. offset-distance
  3. offset-position
  4. offset-anchor
  5. offset-rotate

NB : la propriété offset est une propriété raccourcie regroupant les propriétés ci-dessus.

Ci-dessous une petite démonstration d'une boîte de dialogue avec CSS Path motion :

✔️ Support navigateurs :


<input name="modal" type="checkbox" id="modal1">
<label for="modal1"> 
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
</label>
<div class="modal-1">
<label class=ferm for="modal1">❎</label>
<h2>CSS Motion Paths modal</h2>
<div class="contenu_modal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>
</div>


[class^="modal-"]{ 
z-index:1;
position:absolute;
top:50%;
transform:scale(0);
opacity:0;
height:0;
visibility:hidden;
offset-distance:100%;      
offset-rotate:0;
filter:blur(8px)}

#modal4:checked ~ .modal-4,
#modal3:checked ~ .modal-3,
#modal2:checked ~ .modal-2, 
#modal1:checked ~ .modal-1{
max-width:500px;  
height:auto;
offset-distance:0;  
offset-rotate:0;
background-color:white;
border:1px solid #ccc;
transition:1s ease-out;
box-shadow:0 0 2rem hsla(0,0%,0%,.2);
filter:blur(0);
opacity:1;
visibility:visible;
transform:scale(1)}
    
.modal-1{
offset-path:path("M 250,0 S 300,-500 -700,-200");/*haut gauche*/
}
.modal-2{
offset-path:path("M 250,0 S 300,500 -700,-200");/*bas gauche*/
}   
.modal-3{
offset-path:path("M 250,0 S 300,-500 1400,-200");/*haut droite*/
}     
.modal-4{
offset-path:path("M 250,0 S 300,500 1400,200");/*bas droite*/
} 
    
@media (prefers-reduced-motion) {
@supports (offset-rotate: 0deg) {
.modal {
offset-path: none;
    }
  }
}
    
    
[class^="modal-"] h2{
border-bottom:1px solid #ccc;
text-align:center;
margin:0}
    
[class^="modal-"] h2,
.contenu_modal {padding: 1rem}

[class^="modal-"] label{display:flex;justify-content:flex-end}
    

input[name="modal"]:checked+label~.overlay{
background-color:#fff;
transition:1s;
height:100%;
width:100%;
position:absolute}
     
input[name="modal"]+label {
position:relative;
display:inline-flex;
padding:1.5rem 4.5rem;
background-color:#7b61ff;
box-shadow:1px 1px 8px rgba(0, 0, 0, 0.2)
}




.trait{
position:absolute;
display:block;
height:10px;
transform-origin:5px 5px;
pointer-events:none}
    
.trait:nth-child(1){
top:50%;
left:100%;
transform:translate3d(-10px,-5px,0)}
    
.trait:nth-child(2){
bottom:0;
left:100%;
transform:translate3d(-10px,0,0) rotate(45deg)}
    
.trait:nth-child(3){
bottom:0;
left:50%;
transform:translate3d(-10px,0,0) rotate(90deg)}
    
.trait:nth-child(4){
bottom:0;
left:0;
transform:rotate(135deg)}
    
.trait:nth-child(5){
top: 50%;
left: 0;
transform: translate3d(0, -5px, 0) rotate(180deg)}
    
.trait:nth-child(6){
top:0;
left:0;
transform:rotate(225deg)}
    
.trait:nth-child(7){
top:0;
left:50%;
transform:translate3d(0,0,0) rotate(270deg)}
    
.trait:nth-child(8){
top:0;
left:100%;
transform:translate3d(-10px, 0, 0) rotate(315deg)}
    
.trait:before{
position:absolute;
display: block;
width:16px;
height:2px;
background-color:#7A5FFF;
offset-path:path("M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4");
offset-distance:0;
pointer-events:none}

input[name="modal"]:checked+label .trait:before {
animation: trait 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}



@keyframes trait {
from{
offset-distance: 0%;
opacity:1;
filter:blur(0)
}
to {
offset-distance: 100%;
opacity:0;
filter:blur(2px)
  }
}   


👉 Source, inspiration, ressources :

Source exemple modal.

Source effet sur bouton

Article sur le Motion Path (EN)

Article en allemand sur le sujet