Gh pages

README.txt

@@ -0,0 +1 @@
+This is the website for CSS animations workshop @ the Women In Tech event 2016.

assets/css/blinkingstars.css

@@ -0,0 +1,81 @@
+.blinking-star {
+	color: #fff;
+	font-size: 100px;
+	margin-right: 20px;
+}
+
+.blinking-star-1,
+.blinking-star-2,
+.blinking-star-3,
+.blinking-star-4 {
+  -webkit-animation: blink-animation 1s infinite; /* Safari 4+ */
+  -moz-animation:    blink-animation 1s infinite; /* Fx 5+ */
+  -o-animation:      blink-animation 1s infinite; /* Opera 12+ */
+  animation:         blink-animation 1s infinite; /* IE 10+, Fx 29+ */
+}
+
+.blinking-star-4 {
+	-webkit-animation-delay: 0.5s;
+	-moz-animation-delay: 0.5s;
+	-o-animation: 0.5s;
+	animation-delay: 0.5s;
+}
+
+.blinking-star-5,
+.blinking-star-6 {
+  -webkit-animation: blink-animation 1s infinite, scale-animation 1s infinite; /* Safari 4+ */
+  -moz-animation:    blink-animation 1s infinite, scale-animation 1s infinite; /* Fx 5+ */
+  -o-animation:      blink-animation 1s infinite, scale-animation 1s infinite; /* Opera 12+ */
+  animation:         blink-animation 1s infinite, scale-animation 1s infinite; /* IE 10+, Fx 29+ */
+}
+
+.blinking-star-6 {
+	-webkit-animation-delay: 0.5s;
+	-moz-animation-delay: 0.5s;
+	-o-animation: 0.5s;
+	animation-delay: 0.5s;
+}
+
+/* Blink animation */
+@-webkit-keyframes blink-animation {
+  0%   { opacity: 0; }
+  50%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+@-moz-keyframes blink-animation {
+  0%   { opacity: 0; }
+  50%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+@-o-keyframes blink-animation {
+  0%   { opacity: 0; }
+  50%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+@keyframes blink-animation {
+  0%   { opacity: 0; }
+  50%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* Scale animation */
+@-webkit-keyframes scale-animation {
+  0%   { transform: scale(0.5,0.5); }
+  50%  { transform: scale(1,1); }
+  100% { transform: scale(0.5,0.5); }
+}
+@-moz-keyframes scale-animation {
+  0%   { transform: scale(0.5,0.5); }
+  50%  { transform: scale(1,1); }
+  100% { transform: scale(0.5,0.5); }
+}
+@-o-keyframes scale-animation {
+  0%   { transform: scale(0.5,0.5); }
+  50%  { transform: scale(1,1); }
+  100% { transform: scale(0.5,0.5); }
+}
+@keyframes scale-animation {
+  0%   { transform: scale(0.5,0.5); }
+  50%  { transform: scale(1,1); }
+  100% { transform: scale(0.5,0.5); }
+}

assets/css/creatures.css

@@ -0,0 +1,255 @@
+/*   (c) http://bennettfeely.com/csscreatures/ made by someone */
+.caption {
+  margin-top: 20px;
+}
+
+.caption-bottom-padding {
+  margin-bottom: 20px;
+}
+
+/* Creature *************************************/
+.creature {
+  float: left;
+  margin: 10px;
+}
+
+.creature figure {
+  display: block;
+  width: 200px;
+  height: 200px;
+  padding: 40px;
+  box-shadow: inset -10px -30px rgba(0, 0, 0, .06);
+  border-radius: 50%;
+  text-align: center;
+}
+
+
+.creature .eye {
+  display: inline-block;
+  width: 10px;
+  height: 15px;
+  margin: 0 5px 5px;
+  background: rgba(0, 0, 0, .9);
+  border-radius: 10px;
+  border-radius: 50%;
+}
+
+.creature .mouth {
+  display: inline-block;
+  width: 100%;
+  height: 20px;
+  margin: 5px auto 0;
+  background: rgba(0, 0, 0, .9);
+  border-radius: 10px 10px 100px 100px;
+  border-radius: 10px 10px 50% 50%;
+  overflow: hidden;
+  line-height: 0;
+  -webkit-transform-origin: center top;
+  transform-origin: center top;
+}
+
+/* Creature-one ***************************************/
+.creature-one figure {
+  background-color: #8DC75D;
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom;
+  -webkit-transition: padding .3s, bottom .3s;
+  transition: padding .3s, bottom .3s;
+}
+.creature-one .eye {
+ -webkit-animation: blink 4s ease-in-out infinite;
+  animation: blink 4s ease-in-out infinite;
+}
+.creature-one .mouth {
+  -webkit-transition: border-radius .5s, height .5s cubic-bezier(.15, .60, .30, 1.9);
+  transition: border-radius .5s, height .5s cubic-bezier(.15, .60, .30, 1.9);
+}
+
+.creature-one .tooth:after {
+  display: inline-block;
+  content: "";
+  margin: 0 2px;
+  margin-right: 17px;
+  width: 15px;
+  height: 15px;
+  background: #eee;
+}
+
+.creature-one .hyper .mouth {
+  height: 80px;
+  border-radius: 20px 20px 50% 50%;
+}
+
+
+/* Creature-three ***************************************/
+.creature-three figure{
+  background: #B1E29A;
+}
+
+/* Animations *****************************************/
+
+/* Blink */
+@-webkit-keyframes blink {
+  90% { -webkit-transform: none; transform: none; }
+  95% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
+}
+
+@keyframes blink {
+  90% { -webkit-transform: none; transform: none; }
+  95% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
+}
+
+
+/* Hyper */
+.creature .hyper {
+  -webkit-animation: hyper 2s infinite;
+  animation: hyper 2s infinite;
+}
+
+@-webkit-keyframes hyper {
+  25% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+  15%,
+  50% {
+    -webkit-transform: rotateX(20deg);
+    transform: rotateX(20deg);
+  }
+  75% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes hyper {
+  25% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+  15%,
+  50% {
+    -webkit-transform: rotateX(20deg);
+    transform: rotateX(20deg);
+  }
+  75% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+
+/* Gladly rotate */
+.creature .gladly-rotate {
+  animation: gladlyRotate ease-in-out 8s;
+  animation-iteration-count: infinite;
+
+  -webkit-animation: gladlyRotate ease-in-out 8s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes gladlyRotate {
+    0% { -webkit-transform:  -webkit-translate(0px,0px)  -webkit-rotate(0deg); }
+    30% { -webkit-transform:  -webkit-translate(400px,0px)  -webkit-rotate(360deg); }
+    35% { -webkit-transform:  -webkit-translate(400px, -50px); }
+    45% { -webkit-transform:  -webkit-translate(400px, 0px); background-color : yellow; }
+    75% { -webkit-transform:  -webkit-translate(400px, 0px) -webkit-rotate(360deg); }
+    85% { -webkit-transform:  -webkit-translate(0px,0px)  -webkit-rotate(0deg); }
+}
+
+@keyframes gladlyRotate {
+    0% { transform:  translate(0px,0px)  rotate(0deg); }
+    30% { transform: translate(400px,0px)  rotate(360deg); }
+    35% { transform: translate(400px, -50px); }
+    45% { transform: translate(400px, 0px); background-color : yellow; }
+    75% { transform: translate(400px, 0px) rotate(360deg); }
+    85% { transform: translate(0px,0px)  rotate(0deg); }
+}
+
+
+
+/* Bouncer */
+/* (c) http://www.the-art-of-web.com/css/bouncing-ball-animation/  */
+
+@-webkit-keyframes travel {
+  from { left: 0;     }
+  to   { left: 640px; }
+}
+@keyframes travel {
+  from { left: 0;     }
+  to   { left: 640px; }
+}
+
+@-webkit-keyframes bounce {
+  from, to  {
+    bottom: 0;
+    -webkit-animation-timing-function: ease-out;
+  }
+  50% {
+    bottom: 120px;
+    -webkit-animation-timing-function: ease-in;
+  }
+}
+
+@keyframes bounce {
+  from, to  {
+    bottom: 0;
+    animation-timing-function: ease-out;
+  }
+  50% {
+    bottom: 120px;
+    animation-timing-function: ease-in;
+  }
+}
+
+@-webkit-keyframes spin {
+  from {                                     }
+  to   { -webkit-transform: rotateZ(360deg); }
+}
+
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+#stage {
+  position: relative;
+  margin: 1em auto;
+  width: 660px;
+  height: 240px;
+}
+
+#traveler {
+  position: absolute;
+  width: 200px;
+  height: 240px;
+
+  -webkit-animation-name: travel;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+  -webkit-animation-duration: 4.8s;
+
+  animation-name: travel;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-duration: 4.8s;
+}
+
+#bouncer {
+  position: absolute;
+  -webkit-animation-name: bounce, spin;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-duration: 4.2s;
+
+  animation-name: bounce, spin;
+  animation-iteration-count: infinite;
+  animation-duration: 4.2s;
+}