Animation SVG
Animation SVG
Animation SVG How to animate SVG
HTML
<div class="contents bg-primary overflow-hidden">
<div class="container d-flex justify-content-center align-items-center h-100">
<div class="section8 w-100">
<h3 class="display-5 text-center Mreflect mb-5 text-light">[S8]Button hover effect - Bootstrap4</h3>
<div class="jumbotron bg-primary text-light rounded-lg">
<h1 class="display-4 font-weight-bolder Mglow">Lorem <span class="font-weight-light text-success Mblink">ipsum</span></h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4 border">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn border text-light" href="#" role="button">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-circle Mbtn" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path class="Mblink" fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z"/>
</svg>
<span>more 1</span>
</a>
<button class="btn border text-light">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-circle Mbtn" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
<path class="Mblink" fill-rule="evenodd" d="M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z"/>
</svg>
<span>more 2</span>
</button>
<div class="mb-5"></div>
<div class="media">
<svg height="80px" viewBox="0 0 80 80">
<circle fill="#fff" cx="6" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.1"
/>
<animate
attributeName = "cy"
values="50;60;50"
dur="1s"
repeatCount="indefinite"
begin="0.1"
/>
</circle>
<circle fill="#fff" cx="26" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.2"
/>
<animate
attributeName = "cy"
values="50;60;50"
dur="1s"
repeatCount="indefinite"
begin="0.2"
/>
</circle>
<circle fill="#fff" cx="46" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.3"
/>
<animate
attributeName = "cy"
values="50;60;50"
dur="1s"
repeatCount="indefinite"
begin="0.3"
/>
</circle>
</svg>
<div class="media-body pl-3">
<h2 class="mt-0">Media heading</h2>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contents bg-primary overflow-hidden">
<div class="container d-flex justify-content-center align-items-center h-100">
<div class="section9 w-100">
<h3 class="display-5 text-center Mreflect mb-5 text-light">
[s9]Animation SVG
</h3>
<div class="row row-cols-6 text-center">
<div class="p-1">
<svg viewBox="0 0 30 30">
<rect width="10" height="10">
<animate
attributeName="y"
from="0"
to="20"
dur="1s"
repeatCount="indefinite"
/>
</rect>
</svg>
</div>
<div class="p-1">
<svg viewBox="0 0 10 10">
<rect width="10" height="10">
<animate
attributeName="rx"
values="0;5;0"
dur="3s"
repeatCount="indefinite"
/>
</rect>
</svg>
</div>
<div class="p-1">
<svg height="80px" viewBox="0 0 80 80">
<circle fill="#fff" cx="6" cy="50" r="6"></circle>
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.1"
/>
<circle fill="#fff" cx="26" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.2"
/>
</circle>
<circle fill="#fff" cx="46" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.3"
/>
</circle>
</svg>
</div>
<div class="p-1">
<svg height="80px" viewBox="0 0 80 80">
<circle class="Mloading" fill="#fff" cx="6" cy="50" r="6" style="--Mdelay : 1"></circle>
<circle class="Mloading" fill="#fff" cx="26" cy="50" r="6" style="--Mdelay : 2"></circle>
<circle class="Mloading" fill="#fff" cx="46" cy="50" r="6" style="--Mdelay : 3"></circle>
</svg>
</div>
<div class="p-1">
<svg height="80px" viewBox="0 0 80 80">
<circle fill="#fff" cx="6" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.1"
/>
<animate
attributeName = "cy"
values="50;60;50"
dur="1s"
repeatCount="indefinite"
begin="0.1"
/>
</circle>
<circle fill="#fff" cx="26" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.2"
/>
<animate
attributeName = "cy"
values="50;60;50"
dur="1s"
repeatCount="indefinite"
begin="0.2"
/>
</circle>
<circle fill="#fff" cx="46" cy="50" r="6">
<animate
attributeName = "opacity"
values="0;1;0"
dur="1s"
repeatCount="indefinite"
begin="0.3"
/>
<animate
attributeName = "cy"
values="50;60;50"
dur="1s"
repeatCount="indefinite"
begin="0.3"
/>
</circle>
</svg>
</div>
<div class="p-1">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<path class="Mline" id="svg_1" d="m18,106.45313l63,55.54688l101,-127" stroke-width="8px" stroke="#000" fill="none"/>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
SCSS
.Mglow{
animation: Mglow 2s ease-in-out infinite;
}
@keyframes Mglow{
40%{
text-shadow: 0 0 15px $color-3;
}
}
.Mblink{
animation: Mblink 2s ease-in-out infinite;
}
@keyframes Mblink{
0%{
opacity: 1;
}
50%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.Mloading{
animation: Mloading 2s ease-in-out infinite;
animation-delay: calc(0.2s * var(--Mdelay));
}
@keyframes Mloading{
40%{
opacity: 0;
}
}
.Mline{
animation: Mline 2s infinite;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}
@keyframes Mline{
20%{
stroke-dashoffset: 300;
}
60%{
stroke-dashoffset: 0;
}
100%{
stroke-dashoffset: 0;
}
}