md.shakil hossain
2096
SVG CSS icon animation
<div class="icons">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="120px" height="120px" viewBox="0 0 120 120" version="1.1">
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-Ikone" sketch:type="MSArtboardGroup" transform="translate(-1677.000000, -1775.000000)">
<g id="EcoIconYay" sketch:type="MSLayerGroup" transform="translate(1677.000000, 1775.000000)">
<circle id="Oval-46" fill="#FC1212" sketch:type="MSShapeGroup" cx="60" cy="60" r="60"/>
<ellipse id="Oval-54" fill="#E70A0A" sketch:type="MSShapeGroup" transform="translate(76.000000, 90.000000) rotate(-19.000000) translate(-76.000000, -90.000000) " cx="76" cy="90" rx="23" ry="10"/>
<g id="LightBulb-+-Shape" transform="translate(38.000000, 21.000000)" sketch:type="MSShapeGroup">
<g id="LightBulb" transform="translate(0.389567, 0.000000)" fill="#FAFAFA">
<path d="M22.099378 0C9.8952085 0 0 9.88520353 0 22.0787954 0 26.0936238 1.12921141 29.8260179 2.94621522 33.1024146 8.37353691 42.8708575 9.81071506 48.3562382 10.695922 53.6649002 11.4389905 58.1152141 12.4671257 59.148703 15.8318598 59.148703L22.099378 59.148703 28.3661064 59.148703C31.7324199 59.148703 32.7597654 58.1136362 33.5028339 53.6649002 34.3880408 48.3562382 35.8260087 42.8700686 41.2533303 33.1024146 43.0711238 29.8268068 44.1987559 26.0936238 44.1987559 22.0787954 44.1995456 9.88520353 34.3043371 0 22.099378 0L22.099378 0Z" id="Shape"/>
<path d="M16.1769405 75.9476724L28.0218154 75.9476724C28.0218154 78.314441 24.8631821 79.8922867 22.099378 79.8922867 19.3355738 79.8922867 16.1769405 78.314441 16.1769405 75.9476724L16.1769405 75.9476724Z" id="Shape"/>
</g>
<path class="leaf" d="M31.6425022 33.0631298C31.743133 27.0498212 22.1656346 15 22.1656346 15 22.1656346 15 21.0766062 17.9511635 17.8517544 21.0199277 14.8110279 23.9139457 12.1926851 26.8133437 12.137512 30.1514525 12.0529719 35.3038856 15.1911613 40.0945504 19.4814141 41.8629973 18.5745805 37.5712014 21.9536392 27.8012048 21.9536392 27.8012048 20.3778644 35.7551443 20.5219422 40.8573428 21.8641503 49L24.0406544 48.1485197C24.0406544 48.1485197 23.0750048 44.6488773 23.1054254 42.5705252 27.8428394 42.5197963 31.5529205 38.5456261 31.6425022 33.0631298L31.6425022 33.0631298 31.6425022 33.0631298Z" id="Leaf" fill="#739B45"/>
</g>
<rect id="Rectangle-46" fill="#FAFAFA" sketch:type="MSShapeGroup" x="51" y="82" width="19" height="2.5"/>
<rect id="Rectangle-46-Copy-2" fill="#FAFAFA" sketch:type="MSShapeGroup" x="51" y="92" width="19" height="2.5"/>
<rect id="Rectangle-46-Copy" fill="#FAFAFA" sketch:type="MSShapeGroup" x="51" y="87" width="19" height="2.5"/>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="120px" height="120px" viewBox="0 0 120 120" version="1.1">
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-Ikone" sketch:type="MSArtboardGroup" transform="translate(-1551.000000, -1775.000000)">
<g id="BikeIconYay" sketch:type="MSLayerGroup" transform="translate(1551.000000, 1775.000000)">
<circle id="Oval-47" fill="#FC1212" sketch:type="MSShapeGroup" cx="60" cy="60" r="60"/>
<ellipse id="Oval-55" fill="#E70B0B" sketch:type="MSShapeGroup" cx="66" cy="73" rx="42" ry="11"/>
<g id="Group-+-WheelL-Copy-+-WheelL-Copy-2" transform="translate(19.000000, 31.000000)" sketch:type="MSShapeGroup">
<g id="Group" fill="#FAFAFA">
<path d="M14.4432 32.654082L19.352 23.9457377 23.6944 4.83654098 23.6976 4.83814754 25.2696 6.81581967 21.2272 24.6831475 16.1776 33.6372951 14.4432 32.654082 14.4432 32.654082Z" id="Shape"/>
<path d="M15.8512 14.832541C14.3592 14.1963443 12.6104 12.7070656 12.6264 10.1598689L12.6264 10.1598689C12.5944 7.83437705 13.7752 6.29127869 15.0816 5.59483607L15.0816 5.59483607C16.3784 4.87831148 18.368 4.80521311 18.368 4.80521311L18.368 4.80521311C18.5728 4.80521311 18.716 4.8132459 18.776 4.81806557L18.776 4.81806557 24.9944 4.8244918 25.2688 6.81581967 18.6648 6.81581967 18.6224 6.81421311C18.6224 6.81581967 18.5488 6.80377049 18.368 6.80377049L18.368 6.80377049C17.8856 6.7997541 16.8424 6.88891803 16.0512 7.34116393L16.0512 7.34116393C15.2728 7.81590164 14.6488 8.44888525 14.6184 10.1598689L14.6184 10.1598689C14.6352 11.3631803 15.1296 12.0058033 15.8648 12.5552459L15.8648 12.5552459C16.6 13.0846066 17.5944 13.3737869 18.2536 13.4966885L18.2536 13.4966885C18.6928 13.5794262 18.9504 13.593082 18.9536 13.593082L18.9536 13.593082 18.8328 15.5892295C18.7688 15.5836066 17.364 15.5072951 15.8512 14.832541L15.8512 14.832541 15.8512 14.832541Z" id="Shape"/>
<path d="M21.5728 15.3506557L22.9904 13.9457213 42.5464 35.9089672 62.9272 32.6163279 49.3112 12.8147049 22.9448 12.8147049 22.9448 10.8169508 50.3568 10.8169508 66.3624 34.0927541 41.848 38.0489016 21.5728 15.3506557 21.5728 15.3506557ZM22.9448 12.8147049L22.9448 12.8163115 22.9448 12.8147049 22.9448 12.8147049Z" id="Shape"/>
<path d="M41.2464 36.6857377L51.664 2.39537705 53.5696 2.98177049 43.1512 37.2705246 41.2464 36.6857377 41.2464 36.6857377Z" id="Shape"/>
<ellipse id="Oval" cx="15.3536" cy="33.3561475" rx="2.1576" ry="2.16644262"/>
<ellipse id="Oval" cx="64.648" cy="33.3561475" rx="2.1576" ry="2.16644262"/>
<ellipse id="Oval" cx="42.2008" cy="36.3138197" rx="2.1584" ry="2.1672459"/>
<path d="M39.9032 29.8827705L41.3704 29.6024262 43.944 43.1842623 42.4752 43.4638033 39.9032 29.8827705 39.9032 29.8827705Z" id="Shape"/>
<path d="M38.728 30.2795902L38.728 28.777459 42.4608 28.777459 42.4608 30.2795902 38.728 30.2795902 38.728 30.2795902Z" id="Shape"/>
<path d="M41.2176 43.6236557L41.2176 42.1239344 44.9504 42.1239344 44.9504 43.6236557 41.2176 43.6236557 41.2176 43.6236557Z" id="Shape"/>
<path d="M47.3336 1.31818033C47.3336 1.31818033 46.0384 1.57844262 46.0384 2.35762295 46.0384 3.13680328 46.812 3.31191803 47.2048 3.2677377 47.3856 3.24765574 51.864 3.13680328 53.9344 3.65732787 56.0072 4.17704918 57.0424 4.5682459 57.6896 3.52880328 58.3368 2.4877541 58.4664 0.278737705 55.748 0.406459016 53.0272 0.538196721 47.3336 1.31818033 47.3336 1.31818033L47.3336 1.31818033Z" id="Shape"/>
</g>
<g id="WheelL-Copy" transform="translate(50.555556, 19.600000)" stroke="#FFFFFF">
<ellipse id="Oval-13" stroke-width="2" fill="#EEEEEE" cx="13.8923077" cy="13.626201" rx="13.8923077" ry="13.626201"/>
<path class="wheel" d="M13.8923077 17.1119734C15.8550427 17.1119734 17.4461538 15.5513399 17.4461538 13.626201 17.4461538 11.7010621 15.8550427 10.1404287 13.8923077 10.1404287 11.9295727 10.1404287 10.3384615 11.7010621 10.3384615 13.626201 10.3384615 15.5513399 11.9295727 17.1119734 13.8923077 17.1119734L13.8923077 17.1119734 13.8923077 17.1119734ZM17.6076923 13.9430894L25.0384615 13.9430894 25.0384615 13.626201 17.6076923 13.626201 17.6076923 13.9430894 17.6076923 13.9430894ZM2.74615385 13.9430894L10.1769231 13.9430894 10.1769231 13.626201 2.74615385 13.626201 2.74615385 13.9430894 2.74615385 13.9430894ZM14.2153846 9.98198448L14.2153846 3.01043976 13.8923077 3.01043976 13.8923077 9.98198448 14.2153846 9.98198448 14.2153846 9.98198448ZM14.2153846 24.2419623L14.2153846 17.2704176 13.8923077 17.2704176 13.8923077 24.2419623 14.2153846 24.2419623 14.2153846 24.2419623ZM16.7560938 11.3581301L21.9253246 5.97102739 21.69006 5.75384327 16.5208292 11.140946 16.7560938 11.3581301 16.7560938 11.3581301ZM6.41763231 21.8154472L11.5868631 16.4283445 11.3515985 16.2111603 6.18236769 21.5982631 6.41763231 21.8154472 6.41763231 21.8154472ZM16.5315842 16.4385599L22.0238919 21.1918858 22.2376466 20.9542709 16.7453389 16.2009449 16.5315842 16.4385599 16.5315842 16.4385599ZM5.87004574 6.29813118L11.3623534 11.0514571 11.5761081 10.8138422 6.08380042 6.06051627 5.87004574 6.29813118 5.87004574 6.29813118Z" id="Oval-14"/>
</g>
<g id="WheelL-Copy-2" transform="translate(0.444444, 19.377273)" stroke="#FFFFFF">
<ellipse id="Oval-13" stroke-width="2" fill="#EEEEEE" cx="15.0034188" cy="13.626201" rx="13.8923077" ry="13.626201"/>
<path class="wheel" d="M15.0034188 17.1119734C16.9661538 17.1119734 18.557265 15.5513399 18.557265 13.626201 18.557265 11.7010621 16.9661538 10.1404287 15.0034188 10.1404287 13.0406838 10.1404287 11.4495726 11.7010621 11.4495726 13.626201 11.4495726 15.5513399 13.0406838 17.1119734 15.0034188 17.1119734L15.0034188 17.1119734 15.0034188 17.1119734ZM18.7188034 13.9430894L26.1495726 13.9430894 26.1495726 13.626201 18.7188034 13.626201 18.7188034 13.9430894 18.7188034 13.9430894ZM3.85726496 13.9430894L11.2880342 13.9430894 11.2880342 13.626201 3.85726496 13.626201 3.85726496 13.9430894 3.85726496 13.9430894ZM15.3264957 9.98198448L15.3264957 3.01043976 15.0034188 3.01043976 15.0034188 9.98198448 15.3264957 9.98198448 15.3264957 9.98198448ZM15.3264957 24.2419623L15.3264957 17.2704176 15.0034188 17.2704176 15.0034188 24.2419623 15.3264957 24.2419623 15.3264957 24.2419623ZM17.867205 11.3581301L23.0364357 5.97102739 22.8011711 5.75384327 17.6319403 11.140946 17.867205 11.3581301 17.867205 11.3581301ZM7.52874342 21.8154472L12.6979742 16.4283445 12.4627096 16.2111603 7.2934788 21.5982631 7.52874342 21.8154472 7.52874342 21.8154472ZM17.6426953 16.4385599L23.135003 21.1918858 23.3487577 20.9542709 17.85645 16.2009449 17.6426953 16.4385599 17.6426953 16.4385599ZM6.98115685 6.29813118L12.4734645 11.0514571 12.6872192 10.8138422 7.19491153 6.06051627 6.98115685 6.29813118 6.98115685 6.29813118Z" id="Oval-14"/>
</g>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="120px" height="120px" viewBox="0 0 120 120" version="1.1">
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-Ikone" sketch:type="MSArtboardGroup" transform="translate(-1803.000000, -1781.000000)">
<g id="IceCreamYay" sketch:type="MSLayerGroup" transform="translate(1803.000000, 1781.000000)">
<circle id="Oval-39" fill="#FC1212" sketch:type="MSShapeGroup" cx="60" cy="60" r="60"/>
<path d="M91.759773 72.2112427C101.483793 71.154284 114.459846 87.0734753 107.259773 93.2112427 100.0597 99.3490101 64.2597729 101.711242 61.259773 98.2112427 58.259773 94.7112432 82.0357531 73.2682014 91.759773 72.2112427Z" id="Triangle-3" fill="#E70B0B" sketch:type="MSShapeGroup"/>
<g id="Group" transform="translate(42.000000, 18.000000)" sketch:type="MSShapeGroup">
<path d="M1.38262939 25.8992806L1.14832536 25.8992806 18.9473684 80 36.7464115 25.8992806 36.5121075 25.8992806 36.5121075 25.8992806C37.3914554 24.3755049 37.8947368 22.6063794 37.8947368 20.7194245 37.8947368 15.5858555 34.1697335 11.324394 29.2813311 10.5027875 29.2819741 10.4551726 29.2822967 10.4074802 29.2822967 10.3597122 29.2822967 4.63820115 24.6551917 0 18.9473684 0 13.2395452 0 8.61244019 4.63820115 8.61244019 10.3597122 8.61244019 10.4074802 8.61276271 10.4551726 8.6134057 10.5027875 3.72500338 11.324394 0 15.5858555 0 20.7194245 0 22.6063794 0.503281478 24.3755049 1.38262939 25.8992806Z" id="OsnovaSladoleda" fill="#FAFAFA"/>
<path d="M3.60902256 26.8181818L18.9473684 72.7272727 34.2857143 26.8181818 3.60902256 26.8181818Z" id="Kornet" stroke="#FAFAFA" fill="#FAFAFA"/>
<path class="scoopRight" d="M20.3007519 25L27.0676692 25 34.7368421 25C34.7368421 25 36.0902256 24.4986779 36.0902256 20.9090909 36.0902256 15.8883205 32.0506895 11.8181818 27.0676692 11.8181818 22.0846489 11.8181818 18.0451128 15.8883205 18.0451128 20.9090909 18.0451128 24.2650561 20.3007519 25 20.3007519 25Z" id="ScoopRight" fill="#B84444"/>
<path class="scoopTop" d="M18.9473684 20C23.9303887 20 27.9699248 15.9298614 27.9699248 10.9090909 27.9699248 5.88832046 23.9303887 1.81818182 18.9473684 1.81818182 13.9643481 1.81818182 9.92481203 5.88832046 9.92481203 10.9090909 9.92481203 15.9298614 13.9643481 20 18.9473684 20Z" id="ScoopTop" fill="#FF8181"/>
<path class="scoopLeft" d="M4.06015038 25C4.06015038 25 10.3759398 25 11.7293233 25.4545455 12.0032343 25.5465408 14.5087347 41.8181818 15.7894737 41.8181818 16.7401443 41.8181818 18.4962406 25 18.4962406 25 18.4962406 25 19.8496241 24.4986779 19.8496241 20.9090909 19.8496241 20.2304259 19.7758163 19.5691301 19.6358474 18.9329081 18.7403251 14.8623539 15.1365257 11.8181818 10.8270677 11.8181818 5.84404737 11.8181818 1.80451128 15.8883205 1.80451128 20.9090909 1.80451128 24.2650561 4.06015038 25 4.06015038 25Z" id="ScoopLeft" fill="#FFC2C2"/>
<path d="M23.9097744 33.1818182L18.4962406 49.5454545" id="Line" stroke="#EFEFEF" stroke-width="2" stroke-linecap="square"/>
<path d="M21.2030075 55.9090909L29.3233083 31.3636364" id="Line" stroke="#EFEFEF" stroke-width="2" stroke-linecap="square"/>
</g>
</g>
</g>
</g>
</svg>
<h1>Think <span>eco</span>, get a <span>bike</span> and be <span>diverse</span>.</h1>
</div>
<script scr="jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
.icons{
width:70%;
display:block;
margin:0 auto;
text-align:center;
margin-top:20%;
}
svg{
margin:0 4% 0 4%;
}
h1{
font-family:"Avenir", sans-serif;
font-weight:normal;
font-size:1.2em;
margin-top:10%;
}
span{
color:red;
}
/* Green light bulb animation */
@-webkit-keyframes Leaf{
0% {fill:#618F2D;}
50% {fill:#F7EF84;}
100% {fill:#618F2D;}
}
@-moz-keyframes Leaf{
0% {fill:#618F2D;}
50% {fill:#F7EF84;}
100% {fill:#618F2D;}
}
@-o-keyframes Leaf{
0% {fill:#618F2D;}
50% {fill:#F7EF84;}
100% {fill:#618F2D;}
}
@keyframes Leaf{
0% {fill:#618F2D;}
50% {fill:#F7EF84;}
100% {fill:#618F2D;}
}
.leaf{
-webkit-animation:Leaf 5s 1s infinite ease-in-out backwards;
-moz-animation:Leaf 5s 1s infinite ease-in-out backwards;
-o-animation:Leaf 5s 1s infinite ease-in-out backwards;
animation:Leaf 5s 1s infinite ease-in-out backwards;
}
/* Bicycle wheels animation is with GSAP for trans-for origin compatibility */
/* Icecream scoops animation */
@-webkit-keyframes aniScoop{
0% {fill:#FFBFBF;}
25% {fill:#F35B5B;}
50% {fill:#8C2727;}
100% {fill:#FFBFBF;}
}
@-moz-keyframes aniScoop{
0% {fill:#FFBFBF;}
25% {fill:#F35B5B;}
50% {fill:#8C2727;}
100% {fill:#FFBFBF;}
}
@-o-keyframes aniScoop{
0% {fill:#FFBFBF;}
25% {fill:#F35B5B;}
50% {fill:#8C2727;}
100% {fill:#FFBFBF;}
}
@keyframes aniScoop{
0% {fill:#FFBFBF;}
25% {fill:#F35B5B;}
50% {fill:#8C2727;}
100% {fill:#FFBFBF;}
}
.scoopTop{
-webkit-animation:aniScoop 3s 3s infinite ease-in-out backwards;
-moz-animation:aniScoop 3s 3s infinite ease-in-out backwards;
-o-animation:aniScoop 3s 3s infinite ease-in-out backwards;
animation:aniScoop 3s 3s infinite ease-in-out backwards;
}
.scoopLeft{
-webkit-animation:aniScoop 5s 4s infinite ease-in-out backwards;
-moz-animation:aniScoop 5s 4s infinite ease-in-out backwards;
-o-animation:aniScoop 5s 4s infinite ease-in-out backwards;
animation:aniScoop 5s 4s infinite ease-in-out backwards;
}
.scoopRight{
-webkit-animation:aniScoop 4s 5s infinite ease-in-out backwards;
-moz-animation:aniScoop 4s 5s infinite ease-in-out backwards;
-o-animation:aniScoop 4s 5s infinite ease-in-out backwards;
animation:aniScoop 4s 5s infinite ease-in-out backwards;
}
