CSS Motion Path modal


👉 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 :

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 :

Chrome Edge firefox Internet Explorer Opera Safari iOS Safari UC Browser Samsung Internet
Chrome-logo Edge Browser-logo firefox-logo Internet Explorer-logo Opera-logo Safari-logo iOS Safari-logo UC Browser-logo Samsung Internet-logo
✔️ ✔️ ✔️ ✔️

<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{
content:'';
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🔗.