ceaser-easing 0.1.5 → 0.2
Sign up to get free protection for your applications and to get access to all the features.
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
|
-
|