Bootstrap Snippet SVG Animation using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g id="jjperezaguinaga">
    <g id="countryObjects">
        <path fill="#F15C27" d="M124.467,134.068c-2.028,2.304-3.916,4.723-5.74,7.187c-0.104,0.155-0.359,0.16-0.568,0.012l-14.95-10.734
            c-0.208-0.149-0.431-0.462-0.492-0.699c-0.699-2.659-1.231-5.311-1.771-8.085c-0.046-0.243,0.114-0.458,0.359-0.476
            c2.819-0.201,5.698-0.233,8.443-0.247c0.239,0,0.59,0.138,0.781,0.308l13.809,12.168
            C124.531,133.671,124.588,133.925,124.467,134.068z"/>
        <polygon fill="#FFFFFF" points="109.465,128.355 107.582,126.629 109.685,128.071         "/>
        <polygon fill="#FFFFFF" points="109.95,127.335 107.582,126.629 109.983,126.959      "/>
        <path fill="#FFFFFF" d="M109.84,126.14c-0.774,0.136-1.513,0.311-2.258,0.489l2.092-0.86L109.84,126.14z"/>
        <path fill="#FFFFFF" d="M109.129,125.058l-1.547,1.571c0.38-0.634,0.787-1.249,1.219-1.843L109.129,125.058z"/>
        <path fill="#FFFFFF" d="M107.994,124.383c-0.166,0.732-0.298,1.487-0.412,2.246c-0.016-0.782-0.027-1.573,0.005-2.34
            L107.994,124.383z"/>
        <polygon fill="#FFFFFF" points="106.726,124.312 107.582,126.629 106.356,124.43      "/>
        <polygon fill="#FFFFFF" points="105.703,124.895 107.582,126.629 105.475,125.193         "/>
        <polygon fill="#FFFFFF" points="105.189,125.95 107.582,126.629 105.159,126.337      "/>
        <polygon fill="#FFFFFF" points="105.323,127.175 107.582,126.629 105.502,127.547         "/>
        <polygon fill="#FFFFFF" points="106.073,128.24 107.582,126.629 106.412,128.5        "/>
        <polygon fill="#FFFFFF" points="107.229,128.873 107.582,126.629 107.632,128.954         "/>
        <polygon fill="#FFFFFF" points="108.472,128.915 107.582,126.629 108.83,128.797      "/>
        <path fill="#FFFFFF" d="M105.982,128.708c1.341,1.008,3.124,0.926,3.979-0.188c0.83-1.134,0.584-2.828-0.718-3.921
            c-1.27-1.063-3.153-1.063-4.039,0.14C104.294,125.922,104.642,127.698,105.982,128.708z M106.258,128.35
            c-1.105-0.844-1.393-2.31-0.646-3.286c0.733-0.989,2.273-1.002,3.336-0.122c1.074,0.896,1.294,2.308,0.603,3.251
            C108.838,129.121,107.366,129.189,106.258,128.35z"/>
        <path fill="#E2324B" d="M110.884,132.913c-0.336-0.255-0.778-0.236-0.989,0.036c-0.212,0.272-0.109,0.695,0.229,0.944l2.261,1.664
            l0.741-0.955L110.884,132.913z"/>
        <path fill="#62381B" d="M113.064,130.075c-0.327-0.264-0.762-0.255-0.971,0.02c-0.21,0.273-0.113,0.707,0.218,0.965l2.205,1.735
            l0.734-0.96L113.064,130.075z"/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One);
body {
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #f2efd9 100%);
}
@-webkit-keyframes rotate-right {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-left {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
  }
}
@-webkit-keyframes hover {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
@-webkit-keyframes pull {
  0% {
    -webkit-transform: scaleY(1);
  }
  40% {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"SVG Animation"
Bootstrap 4.1.1 Snippet by Nikita_Web Designer

Related: See More

Questions / Comments:

"SVG Animation" Bootstrap 4.1.1 Snippet by Nikita_Web Designer

Related: See More

Questions / Comments:

"SVG Animation"
Bootstrap 4.1.1 Snippet by Nikita_Web Designer