ceaser-easing 0.1.5 → 0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.mkdn
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Compass Ceaser CSS
|
|
1
|
+
Compass Ceaser CSS Easing Transitions
|
|
2
2
|
======================================
|
|
3
3
|
|
|
4
4
|
An compass extension based on [ceasar css easing animation tool](http://matthewlein.com/ceaser/) by [@matthewlein](http://twitter.com/matthewlein)
|
|
@@ -28,40 +28,46 @@ Adding Sassy Buttons to an exiting project:
|
|
|
28
28
|
# From the command line:
|
|
29
29
|
compass install ceaser-easing
|
|
30
30
|
|
|
31
|
-
#import
|
|
31
|
+
#import ceaser-easing into your sass/scss file
|
|
32
32
|
@import "ceaser-easing"
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
|
|
38
|
-
Using Ceaser
|
|
38
|
+
Using Ceaser Easing
|
|
39
39
|
===================
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
|
|
42
|
+
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
|
+
|
|
42
44
|
|
|
43
|
-
The ceaser easing
|
|
45
|
+
The ceaser easing function
|
|
44
46
|
-----------------------
|
|
45
47
|
|
|
46
|
-
|
|
47
|
-
@mixin ceaser(ease type, transition property, duration, delay)
|
|
48
|
+
As an example, here is how create the above transition for an html element with id of box.
|
|
48
49
|
|
|
49
|
-
#
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
#transition {
|
|
51
|
+
transition-property: all;
|
|
52
|
+
transition-duration: 1.2s;
|
|
53
|
+
transition-timing-function: ceaser("ease-in");
|
|
54
|
+
}
|
|
54
55
|
|
|
56
|
+
#transition-shorthand {
|
|
57
|
+
transition: all 1.2s ceaser("ease-in");
|
|
58
|
+
}
|
|
55
59
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
|
|
61
|
+
#animation {
|
|
62
|
+
animation-name: animateMe;
|
|
63
|
+
animation-iteration-count: infinite;
|
|
64
|
+
animation-duration: 10s;
|
|
65
|
+
animation-timing-function: ceaser("easeInSine");
|
|
61
66
|
}
|
|
62
67
|
|
|
63
|
-
#
|
|
64
|
-
|
|
68
|
+
#animation-shorthand {
|
|
69
|
+
animation: animateMe 10s ceaser("easeInSine") infinite
|
|
70
|
+
|
|
65
71
|
}
|
|
66
72
|
|
|
67
73
|
|
|
@@ -100,5 +106,36 @@ Here is a list of all the available easing types to choose from, you can see an
|
|
|
100
106
|
easeInOutCirc
|
|
101
107
|
|
|
102
108
|
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
The ceaser easing mixin
|
|
115
|
+
-----------------------
|
|
116
|
+
|
|
117
|
+
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).
|
|
118
|
+
|
|
119
|
+
# The ceaser easing mixin with its argument descriptions
|
|
120
|
+
@mixin ceaser(ease type, transition property, duration, delay)
|
|
121
|
+
|
|
122
|
+
# Example mixin call that will create a 3 second transition with the ease type of ease-in
|
|
123
|
+
@include ceaser(ease-in, all, 3s)
|
|
124
|
+
|
|
125
|
+
# Example mixin call that will create a 500 milliseconds transition on only the width property with a delay of 1 second
|
|
126
|
+
@include ceaser(easeInOutExpo, width, 500ms, 1s)
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
As an example, here is how create the above transition for an html element with id of box.
|
|
130
|
+
|
|
131
|
+
#box {
|
|
132
|
+
width: 500px;
|
|
133
|
+
@include ceaser(easeInOutExpo, width, 500ms, 1s);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
#box:hover {
|
|
137
|
+
width: 700px;
|
|
138
|
+
}
|
|
139
|
+
|
|
103
140
|
|
|
104
141
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "ceaser-easing/
|
|
1
|
+
@import "ceaser-easing/ceaser"
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@import "compass/css3/transition"
|
|
2
|
+
@import "ease-types"
|
|
3
|
+
|
|
4
|
+
@function ceaser($type: "ease")
|
|
5
|
+
$easingValue: returnEaseType($type)
|
|
6
|
+
@return cubic-bezier(unquote($easingValue))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
@mixin ceaser-transition($type: "ease", $properties: all, $duration: 500ms, $delay: 0)
|
|
11
|
+
$easingValue : returnEaseType($type)
|
|
12
|
+
@include transition($properties, $duration, cubic-bezier(unquote($easingValue)), $delay)
|
|
13
|
+
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
@function returnEaseType($type)
|
|
2
|
+
$easingValue: ""
|
|
3
|
+
@if $type == "linear"
|
|
4
|
+
$easingValue: "0.250, 0.250, 0.750, 0.750"
|
|
5
|
+
@else if $type == "ease"
|
|
6
|
+
$easingValue: "0.250, 0.100, 0.250, 1.000"
|
|
7
|
+
@else if $type == "ease-in"
|
|
8
|
+
$easingValue: "0.420, 0.000, 1.000, 1.000"
|
|
9
|
+
@else if $type == "ease-out"
|
|
10
|
+
$easingValue: "0.000, 0.000, 0.580, 1.000"
|
|
11
|
+
@else if $type == "ease-in-out"
|
|
12
|
+
$easingValue: "0.420, 0.000, 0.580, 1.000"
|
|
13
|
+
|
|
14
|
+
@else if $type == "easeInQuad"
|
|
15
|
+
$easingValue: "0.550, 0.085, 0.680, 0.530"
|
|
16
|
+
@else if $type == "easeInCubic"
|
|
17
|
+
$easingValue: "0.550, 0.055, 0.675, 0.190"
|
|
18
|
+
@else if $type == "easeInQuart"
|
|
19
|
+
$easingValue: "0.895, 0.030, 0.685, 0.220"
|
|
20
|
+
@else if $type == "easeInQuint"
|
|
21
|
+
$easingValue: "0.755, 0.050, 0.855, 0.060"
|
|
22
|
+
@else if $type == "easeInSine"
|
|
23
|
+
$easingValue: "0.470, 0.000, 0.745, 0.715"
|
|
24
|
+
@else if $type == "easeInExpo"
|
|
25
|
+
$easingValue: "0.950, 0.050, 0.795, 0.035"
|
|
26
|
+
@else if $type == "easeInCirc"
|
|
27
|
+
$easingValue: "0.600, 0.040, 0.980, 0.335"
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
@else if $type == "easeOutQuad"
|
|
32
|
+
$easingValue: "0.250, 0.460, 0.450, 0.940"
|
|
33
|
+
@else if $type == "easeOutCubic"
|
|
34
|
+
$easingValue: "0.215, 0.610, 0.355, 1.000"
|
|
35
|
+
@else if $type == "easeOutQuart"
|
|
36
|
+
$easingValue: "0.165, 0.840, 0.440, 1.000"
|
|
37
|
+
@else if $type == "easeOutQuint"
|
|
38
|
+
$easingValue: "0.230, 1.000, 0.320, 1.000"
|
|
39
|
+
@else if $type == "easeOutSine"
|
|
40
|
+
$easingValue: "0.390, 0.575, 0.565, 1.000"
|
|
41
|
+
@else if $type == "easeOutExpo"
|
|
42
|
+
$easingValue: "0.190, 1.000, 0.220, 1.000"
|
|
43
|
+
@else if $type == "easeOutCirc"
|
|
44
|
+
$easingValue: "0.075, 0.820, 0.165, 1.000"
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
@else if $type == "easeInOutQuad"
|
|
49
|
+
$easingValue: "0.455, 0.030, 0.515, 0.955"
|
|
50
|
+
@else if $type == "easeInOutCubic"
|
|
51
|
+
$easingValue: "0.645, 0.045, 0.355, 1.000"
|
|
52
|
+
@else if $type == "easeInOutQuart"
|
|
53
|
+
$easingValue: "0.770, 0.000, 0.175, 1.000"
|
|
54
|
+
@else if $type == "easeInOutQuint"
|
|
55
|
+
$easingValue: "0.860, 0.000, 0.070, 1.000"
|
|
56
|
+
@else if $type == "easeInOutSine"
|
|
57
|
+
$easingValue: "0.445, 0.050, 0.550, 0.950"
|
|
58
|
+
@else if $type == "easeInOutExpo"
|
|
59
|
+
$easingValue: "1.000, 0.000, 0.000, 1.000"
|
|
60
|
+
@else if $type == "easeInOutCirc"
|
|
61
|
+
$easingValue: "0.785, 0.135, 0.150, 0.860"
|
|
62
|
+
|
|
63
|
+
@return $easingValue
|
|
@@ -1,15 +1,59 @@
|
|
|
1
1
|
@import "ceaser-easing"
|
|
2
|
-
// The ceaser easing mixin with its argument descriptions
|
|
3
|
-
// @mixin ceaser(ease type, transition property, duration, delay)
|
|
4
2
|
|
|
5
|
-
//
|
|
6
|
-
// here is how to create that transition for an html element with id of box.
|
|
7
|
-
|
|
8
|
-
#box
|
|
9
|
-
width: 500px
|
|
10
|
-
@include ceaser(easeInOutExpo, width, 500ms, 1s)
|
|
3
|
+
// The ceaser sass function to be used when declaring a timing function for a transition or an animation
|
|
11
4
|
|
|
5
|
+
#transition
|
|
6
|
+
-webkit-transition-property: all
|
|
7
|
+
-webkit-transition-duration: 1.2s
|
|
8
|
+
-webkit-transition-timing-function: ceaser("ease-in")
|
|
12
9
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
|
|
11
|
+
#animation
|
|
12
|
+
-webkit-animation-name: animateMe
|
|
13
|
+
-webkit-animation-iteration-count: infinite
|
|
14
|
+
-webkit-animation-timing-function: ceaser("easeInSine")
|
|
15
|
+
-webkit-animation-duration: 10s
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
// The ceaser transition easing mixin with its argument descriptions
|
|
19
|
+
// @mixin ceaser-transition(ease type, transition property, duration, delay)
|
|
20
|
+
|
|
21
|
+
// Example mixin call that will create a 500 millisecond transition on only the width property with a delay of 1 second
|
|
22
|
+
// here is how to create that transition for an html element with id of box.
|
|
23
|
+
|
|
24
|
+
#ceaser-transition
|
|
25
|
+
@include ceaser-transition("easeInOutExpo", width, 500ms, 1s)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// list of all timing function
|
|
30
|
+
|
|
31
|
+
//linear
|
|
32
|
+
//ease (default)
|
|
33
|
+
//ease-in
|
|
34
|
+
//ease-out
|
|
35
|
+
//ease-in-out
|
|
36
|
+
|
|
37
|
+
//easeInQuad
|
|
38
|
+
//easeInCubic
|
|
39
|
+
//easeInQuart
|
|
40
|
+
//easeInQuint
|
|
41
|
+
//easeInSine
|
|
42
|
+
//easeInExpo
|
|
43
|
+
//easeInCirc
|
|
44
|
+
|
|
45
|
+
//easeOutQuad
|
|
46
|
+
//easeOutCubic
|
|
47
|
+
//easeOutQuart
|
|
48
|
+
//easeOutQuint
|
|
49
|
+
//easeOutSine
|
|
50
|
+
//easeOutExpo
|
|
51
|
+
//easeOutCirc
|
|
52
|
+
|
|
53
|
+
//easeInOutQuad
|
|
54
|
+
//easeInOutCubic
|
|
55
|
+
//easeInOutQuart
|
|
56
|
+
//easeInOutQuint
|
|
57
|
+
//easeInOutSine
|
|
58
|
+
//easeInOutExpo
|
|
59
|
+
//easeInOutCirc
|
metadata
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ceaser-easing
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
prerelease:
|
|
5
|
-
|
|
6
|
-
- 0
|
|
7
|
-
- 1
|
|
8
|
-
- 5
|
|
9
|
-
version: 0.1.5
|
|
4
|
+
prerelease:
|
|
5
|
+
version: "0.2"
|
|
10
6
|
platform: ruby
|
|
11
7
|
authors:
|
|
12
8
|
- Jared Hardy
|
|
@@ -14,7 +10,7 @@ autorequire:
|
|
|
14
10
|
bindir: bin
|
|
15
11
|
cert_chain: []
|
|
16
12
|
|
|
17
|
-
date: 2011-
|
|
13
|
+
date: 2011-06-26 00:00:00 -07:00
|
|
18
14
|
default_executable:
|
|
19
15
|
dependencies:
|
|
20
16
|
- !ruby/object:Gem::Dependency
|
|
@@ -25,11 +21,6 @@ dependencies:
|
|
|
25
21
|
requirements:
|
|
26
22
|
- - ">="
|
|
27
23
|
- !ruby/object:Gem::Version
|
|
28
|
-
segments:
|
|
29
|
-
- 0
|
|
30
|
-
- 11
|
|
31
|
-
- beta
|
|
32
|
-
- 3
|
|
33
24
|
version: 0.11.beta.3
|
|
34
25
|
type: :runtime
|
|
35
26
|
version_requirements: *id001
|
|
@@ -45,7 +36,8 @@ files:
|
|
|
45
36
|
- README.mkdn
|
|
46
37
|
- lib/ceaser-easing.rb
|
|
47
38
|
- stylesheets/_ceaser-easing.sass
|
|
48
|
-
- stylesheets/ceaser-easing/
|
|
39
|
+
- stylesheets/ceaser-easing/_ceaser.sass
|
|
40
|
+
- stylesheets/ceaser-easing/_ease-types.sass
|
|
49
41
|
- templates/project/_ceaser.sass
|
|
50
42
|
- templates/project/manifest.rb
|
|
51
43
|
has_rdoc: true
|
|
@@ -62,21 +54,17 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
62
54
|
requirements:
|
|
63
55
|
- - ">="
|
|
64
56
|
- !ruby/object:Gem::Version
|
|
65
|
-
segments:
|
|
66
|
-
- 0
|
|
67
57
|
version: "0"
|
|
68
58
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
69
59
|
none: false
|
|
70
60
|
requirements:
|
|
71
61
|
- - ">="
|
|
72
62
|
- !ruby/object:Gem::Version
|
|
73
|
-
segments:
|
|
74
|
-
- 0
|
|
75
63
|
version: "0"
|
|
76
64
|
requirements: []
|
|
77
65
|
|
|
78
66
|
rubyforge_project:
|
|
79
|
-
rubygems_version: 1.
|
|
67
|
+
rubygems_version: 1.6.2
|
|
80
68
|
signing_key:
|
|
81
69
|
specification_version: 3
|
|
82
70
|
summary: a css transition implementation of the Penner equations based on @matthewlein css conversions for compass
|
|
@@ -1,69 +0,0 @@
|
|
|
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: "0.250, 0.250, 0.750, 0.750"
|
|
8
|
-
@else if $type == "ease"
|
|
9
|
-
$easingValue: "0.250, 0.100, 0.250, 1.000"
|
|
10
|
-
@else if $type == "ease-in"
|
|
11
|
-
$easingValue: "0.420, 0.000, 1.000, 1.000"
|
|
12
|
-
@else if $type == "ease-out"
|
|
13
|
-
$easingValue: "0.000, 0.000, 0.580, 1.000"
|
|
14
|
-
@else if $type == "ease-in-out"
|
|
15
|
-
$easingValue: "0.420, 0.000, 0.580, 1.000"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
@else if $type == "easeInQuad"
|
|
20
|
-
$easingValue: "0.550, 0.085, 0.680, 0.530"
|
|
21
|
-
@else if $type == "easeInCubic"
|
|
22
|
-
$easingValue: "0.550, 0.055, 0.675, 0.190"
|
|
23
|
-
@else if $type == "easeInQuart"
|
|
24
|
-
$easingValue: "0.895, 0.030, 0.685, 0.220"
|
|
25
|
-
@else if $type == "easeInQuint"
|
|
26
|
-
$easingValue: "0.755, 0.050, 0.855, 0.060"
|
|
27
|
-
@else if $type == "easeInSine"
|
|
28
|
-
$easingValue: "0.470, 0.000, 0.745, 0.715"
|
|
29
|
-
@else if $type == "easeInExpo"
|
|
30
|
-
$easingValue: "0.950, 0.050, 0.795, 0.035"
|
|
31
|
-
@else if $type == "easeInCirc"
|
|
32
|
-
$easingValue: "0.600, 0.040, 0.980, 0.335"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
@else if $type == "easeOutQuad"
|
|
37
|
-
$easingValue: "0.250, 0.460, 0.450, 0.940"
|
|
38
|
-
@else if $type == "easeOutCubic"
|
|
39
|
-
$easingValue: "0.215, 0.610, 0.355, 1.000"
|
|
40
|
-
@else if $type == "easeOutQuart"
|
|
41
|
-
$easingValue: "0.165, 0.840, 0.440, 1.000"
|
|
42
|
-
@else if $type == "easeOutQuint"
|
|
43
|
-
$easingValue: "0.230, 1.000, 0.320, 1.000"
|
|
44
|
-
@else if $type == "easeOutSine"
|
|
45
|
-
$easingValue: "0.390, 0.575, 0.565, 1.000"
|
|
46
|
-
@else if $type == "easeOutExpo"
|
|
47
|
-
$easingValue: "0.190, 1.000, 0.220, 1.000"
|
|
48
|
-
@else if $type == "easeOutCirc"
|
|
49
|
-
$easingValue: "0.075, 0.820, 0.165, 1.000"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
@else if $type == "easeInOutQuad"
|
|
54
|
-
$easingValue: "0.455, 0.030, 0.515, 0.955"
|
|
55
|
-
@else if $type == "easeInOutCubic"
|
|
56
|
-
$easingValue: "0.645, 0.045, 0.355, 1.000"
|
|
57
|
-
@else if $type == "easeInOutQuart"
|
|
58
|
-
$easingValue: "0.770, 0.000, 0.175, 1.000"
|
|
59
|
-
@else if $type == "easeInOutQuint"
|
|
60
|
-
$easingValue: "0.860, 0.000, 0.070, 1.000"
|
|
61
|
-
@else if $type == "easeInOutSine"
|
|
62
|
-
$easingValue: "0.445, 0.050, 0.550, 0.950"
|
|
63
|
-
@else if $type == "easeInOutExpo"
|
|
64
|
-
$easingValue: "1.000, 0.000, 0.000, 1.000"
|
|
65
|
-
@else if $type == "easeInOutCirc"
|
|
66
|
-
$easingValue: "0.785, 0.135, 0.150, 0.860"
|
|
67
|
-
|
|
68
|
-
@include transition($properties, $duration, cubic-bezier(unquote($easingValue)), $delay)
|
|
69
|
-
|