├── README.md
└── example
├── defaults
├── _default.css
└── styles.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | ## Welcome
2 | This course has handouts and code samples provided.
3 |
4 | Code samples will be available on both GitHub and Sitepoint Premium. This course has an assigned GitHub repo with code samples available via branches.
5 |
6 | Code samples can also be downloaded through the [Animating with CSS](https://www.sitepoint.com/premium/courses/animating-with-css-2941) course on [SitePoint's Premium](https://sitepoint.com/premium) website. When viewing the course page, [lesson 1.1](https://github.com/learnable-content/css-animations/tree/lesson1.1) will contain all handouts and code samples. All lesson pages thereafter will provide code samples needed as required by the lesson. Click **Download Zip** to download the assets.
7 |
8 | Handouts are available via the first lesson of a course as .md files.
9 |
10 | **Happy Learning!**
11 |
--------------------------------------------------------------------------------
/example/defaults/_default.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
2 |
3 | html {
4 | font-family: Open Sans, sans-serif; /* 1 */
5 | font-size: 10px;
6 | line-height: 1.15; /* 2 */
7 |
8 | -ms-text-size-adjust: 100%; /* 3 */
9 | -webkit-text-size-adjust: 100%; /* 3 */
10 | }
11 |
12 | body {
13 | margin: 0;
14 | }
15 |
16 | article, aside, footer, header, nav, section {
17 | display: block;
18 | }
19 |
20 | figcaption, figure, main { /* 1 */
21 | display: block;
22 | }
23 |
24 | figure {
25 | margin: 1em 40px;
26 | }
27 |
28 | [hidden] {
29 | display: none;
30 | }
31 |
32 | /* Fonts */
33 |
34 | @font-face {
35 | font-family: 'Open Sans';
36 | font-style: normal;
37 | font-weight: 400;
38 | src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
39 | }
40 | @font-face {
41 | font-family: 'Open Sans';
42 | font-style: normal;
43 | font-weight: 700;
44 | src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
45 | }
46 |
47 | /* Layout */
48 |
49 | body {
50 | margin: 0 auto;
51 | max-width: 800px;
52 | text-align: center;
53 | width: 100%;
54 | }
55 |
56 | .centered {
57 | left: 50%;
58 | position: absolute;
59 | top: 50%;
60 | -webkit-transform: translate(-50%, -50%);
61 | transform: translate(-50%, -50%);
62 | }
63 |
64 | h1 {
65 | background: #3991AE;
66 | color: #fff;
67 | display: inline-block;
68 | font-size: 5vw;
69 | font-weight: normal;
70 | margin: 0;
71 | padding: 10vh 4rem;
72 | text-align: left;
73 | }
74 |
75 | p {
76 | color: #554;
77 | font-size: 2.5vw;
78 | }
79 |
80 | @media (min-width: 1200px) {
81 |
82 | p {
83 | font-size: 2vw;
84 | }
85 | }
86 |
87 | @media (max-width: 600px) {
88 |
89 | p {
90 | font-size: 2rem;
91 | }
92 | }
93 |
94 | a {
95 | color: #EF9E45;
96 | text-decoration: none;
97 | }
98 |
99 | ul {
100 | margin: 2vh 0 2vh 8rem;
101 | }
102 |
103 | li {
104 | color: #eee;
105 | font-size: 2.5rem;
106 | padding: .8rem 0;
107 | text-align: left;
108 | -webkit-transition: all .2s ease-out;
109 | transition: all .2s ease-out;
110 | }
111 |
112 | li:hover {
113 | color: #aaa;
114 | }
115 |
116 | @media (min-width: 1200px) {
117 |
118 | li {
119 | font-size: 2vw;
120 | }
121 | }
122 |
--------------------------------------------------------------------------------
/example/defaults/styles.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
2 | html {
3 | font-size: 10px;
4 | font-family: Open Sans, sans-serif;
5 | /* 1 */
6 | line-height: 1.15;
7 | /* 2 */
8 | -ms-text-size-adjust: 100%;
9 | /* 3 */
10 | -webkit-text-size-adjust: 100%
11 | /* 3 */
12 | }
13 | body {
14 | margin: 0
15 | }
16 | article, aside, footer, header, nav, section {
17 | display: block
18 | }
19 | figcaption, figure, main {
20 | /* 1 */
21 | display: block
22 | }
23 | figure {
24 | margin: 1em 40px
25 | }
26 | [hidden] {
27 | display: none
28 | }
29 | /* Fonts */
30 | @font-face {
31 | font-family: 'Open Sans';
32 | font-style: normal;
33 | font-weight: 400;
34 | src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff')
35 | }
36 | @font-face {
37 | font-family: 'Open Sans';
38 | font-style: normal;
39 | font-weight: 700;
40 | src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff')
41 | }
42 | /* Layout */
43 | body {
44 | max-width: 800px;
45 | width: 100%;
46 | margin: 0 auto;
47 | text-align: center
48 | }
49 | .centered {
50 | position: absolute;
51 | top: 50%;
52 | left: 50%;
53 | transform: translate(-50%, -50%)
54 | }
55 | h1 {
56 | background: #3991AE;
57 | display: inline-block;
58 | font-weight: normal;
59 | font-size: 5vw;
60 | padding: 10vh 4rem;
61 | color: #fff;
62 | margin: 0;
63 | text-align: left
64 | }
65 | p {
66 | font-size: 2.5vw;
67 | color: #554
68 | }
69 | @media (min-width: 1200px) {
70 | p {
71 | font-size: 2vw
72 | }
73 | }
74 | @media (max-width: 600px) {
75 | p {
76 | font-size: 2rem
77 | }
78 | }
79 | a {
80 | color: #EF9E45;
81 | text-decoration: none
82 | }
83 | ul {
84 | margin: 2vh 0 2vh 8rem
85 | }
86 | li {
87 | text-align: left;
88 | padding: .8rem 0;
89 | font-size: 2.5rem;
90 | color: #eee;
91 | transition: all .2s ease-out
92 | }
93 | li:hover {
94 | color: #aaa
95 | }
96 | @media (min-width: 1200px) {
97 | li {
98 | font-size: 2vw
99 | }
100 | }
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | CSS Animation
4 |
5 |
6 |
7 | Animating in
the browser
8 | A SitePoint.com course by Donovan Hutchinson
9 |
10 |