ceaser-easing 0.3 → 0.4
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +36 -36
- data/stylesheets/ceaser-easing/_ceaser.sass +1 -1
- metadata +5 -5
data/README.mkdn
CHANGED
|
@@ -71,38 +71,38 @@ Ease Types
|
|
|
71
71
|
----------
|
|
72
72
|
Here is a list of all the available easing types to choose from, you can see an example of each on the original [demo page](http://matthewlein.com/ceaser/)
|
|
73
73
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
74
|
+
linear
|
|
75
|
+
ease (default)
|
|
76
|
+
ease-in
|
|
77
|
+
ease-out
|
|
78
|
+
ease-in-out
|
|
79
|
+
|
|
80
|
+
easeInQuad
|
|
81
|
+
easeInCubic
|
|
82
|
+
easeInQuart
|
|
83
|
+
easeInQuint
|
|
84
|
+
easeInSine
|
|
85
|
+
easeInExpo
|
|
86
|
+
easeInCirc
|
|
87
|
+
easeInBack
|
|
88
|
+
|
|
89
|
+
easeOutQuad
|
|
90
|
+
easeOutCubic
|
|
91
|
+
easeOutQuart
|
|
92
|
+
easeOutQuint
|
|
93
|
+
easeOutSine
|
|
94
|
+
easeOutExpo
|
|
95
|
+
easeOutCirc
|
|
96
|
+
easeOutBack
|
|
97
|
+
|
|
98
|
+
easeInOutQuad
|
|
99
|
+
easeInOutCubic
|
|
100
|
+
easeInOutQuart
|
|
101
|
+
easeInOutQuint
|
|
102
|
+
easeInOutSine
|
|
103
|
+
easeInOutExpo
|
|
104
|
+
easeInOutCirc
|
|
105
|
+
easeInOutBack
|
|
106
106
|
|
|
107
107
|
|
|
108
108
|
|
|
@@ -112,20 +112,20 @@ The ceaser easing mixin
|
|
|
112
112
|
The ceaser easing extension provides a mixin called ceaser. You pass what type of easing you would like to the mixin and it will apply the correct cubic-bezier transition timing function for you. You can then pass the transition property (defaults to all), the transition duration (defaults to 500ms), and the transition delay (defaults to 0).
|
|
113
113
|
|
|
114
114
|
# The ceaser easing mixin with its argument descriptions
|
|
115
|
-
@mixin ceaser(ease type, transition property, duration, delay)
|
|
115
|
+
@mixin ceaser-transition(ease type, transition property, duration, delay)
|
|
116
116
|
|
|
117
117
|
# Example mixin call that will create a 3 second transition with the ease type of ease-in
|
|
118
|
-
@include ceaser(ease-in, all, 3s)
|
|
118
|
+
@include ceaser-transition(ease-in, all, 3s)
|
|
119
119
|
|
|
120
120
|
# Example mixin call that will create a 500 milliseconds transition on only the width property with a delay of 1 second
|
|
121
|
-
@include ceaser(easeInOutExpo, width, 500ms, 1s)
|
|
121
|
+
@include ceaser-transition(easeInOutExpo, width, 500ms, 1s)
|
|
122
122
|
|
|
123
123
|
|
|
124
124
|
As an example, here is how create the above transition for an html element with id of box.
|
|
125
125
|
|
|
126
126
|
#box {
|
|
127
127
|
width: 500px;
|
|
128
|
-
@include ceaser(easeInOutExpo, width, 500ms, 1s);
|
|
128
|
+
@include ceaser-transition(easeInOutExpo, width, 500ms, 1s);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
#box:hover {
|
|
@@ -9,5 +9,5 @@
|
|
|
9
9
|
|
|
10
10
|
@mixin ceaser-transition($type: "ease", $properties: all, $duration: 500ms, $delay: 0)
|
|
11
11
|
$easingValue : returnEaseType($type)
|
|
12
|
-
@include transition($properties
|
|
12
|
+
@include transition($properties $duration cubic-bezier(unquote($easingValue)) $delay)
|
|
13
13
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ceaser-easing
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: '0.
|
|
4
|
+
version: '0.4'
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,20 +9,20 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2012-04-13 00:00:00.000000000 -07:00
|
|
13
13
|
default_executable:
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: compass
|
|
17
|
-
requirement: &
|
|
17
|
+
requirement: &70230991675800 !ruby/object:Gem::Requirement
|
|
18
18
|
none: false
|
|
19
19
|
requirements:
|
|
20
20
|
- - ! '>='
|
|
21
21
|
- !ruby/object:Gem::Version
|
|
22
|
-
version: '0.
|
|
22
|
+
version: '0.12'
|
|
23
23
|
type: :runtime
|
|
24
24
|
prerelease: false
|
|
25
|
-
version_requirements: *
|
|
25
|
+
version_requirements: *70230991675800
|
|
26
26
|
description: a css transition implementation of the Penner equations based on @matthewlein
|
|
27
27
|
css conversions for compass
|
|
28
28
|
email: jared@jaredhardy.com
|