Skip to content

Commit 93b0059

Browse files
swanie21swanie21
committed
complete background transitions
1 parent 636c7ec commit 93b0059

20 files changed

+1090
-231
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/background-transition-buttons.scssc

104 KB
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/body.scssc

6.44 KB
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/buttons.scssc

41.1 KB
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/main.scssc

861 Bytes
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/mixins.scssc

3.26 KB
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/variables.scssc

1.43 KB
Binary file not shown.

‎css/body.scss

-15
This file was deleted.

‎css/main.css

+25-196
Original file line numberDiff line numberDiff line change
@@ -1,196 +1,25 @@
1-
* {
2-
box-sizing: border-box;
3-
}
4-
5-
section {
6-
margin: auto;
7-
width: 80%;
8-
}
9-
10-
h1 {
11-
font-family: 'Spicy Rice', serif;
12-
font-size: 30px;
13-
letter-spacing: 3px;
14-
text-align: center;
15-
}
16-
17-
button {
18-
background: #ccc;
19-
border: none;
20-
border-radius: 5px;
21-
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
22-
color: #111;
23-
font-family: 'Puritan', sans-serif;
24-
font-size: 20px;
25-
padding: 15px;
26-
margin: 5px;
27-
}
28-
29-
.button1 {
30-
transition: background 0.3s ease;
31-
}
32-
.button1:hover, .button1:focus {
33-
background: #5543e0;
34-
color: #fff;
35-
}
36-
37-
.button2 {
38-
transition: background 1s ease;
39-
}
40-
.button2:hover, .button2:focus {
41-
background: #5543e0;
42-
color: #fff;
43-
}
44-
45-
.button3 {
46-
transition: background 0.3s ease 0.5s, color 0.3s ease 0.5s;
47-
}
48-
.button3:hover, .button3:focus {
49-
background: #5543e0;
50-
color: #fff;
51-
}
52-
53-
.button4 {
54-
transition: background 0.5s ease, color 0.5s linear;
55-
}
56-
.button4:hover {
57-
background: #5543e0;
58-
color: #fe29b5;
59-
}
60-
61-
.button5 {
62-
position: relative;
63-
transform: translateZ(0);
64-
transition: color 0.3s ease;
65-
}
66-
.button5:hover, .button5:focus, .button5:active {
67-
color: #fff;
68-
}
69-
.button5:hover:before, .button5:focus:before, .button5:active:before {
70-
transform: scaleX(1);
71-
}
72-
73-
.button5:before {
74-
position: absolute;
75-
top: 0;
76-
left: 0;
77-
right: 0;
78-
bottom: 0;
79-
background: #5543e0;
80-
border-radius: 5px;
81-
content: "";
82-
transform: scaleX(0);
83-
transform-origin: 0 50%;
84-
transition: transform 0.3s ease-out;
85-
z-index: -1;
86-
}
87-
88-
.button6 {
89-
position: relative;
90-
transform: translateZ(0);
91-
transition: color 0.3s ease;
92-
}
93-
.button6:hover, .button6:focus, .button6:active {
94-
color: #fff;
95-
}
96-
.button6:hover:before, .button6:focus:before, .button6:active:before {
97-
transform: scaleX(1);
98-
}
99-
100-
.button6:before {
101-
position: absolute;
102-
top: 0;
103-
left: 0;
104-
right: 0;
105-
bottom: 0;
106-
background: #5543e0;
107-
border-radius: 5px;
108-
content: "";
109-
transform: scaleX(0);
110-
transform-origin: 100% 50%;
111-
transition: transform 0.3s ease-out;
112-
z-index: -1;
113-
}
114-
115-
.button7 {
116-
position: relative;
117-
transform: translateZ(0);
118-
transition: color 0.3s ease;
119-
}
120-
.button7:hover, .button7:focus, .button7:active {
121-
color: #fff;
122-
}
123-
.button7:hover:before, .button7:focus:before, .button7:active:before {
124-
transform: scaleX(1);
125-
}
126-
127-
.button7:before {
128-
position: absolute;
129-
top: 0;
130-
left: 0;
131-
right: 0;
132-
bottom: 0;
133-
background: #5543e0;
134-
border-radius: 5px;
135-
content: "";
136-
transform: scaleX(0);
137-
transform-origin: 50% 0;
138-
transition: transform 0.3s ease-out;
139-
z-index: -1;
140-
}
141-
142-
.button8 {
143-
position: relative;
144-
transform: translateZ(0);
145-
transition: color 0.3s ease;
146-
}
147-
.button8:hover, .button8:focus, .button8:active {
148-
color: #fff;
149-
}
150-
.button8:hover:before, .button8:focus:before, .button8:active:before {
151-
transform: scaleY(1);
152-
}
153-
154-
.button8:before {
155-
position: absolute;
156-
top: 0;
157-
left: 0;
158-
right: 0;
159-
bottom: 0;
160-
background: #5543e0;
161-
border-radius: 5px;
162-
content: "";
163-
transform: scaleY(0);
164-
transform-origin: 100% 0;
165-
transition: transform 0.3s ease-out;
166-
z-index: -1;
167-
}
168-
169-
.button9 {
170-
position: relative;
171-
transform: translateZ(0);
172-
transition: color 0.3s ease;
173-
}
174-
.button9:hover, .button9:focus, .button9:active {
175-
color: #fff;
176-
}
177-
.button9:hover:before, .button9:focus:before, .button9:active:before {
178-
transform: scaleY(1);
179-
}
180-
181-
.button9:before {
182-
position: absolute;
183-
top: 0;
184-
left: 0;
185-
right: 0;
186-
bottom: 0;
187-
background: #5543e0;
188-
border-radius: 5px;
189-
content: "";
190-
transform: scaleY(0);
191-
transform-origin: 0 100%;
192-
transition: transform 0.3s ease-out;
193-
z-index: -1;
194-
}
195-
196-
/*# sourceMappingURL=main.css.map */
1+
/*
2+
Errno::ENOENT: No such file or directory @ rb_sysopen - css/main.scss
3+
4+
Backtrace:
5+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:484:in `read'
6+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:484:in `update_stylesheet'
7+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
8+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:209:in `each'
9+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
10+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:294:in `watch'
11+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin.rb:109:in `method_missing'
12+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/sass_scss.rb:360:in `watch_or_update'
13+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/sass_scss.rb:51:in `process_result'
14+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/base.rb:52:in `parse'
15+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/base.rb:19:in `parse!'
16+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/bin/sass:13:in `<top (required)>'
17+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/sass:23:in `load'
18+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/sass:23:in `<main>'
19+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/ruby_executable_hooks:15:in `eval'
20+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/ruby_executable_hooks:15:in `<main>'
21+
*/
22+
body:before {
23+
white-space: pre;
24+
font-family: monospace;
25+
content: "Errno::ENOENT: No such file or directory @ rb_sysopen - css/main.scss"; }

