Permalink
Browse files

timing functions

  • Loading branch information...
1 parent fc83480 commit 472e9ed928e9ecd6a0df5e01b699167769c050f6 @tdreyno tdreyno committed May 7, 2011
@@ -0,0 +1,56 @@
+@function linear() {
+ @return cubic-bezier(0.250, 0.250, 0.750, 0.750); }
+
+@function ease() {
+ @return cubic-bezier(0.250, 0.100, 0.250, 1.000); }
+
+@function ease-in() {
+ @return cubic-bezier(0.420, 0.000, 1.000, 1.000); }
+@function ease-in-quad() {
+ @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
+@function ease-in-cubic() {
+ @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
+@function ease-in-quart() {
+ @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
+@function ease-in-quint() {
+ @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
+@function ease-in-sine() {
+ @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
+@function ease-in-expo() {
+ @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }
+@function ease-in-circ() {
+ @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }
+
+@function ease-out() {
+ @return cubic-bezier(0.000, 0.000, 0.580, 1.000); }
+@function ease-out-quad() {
+ @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
+@function ease-out-cubic() {
+ @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
+@function ease-out-quart() {
+ @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
+@function ease-out-quint() {
+ @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
+@function ease-out-sine() {
+ @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
+@function ease-out-expo() {
+ @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
+@function ease-out-circ() {
+ @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }
+
+@function ease-in-out() {
+ @return cubic-bezier(0.420, 0.000, 0.580, 1.000); }
+@function ease-in-out-quad() {
+ @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
+@function ease-in-out-cubic() {
+ @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
+@function ease-in-out-quart() {
+ @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
+@function ease-in-out-quint() {
+ @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
+@function ease-in-out-sine() {
+ @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
+@function ease-in-out-expo() {
+ @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
+@function ease-in-out-circ() {
+ @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,43 @@
+/* line 4, timing-functions.scss */
+.animatable, .ease-out-expo-animation, .ease-in-expo-animation {
+ width: 100px;
+ height: 100px;
+ -moz-transition-property: height, width;
+ -webkit-transition-property: height, width;
+ -o-transition-property: height, width;
+ transition-property: height, width;
+ -moz-transition-duration: 1s;
+ -webkit-transition-duration: 1s;
+ -o-transition-duration: 1s;
+ transition-duration: 1s;
+}
+/* line 9, timing-functions.scss */
+.active .animatable, .active .ease-out-expo-animation, .active .ease-in-expo-animation {
+ width: 200px;
+ height: 200px;
+}
+
+/* line 13, timing-functions.scss */
+.box {
+ position: absolute;
+ top: 200px;
+ background: red;
+}
+
+/* line 18, timing-functions.scss */
+.ease-out-expo-animation {
+ left: 0;
+ -moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+/* line 23, timing-functions.scss */
+.ease-in-expo-animation {
+ left: 240px;
+ -moz-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+ -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+ -o-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+ transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+}
@@ -0,0 +1,21 @@
+!!! 5
+%html
+ %head
+ %title Timing Functions
+ %link(rel="stylesheet" href="timing-functions.css")/
+ :javascript
+ var isOn = false;
+ setInterval(function() {
+ document.getElementById("container").className = (isOn) ? "" : "active";
+ isOn = !isOn;
+ }, 2000);
+ %body
+ %p
+ The box below will animate from a 100px square to a 200px square using 2 different cubic-bezier timing functions
+
+ %img{ :src => "expo-ease-out.jpg" }
+ %img{ :src => "expo-ease-in.jpg" }
+
+ #container
+ .box.ease-out-expo-animation
+ .box.ease-in-expo-animation
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Timing Functions</title>
+ <link href='timing-functions.css' rel='stylesheet' />
+ <script type='text/javascript'>
+ //<![CDATA[
+ var isOn = false;
+ setInterval(function() {
+ document.getElementById("container").className = (isOn) ? "" : "active";
+ isOn = !isOn;
+ }, 2000);
+ //]]>
+ </script>
+ </head>
+ <body>
+ <p>
+ The box below will animate from a 100px square to a 200px square using 2 different cubic-bezier timing functions
+ </p>
+ <img src='expo-ease-out.jpg' />
+ <img src='expo-ease-in.jpg' />
+ <div id='container'>
+ <div class='box ease-out-expo-animation'></div>
+ <div class='box ease-in-expo-animation'></div>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,26 @@
+@import "compass";
+@import "timing-functions";
+
+.animatable {
+ width: 100px;
+ height: 100px;
+ @include transition-property("height, width");
+ @include transition-duration(1s);
+ .active & {
+ width: 200px;
+ height: 200px; } }
+
+.box {
+ position: absolute;
+ top: 200px;
+ background: red; }
+
+.ease-out-expo-animation {
+ @extend .animatable;
+ left: 0;
+ @include transition-timing-function(ease-out-expo()); }
+
+.ease-in-expo-animation {
+ @extend .animatable;
+ left: 240px;
+ @include transition-timing-function(ease-in-expo()); }

0 comments on commit 472e9ed

Please sign in to comment.