Foss4g CSS Animations

bridge.md

Bridge

<path fill="#a6a095" id="lift-bridge" d="M479.744,164.871c3.056,0.847,6.071,1.735,9.039,2.642v-1.045c-12.883-3.925-26.639-7.56-40.882-8.434
	v-5.217h-10v5.091c-14.294,0.531-27.971,4.07-40.833,7.742v1.041c3.023-0.865,6.094-1.722,9.204-2.536l-9.204,9.325v3.697h91.715
	v-3.649L479.744,164.871z M407.401,174.699h-10.131l10.131-10.264V174.699z M408.401,174.699v-10.147l8.837,10.147H408.401z
	 M417.401,173.364l-8.588-9.861c2.83-0.712,5.693-1.377,8.588-1.973V173.364z M418.401,161.323c2.803-0.559,5.634-1.046,8.492-1.438
	l-8.492,13.121V161.323z M427.401,174.699h-8.904l8.904-13.758V174.699z M428.401,159.694c2.82-0.353,5.665-0.606,8.535-0.741
	l-8.535,13.969V159.694z M437.401,174.699h-8.914l8.914-14.589V174.699z M441.535,158.833c1.801,0,3.594,0.059,5.382,0.152
	l-4.016,6.571l-4.083-6.682C439.722,158.85,440.627,158.833,441.535,158.833z M438.401,160.11l3.914,6.405l-3.914,6.406V160.11z
	 M438.487,174.699l4.414-7.224l4.414,7.224H438.487z M447.401,172.922l-3.914-6.406l3.914-6.405V172.922z M448.401,174.699V160.11
	l8.914,14.589H448.401z M457.401,172.922l-8.437-13.807c2.832,0.202,5.646,0.508,8.437,0.907V172.922z M458.401,174.699v-13.455
	l8.9,13.455H458.401z M467.401,173.037l-8.455-12.781c2.844,0.44,5.662,0.969,8.455,1.564V173.037z M468.401,162.033
	c2.876,0.632,5.723,1.332,8.536,2.077l-8.536,9.305V162.033z M477.401,174.699h-8.822l8.822-9.616V174.699z M478.401,164.97
	l10.159,9.729h-10.159V164.97z"></path>

#lift-bridge {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: lift 10s linear infinite;
  -moz-animation: lift 10s linear infinite;
  -o-animation: lift 10s linear infinite;
  animation: lift 10s linear infinite;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
@-webkit-keyframes lift {
  0% {
    -webkit-transform: translate(0, 0px);
  }
  20% {
    -webkit-transform: translate(0, 0px);
  }
  60% {
    -webkit-transform: translate(0, -30px);
  }
  75% {
    -webkit-transform: translate(0, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
  }
}
@-moz-keyframes lift {
  0% {
    -webkit-transform: translate(0, 0px);
  }
  20% {
    -webkit-transform: translate(0, 0px);
  }
  60% {
    -webkit-transform: translate(0, -30px);
  }
  75% {
    -webkit-transform: translate(0, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
  }
}
@-o-keyframes lift {
  0% {
    -webkit-transform: translate(0, 0px);
  }
  20% {
    -webkit-transform: translate(0, 0px);
  }
  60% {
    -webkit-transform: translate(0, -30px);
  }
  75% {
    -webkit-transform: translate(0, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
  }
}
@keyframes lift {
  0% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  20% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  60% {
    -webkit-transform: translate(0, -30px);
    -moz-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  75% {
    -webkit-transform: translate(0, -30px);
    -moz-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
}

trees.md

Trees

<path class="tree" fill-rule="evenodd" clip-rule="evenodd" fill="#B9B2A6" d="M318.126,194.451c1.022-1.689,1.846-3.354,2.106-5.227
			c0.256-1.84,0.47-3.685,0.711-5.603c-0.482,0.097-0.794,0.184-1.111,0.218c-0.319,0.033-0.647,0.039-0.968,0.017
			c-2.952-0.207-5.604-1.037-7.437-3.581c-0.099-0.138-0.323-0.255-0.493-0.26c-2.482-0.08-4.309-3.227-4.31-5.075
			c0-1.503,0.303-2.911,0.901-4.267c0.491-1.109,1.111-2.203,2.312-2.598c1.044-0.344,1.383-0.877,1.581-1.962
			c0.545-3.003,3.934-5.731,7.125-6.005c1.326-0.113,2.576,0.012,3.682,0.857c0.139,0.105,0.435,0.022,0.655,0
			c0.95-0.098,1.919-0.377,2.847-0.276c2.137,0.233,3.696,1.624,5.15,3.048c1.526,1.494,2.389,3.423,2.898,5.467
			c0.415,1.668,0.398,3.398-0.466,4.932c-0.579,1.026-1.049,1.971-1.239,3.203c-0.4,2.581-2.22,4.137-4.641,4.949
			c-1.323,0.443-2.701,0.567-4.239,0.246c0.194,4.135,0.157,8.188,2.238,12.029C322.973,194.834,320.599,194.752,318.126,194.451z"></path>

.tree {
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: tree-bounce 5s linear infinite;
  -moz-animation: tree-bounce 5s linear infinite;
  -o-animation: tree-bounce 5s linear infinite;
  animation: tree-bounce 5s linear infinite;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
@-webkit-keyframes tree-bounce {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.5, 1.5);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}
@-moz-keyframes tree-bounce {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.5, 1.5);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}
@-o-keyframes tree-bounce {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.5, 1.5);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}
@keyframes tree-bounce {
  0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.5, 1.5);
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
  }
  100% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}