<div id="contain">
<svg class="anim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 841.89 595.28"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-7{stroke:#1d1d1b;stroke-miterlimit:10;}.cls-2,.cls-5{fill:none;}.cls-3,.cls-6,.cls-7{opacity:0.09;}.cls-3{fill:url(#Dégradé_sans_nom_56);}.cls-4{fill:#1d1d1b;}.cls-5{opacity:0.21;}.cls-6{fill:url(#Dégradé_sans_nom_67);}.cls-7{fill:url(#Dégradé_sans_nom_69);}</style><linearGradient id="Dégradé_sans_nom_56" x1="322.07" y1="474.39" x2="377.94" y2="285.96" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#617286"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="Dégradé_sans_nom_67" x1="437.68" y1="426.51" x2="460" y2="426.51" gradientUnits="userSpaceOnUse"><stop offset="1" stop-color="#617286"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="Dégradé_sans_nom_69" x1="488.89" y1="404.28" x2="510.4" y2="404.28" gradientUnits="userSpaceOnUse"><stop offset="0.98" stop-color="#617286"/><stop offset="1" stop-color="#f9fafb"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>fantomePlan de travail 1</title><g id="tra"><path class="cls-1" d="M312,401.5s39.33,4.5,53.33-73.5,1.34-78.33,11.34-142.33c0,0,9.79-93,113.46-64.29,0,0,51.87,10,38.87,115,0,0-9.67,75.67-5.33,97.67s-14,70-14,70-4.17,7.5-20.36,7.31c0,0-8.5,23.13-30.43,27.88,0,0-15.5.87-17.44-1.75s-3.44,1.75-2.69-17.69c0,0-38.44,17.69-53.44,18.69s-21.62-6.38-21.68-17.94c0,0-16.38,11.81-38.57,2.88,0,0-14.31-7.44-15.25-14.57v-5.56S310.63,401.45,312,401.5Z"/><path class="cls-2" d="M453.5,171s-25.62,13-25.75,27,.63,17,6.88,20,20.5-11.5,20.87-22.87S457.38,171.13,453.5,171Z"/><path class="cls-2" d="M497.74,172.67s25.62,13,25.75,27-.63,17-6.88,20-20.5-11.5-20.87-22.87S493.86,172.8,497.74,172.67Z"/><path class="cls-2" d="M476.42,218.4s-17.39,4.27-20.32,25,7.9,21.16,15.82,21.83,21.75-9.35,21.5-23.43S488.08,216.55,476.42,218.4Z"/></g><g id="Calque_3" data-name="Calque 3"><path class="cls-3" d="M372.42,244.21c.21,20.14.88,39.38-7.09,83.79-14,78-53.33,73.5-53.33,73.5-1.37-.05-2.19,1.75-2.19,1.75v5.56c.94,7.13,15.25,14.57,15.25,14.57,22.19,8.93,38.57-2.88,38.57-2.88,0,.27,0,.53,0,.79,15.69-18.3,26.34-54,26.34-95C390,293.44,383.18,264,372.42,244.21Z"/><path class="cls-4" d="M453.5,171s-25.62,13-25.75,27,.63,17,6.88,20,20.5-11.5,20.87-22.87S457.38,171.13,453.5,171Z"/><path class="cls-4" d="M497.74,172.67s25.62,13,25.75,27-.63,17-6.88,20-20.5-11.5-20.87-22.87S493.86,172.8,497.74,172.67Z"/><path class="cls-4" d="M476.42,218.4s-17.39,4.27-20.32,25,7.9,21.16,15.82,21.83,21.75-9.35,21.5-23.43S488.08,216.55,476.42,218.4Z"/><path class="cls-5" d="M441.44,437.44s18.48-7.69,16.92-17.24c0,0-2.86-10.7-19.61-.45"/><path class="cls-6" d="M458,417.46c-5-4.16-12.88-1.56-20.32,2.78l1.07-.49c-.75,19.44.75,15.06,2.69,17.69a1.29,1.29,0,0,0,.2.21C452.76,431.66,464.86,423.19,458,417.46Z"/><path class="cls-7" d="M493.25,396.25s-2.41,7.76-4.36,16.11c.28-.67.42-1.05.42-1.05,16.19.19,20.36-7.31,20.36-7.31s.27-.71.73-2A23.72,23.72,0,0,0,493.25,396.25Z"/></g></svg>
</div>
<img src="http://image.noelshack.com/fichiers/2018/41/4/1539261304-lampa.jpg" alt="">body{
background:black;
margin:0;
padding:0;
}
.anim{
opacity:0;
}
#contain {
width:400px;
position:absolute;
margin-top:40vh;
.anim{
animation: slide 8s infinite linear;
}
}
@keyframes slide {
0% {
transform: translate(0,0);
opacity:0;
}
20% {
transform: translate(5%,0);
opacity:0.4;
}
25% {
transform: translate(50%,0);
opacity:0.3;
}
28% {
transform: translate(60%,0);
opacity:0.1;
}
30% {
transform: translate(60%,0);
opacity:0.009;
}
35% {
transform: translate(175%,0);
opacity:0;
}
40% {
transform: translate(175%,10%) skew(8deg);
opacity:0.6;
}
60% {
transform: translate(175%,-30%) skew(10deg);
opacity:0.15;
}
70% {
transform: translate(185%,-40%) skew(10deg);
opacity:0.05;
}
75% {
transform: translate(185%,-40%) skew(10deg);
opacity:0;
}
77% {
transform: translate(185%,-40%) skew(10deg);
opacity:0;
}
80% {
transform: translate(580%,-40%) skew(10deg);
opacity:0;
}
85% {
transform: translate(580%,-40%) skew(10deg);
opacity:0.8;
}
90% {
transform: translate(580%,-44%) skew(10deg);
opacity:0.35;
}
100% {
transform: translate(800%,-49%) skew(10deg);
opacity:0;
}
}
img{
margin-left:25%;
margin-top:4%;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.