‎css/main.css.map

-7
This file was deleted.

‎css/main.scss

-2
This file was deleted.

‎css/mixins.scss

-7
This file was deleted.

‎index.html

+15-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width">
66
<title>CSS Animations</title>
77
<link href="https://fonts.googleapis.com/css?family=Puritan|Spicy+Rice" rel="stylesheet">
8-
<link rel="stylesheet" href="css/main.css">
8+
<link rel="stylesheet" href="styles/main.css">
99
</head>
1010
<body>
1111
<section>
@@ -16,9 +16,20 @@ <h1>Background Transitions</h1>
1616
<button class="button4" type="button" name="button">Multiple Transitions</button>
1717
<button class="button5" type="button" name="button">Sweep to Right</button>
1818
<button class="button6" type="button" name="button">Sweep to Left</button>
19-
<button class="button7" type="button" name="button">Sweep from Middle</button>
20-
<button class="button8" type="button" name="button">Sweep to Bottom</button>
21-
<button class="button9" type="button" name="button">Sweep to Top</button>
19+
<button class="button7" type="button" name="button">Sweep to Bottom</button>
20+
<button class="button8" type="button" name="button">Sweep to Top</button>
21+
<button class="button9" type="button" name="button">Horizontal Outer Sweep</button>
22+
<button class="button10" type="button" name="button">Horizontal Inner Sweep</button>
23+
<button class="button11" type="button" name="button">Vertical Outer Sweep</button>
24+
<button class="button12" type="button" name="button">Vertical Inner Sweep</button>
25+
<button class="button13" type="button" name="button">Bounce to Right</button>
26+
<button class="button14" type="button" name="button">Bounce to Left</button>
27+
<button class="button15" type="button" name="button">Bounce to Bottom</button>
28+
<button class="button16" type="button" name="button">Bounce to Top</button>
29+
<button class="button17" type="button" name="button">Rectangle In</button>
30+
<button class="button18" type="button" name="button">Rectangle Out</button>
31+
<button class="button19" type="button" name="button">Radial In</button>
32+
<button class="button20" type="button" name="button">Radial Out</button>
2233
</section>
2334
</body>
2435
</html>

0 commit comments

Comments
 (0)