ceaser-easing 0.2 → 0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +55 -60
- data/stylesheets/ceaser-easing/_ease-types.sass +6 -0
- data/stylesheets/ceaser-easing/_easing-functions.sass +75 -0
- data/templates/project/_ceaser.sass +37 -31
- metadata +31 -36
data/README.mkdn
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
Compass Ceaser CSS Easing Transitions
|
2
2
|
======================================
|
3
3
|
|
4
|
-
|
4
|
+
A compass extension based on [ceasar css easing animation tool](http://matthewlein.com/ceaser/) by [@matthewlein](http://twitter.com/matthewlein)
|
5
5
|
This extension provides transitions based on the classic Penner equations from Flash and jQuery.
|
6
6
|
|
7
7
|
|
@@ -10,28 +10,25 @@ Installation
|
|
10
10
|
|
11
11
|
Install gem from the command line:
|
12
12
|
|
13
|
-
sudo gem install ceaser-easing
|
13
|
+
(sudo) gem install ceaser-easing
|
14
14
|
|
15
|
-
|
15
|
+
Adding Ceaser Easing to an exiting project:
|
16
16
|
|
17
|
-
compass create project_name -r ceaser-easing --using ceaser-easing
|
18
|
-
|
19
|
-
#import ceaser-easing into your sass/scss file
|
20
|
-
@import "ceaser-easing"
|
21
|
-
|
22
|
-
|
23
|
-
Adding Sassy Buttons to an exiting project:
|
24
|
-
|
25
17
|
# Edit the project configuration file and add:
|
26
18
|
require 'ceaser-easing'
|
27
|
-
|
19
|
+
|
28
20
|
# From the command line:
|
29
21
|
compass install ceaser-easing
|
30
|
-
|
22
|
+
|
31
23
|
#import ceaser-easing into your sass/scss file
|
32
24
|
@import "ceaser-easing"
|
33
|
-
|
34
25
|
|
26
|
+
Create a new project using Ceaser Easing
|
27
|
+
|
28
|
+
compass create project_name -r ceaser-easing --using ceaser-easing
|
29
|
+
|
30
|
+
#import ceaser-easing into your sass/scss file
|
31
|
+
@import "ceaser-easing"
|
35
32
|
|
36
33
|
|
37
34
|
|
@@ -41,18 +38,17 @@ Using Ceaser Easing
|
|
41
38
|
|
42
39
|
The ceaser easing extension provides a sass function called ceaser. You use the function as a value for a transition or animation timing-function property. You pass what type of easing you would like to the function and it will apply the correct cubic-bezier transition timing function for you.
|
43
40
|
|
44
|
-
|
41
|
+
|
45
42
|
The ceaser easing function
|
46
43
|
-----------------------
|
47
|
-
|
48
|
-
|
49
|
-
|
44
|
+
|
45
|
+
|
50
46
|
#transition {
|
51
47
|
transition-property: all;
|
52
48
|
transition-duration: 1.2s;
|
53
49
|
transition-timing-function: ceaser("ease-in");
|
54
50
|
}
|
55
|
-
|
51
|
+
|
56
52
|
#transition-shorthand {
|
57
53
|
transition: all 1.2s ceaser("ease-in");
|
58
54
|
}
|
@@ -64,50 +60,49 @@ The ceaser easing function
|
|
64
60
|
animation-duration: 10s;
|
65
61
|
animation-timing-function: ceaser("easeInSine");
|
66
62
|
}
|
67
|
-
|
63
|
+
|
68
64
|
#animation-shorthand {
|
69
65
|
animation: animateMe 10s ceaser("easeInSine") infinite
|
70
|
-
|
66
|
+
|
71
67
|
}
|
72
|
-
|
73
|
-
|
68
|
+
|
69
|
+
|
74
70
|
Ease Types
|
75
71
|
----------
|
76
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/)
|
77
73
|
|
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
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
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
|
111
106
|
|
112
107
|
|
113
108
|
|
@@ -126,16 +121,16 @@ The ceaser easing extension provides a mixin called ceaser. You pass what type o
|
|
126
121
|
@include ceaser(easeInOutExpo, width, 500ms, 1s)
|
127
122
|
|
128
123
|
|
129
|
-
As an example, here is how create the above transition for an html element with id of box.
|
124
|
+
As an example, here is how create the above transition for an html element with id of box.
|
130
125
|
|
131
126
|
#box {
|
132
127
|
width: 500px;
|
133
|
-
@include ceaser(easeInOutExpo, width, 500ms, 1s);
|
128
|
+
@include ceaser(easeInOutExpo, width, 500ms, 1s);
|
134
129
|
}
|
135
130
|
|
136
131
|
#box:hover {
|
137
132
|
width: 700px;
|
138
133
|
}
|
139
134
|
|
140
|
-
|
141
|
-
|
135
|
+
|
136
|
+
|
@@ -25,6 +25,8 @@
|
|
25
25
|
$easingValue: "0.950, 0.050, 0.795, 0.035"
|
26
26
|
@else if $type == "easeInCirc"
|
27
27
|
$easingValue: "0.600, 0.040, 0.980, 0.335"
|
28
|
+
@else if $type == "easeInBack"
|
29
|
+
$easingValue: "0.600, -0.280, 0.735, 0.045"
|
28
30
|
|
29
31
|
|
30
32
|
|
@@ -42,6 +44,8 @@
|
|
42
44
|
$easingValue: "0.190, 1.000, 0.220, 1.000"
|
43
45
|
@else if $type == "easeOutCirc"
|
44
46
|
$easingValue: "0.075, 0.820, 0.165, 1.000"
|
47
|
+
@else if $type == "easeOutBack"
|
48
|
+
$easingValue: "0.175, 0.885, 0.320, 1.275"
|
45
49
|
|
46
50
|
|
47
51
|
|
@@ -59,5 +63,7 @@
|
|
59
63
|
$easingValue: "1.000, 0.000, 0.000, 1.000"
|
60
64
|
@else if $type == "easeInOutCirc"
|
61
65
|
$easingValue: "0.785, 0.135, 0.150, 0.860"
|
66
|
+
@else if $type == "easeInOutBack"
|
67
|
+
$easingValue: "0.680, -0.550, 0.265, 1.550"
|
62
68
|
|
63
69
|
@return $easingValue
|
@@ -0,0 +1,75 @@
|
|
1
|
+
@import "compass/css3/transition"
|
2
|
+
|
3
|
+
@mixin ceaser($type: "ease", $properties: all, $duration: 500ms, $delay: 0)
|
4
|
+
$easingValue : ""
|
5
|
+
|
6
|
+
@if $type == "linear"
|
7
|
+
$easingValue: returnEaseType("linear")
|
8
|
+
@else if $type == "ease"
|
9
|
+
$easingValue: returnEaseType("ease"1)
|
10
|
+
@else if $type == "ease-in"
|
11
|
+
$easingValue: returnEaseType("ease-in")
|
12
|
+
@else if $type == "ease-out"
|
13
|
+
$easingValue: returnEaseType("ease-out")
|
14
|
+
@else if $type == "ease-in-out"
|
15
|
+
$easingValue: returnEaseType("ease-in-out")
|
16
|
+
|
17
|
+
|
18
|
+
|
19
|
+
@else if $type == "easeInQuad"
|
20
|
+
$easingValue: returnEaseType("easeInQuad")
|
21
|
+
@else if $type == "easeInCubic"
|
22
|
+
$easingValue: returnEaseType("easeInCubic"
|
23
|
+
@else if $type == "easeInQuart"
|
24
|
+
$easingValue: returnEaseType("easeInQuart")
|
25
|
+
@else if $type == "easeInQuint"
|
26
|
+
$easingValue: returnEaseType("easeInQuint")
|
27
|
+
@else if $type == "easeInSine"
|
28
|
+
$easingValue: returnEaseType("easeInSine")
|
29
|
+
@else if $type == "easeInExpo"
|
30
|
+
$easingValue: returnEaseType("easeInExpo")
|
31
|
+
@else if $type == "easeInCirc"
|
32
|
+
$easingValue: returnEaseType("easeInCirc")
|
33
|
+
@else if $type == "easeInBack"
|
34
|
+
$easingValue: returnEaseType("easeInBack")
|
35
|
+
|
36
|
+
|
37
|
+
|
38
|
+
@else if $type == "easeOutQuad"
|
39
|
+
$easingValue: returnEaseType("easeOutQuad")
|
40
|
+
@else if $type == "easeOutCubic"
|
41
|
+
$easingValue: returnEaseType("easeOutCubic")
|
42
|
+
@else if $type == "easeOutQuart"
|
43
|
+
$easingValue: returnEaseType("easeOutQuart")
|
44
|
+
@else if $type == "easeOutQuint"
|
45
|
+
$easingValue: returnEaseType("easeOutQuint")
|
46
|
+
@else if $type == "easeOutSine"
|
47
|
+
$easingValue: returnEaseType("easeOutSine")
|
48
|
+
@else if $type == "easeOutExpo"
|
49
|
+
$easingValue: returnEaseType("easeOutExpo")
|
50
|
+
@else if $type == "easeOutCirc"
|
51
|
+
$easingValue: returnEaseType("easeOutCirc")
|
52
|
+
@else if $type == "easeOutBack"
|
53
|
+
$easingValue: returnEaseType("easeOutBack")
|
54
|
+
|
55
|
+
|
56
|
+
|
57
|
+
@else if $type == "easeInOutQuad"
|
58
|
+
$easingValue: returnEaseType("easeInOutQuad")
|
59
|
+
@else if $type == "easeInOutCubic"
|
60
|
+
$easingValue: returnEaseType("easeInOutCubic")
|
61
|
+
@else if $type == "easeInOutQuart"
|
62
|
+
$easingValue: returnEaseType("easeInOutQuart")
|
63
|
+
@else if $type == "easeInOutQuint"
|
64
|
+
$easingValue: returnEaseType("easeInOutQuint")
|
65
|
+
@else if $type == "easeInOutSine"
|
66
|
+
$easingValue: returnEaseType("easeInOutSine")
|
67
|
+
@else if $type == "easeInOutExpo"
|
68
|
+
$easingValue: returnEaseType("easeInOutExpo")
|
69
|
+
@else if $type == "easeInOutCirc"
|
70
|
+
$easingValue: returnEaseType("easeInOutCirc")
|
71
|
+
@else if $type == "easeInOutBack"
|
72
|
+
$easingValue: returnEaseType("easeInOutBack")
|
73
|
+
|
74
|
+
@include transition($properties, $duration, cubic-bezier(unquote($easingValue)), $delay)
|
75
|
+
|
@@ -26,34 +26,40 @@
|
|
26
26
|
|
27
27
|
|
28
28
|
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
29
|
+
/* ==========================
|
30
|
+
|
31
|
+
List of all timing function
|
32
|
+
|
33
|
+
* linear
|
34
|
+
* ease (default)
|
35
|
+
* ease-in
|
36
|
+
* ease-out
|
37
|
+
* ease-in-out
|
38
|
+
*
|
39
|
+
* easeInQuad
|
40
|
+
* easeInCubic
|
41
|
+
* easeInQuart
|
42
|
+
* easeInQuint
|
43
|
+
* easeInSine
|
44
|
+
* easeInExpo
|
45
|
+
* easeInCirc
|
46
|
+
* easeInBack
|
47
|
+
*
|
48
|
+
* easeOutQuad
|
49
|
+
* easeOutCubic
|
50
|
+
* easeOutQuart
|
51
|
+
* easeOutQuint
|
52
|
+
* easeOutSine
|
53
|
+
* easeOutExpo
|
54
|
+
* easeOutCirc
|
55
|
+
* easeOutBack
|
56
|
+
*
|
57
|
+
* easeInOutQuad
|
58
|
+
* easeInOutCubic
|
59
|
+
* easeInOutQuart
|
60
|
+
* easeInOutQuint
|
61
|
+
* easeInOutSine
|
62
|
+
* easeInOutExpo
|
63
|
+
* easeInOutCirc
|
64
|
+
* easeInOutBack
|
65
|
+
======================== */
|
metadata
CHANGED
@@ -1,72 +1,67 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: ceaser-easing
|
3
|
-
version: !ruby/object:Gem::Version
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: '0.3'
|
4
5
|
prerelease:
|
5
|
-
version: "0.2"
|
6
6
|
platform: ruby
|
7
|
-
authors:
|
7
|
+
authors:
|
8
8
|
- Jared Hardy
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
|
13
|
-
date: 2011-06-26 00:00:00 -07:00
|
12
|
+
date: 2011-10-13 00:00:00.000000000 -07:00
|
14
13
|
default_executable:
|
15
|
-
dependencies:
|
16
|
-
- !ruby/object:Gem::Dependency
|
14
|
+
dependencies:
|
15
|
+
- !ruby/object:Gem::Dependency
|
17
16
|
name: compass
|
18
|
-
|
19
|
-
requirement: &id001 !ruby/object:Gem::Requirement
|
17
|
+
requirement: &70172161646240 !ruby/object:Gem::Requirement
|
20
18
|
none: false
|
21
|
-
requirements:
|
22
|
-
- -
|
23
|
-
- !ruby/object:Gem::Version
|
24
|
-
version: 0.11
|
19
|
+
requirements:
|
20
|
+
- - ! '>='
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '0.11'
|
25
23
|
type: :runtime
|
26
|
-
|
27
|
-
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: *70172161646240
|
26
|
+
description: a css transition implementation of the Penner equations based on @matthewlein
|
27
|
+
css conversions for compass
|
28
28
|
email: jared@jaredhardy.com
|
29
29
|
executables: []
|
30
|
-
|
31
30
|
extensions: []
|
32
|
-
|
33
31
|
extra_rdoc_files: []
|
34
|
-
|
35
|
-
files:
|
32
|
+
files:
|
36
33
|
- README.mkdn
|
37
34
|
- lib/ceaser-easing.rb
|
38
35
|
- stylesheets/_ceaser-easing.sass
|
39
36
|
- stylesheets/ceaser-easing/_ceaser.sass
|
40
37
|
- stylesheets/ceaser-easing/_ease-types.sass
|
38
|
+
- stylesheets/ceaser-easing/_easing-functions.sass
|
41
39
|
- templates/project/_ceaser.sass
|
42
40
|
- templates/project/manifest.rb
|
43
41
|
has_rdoc: true
|
44
42
|
homepage: http://www.jaredhardy.com/
|
45
43
|
licenses: []
|
46
|
-
|
47
44
|
post_install_message:
|
48
45
|
rdoc_options: []
|
49
|
-
|
50
|
-
require_paths:
|
46
|
+
require_paths:
|
51
47
|
- lib
|
52
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
48
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
53
49
|
none: false
|
54
|
-
requirements:
|
55
|
-
- -
|
56
|
-
- !ruby/object:Gem::Version
|
57
|
-
version:
|
58
|
-
required_rubygems_version: !ruby/object:Gem::Requirement
|
50
|
+
requirements:
|
51
|
+
- - ! '>='
|
52
|
+
- !ruby/object:Gem::Version
|
53
|
+
version: '0'
|
54
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
59
55
|
none: false
|
60
|
-
requirements:
|
61
|
-
- -
|
62
|
-
- !ruby/object:Gem::Version
|
63
|
-
version:
|
56
|
+
requirements:
|
57
|
+
- - ! '>='
|
58
|
+
- !ruby/object:Gem::Version
|
59
|
+
version: '0'
|
64
60
|
requirements: []
|
65
|
-
|
66
61
|
rubyforge_project:
|
67
62
|
rubygems_version: 1.6.2
|
68
63
|
signing_key:
|
69
64
|
specification_version: 3
|
70
|
-
summary: a css transition implementation of the Penner equations based on @matthewlein
|
65
|
+
summary: a css transition implementation of the Penner equations based on @matthewlein
|
66
|
+
css conversions for compass
|
71
67
|
test_files: []
|
72
|
-
|