Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Integer tincidunt. Praesent turpis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit.
+This animation consists of a lot of transition and transform properties as discussed on "Defining CSS Animations". For example:(On next tab)
Morbi ac felis. Sed aliquam ultrices mauris. Quisque id odio. Cras sagittis. Fusce vulputate eleifend sapien.
+body #wrap { + -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + -webkit-transition-delay: 2.16s; + transition-delay: 2.16s; + -webkit-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + }
Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Quisque id odio. Fusce fermentum.
+Hi again, its me!
Learn the basic principles of css animations. Try some out yourself with their examples and exercises. The topics that are covered include:
+I found out about this Youtuber while conducting research for this project. Really great tutorials on not only CSS but web design and programming in general.
+Great resource for me on this project. There are 24 unique and really cool CSS animations. Each animation allows you to view not only the code but a website that is using it. Some even have a description underneath with a tutorial of how to do it yourself.
+Of course I had to use MDN. Similar to W3Schools but without the ability to try it yourself.
+Very extensive resource on CSS animations. Examples include link to edit code on CodePen. More resources available on the page as well as the browsers that support CSS animations.
+Web Developers use CSS to animate HTML elements. "An animation lets an element gradually change from one style to another.
+
Web Developers can use CSS to animate HTML elements.
+You can use percentages and "from-to" statements in the @keyframes rule.
The animation-delay property creates a delay for the start of the animation.
The animation-iteration-count property specifies how many times the animation will run.
-The animation-direction> property can be played in reverse, normal, alternate(played forwards then backwards), or alternate-reverse(played backwards then forwards).
+The animation-direction property can be played in reverse, normal, alternate(played forwards then backwards), or alternate-reverse(played backwards then forwards).
The animation-timing-function property specifies the speed curve of the animation. The values of the property can be ease(slow start, then fast, then slow end), linear(same speed all the way), ease-in, ease-out, ease-in-out(slow start and end), or cubic-bezier(n,n,n,n)(custom values).
-The pictures below includes a new property called animation-fill-mode with a value of forwards. Other values can be none(default), backwards(element will inherit style values set by first keyframe), or both.
+A property called animation-fill-mode determines the element style when the animation is not playing. Values can be forwards, none(default), backwards(element will inherit style values set by first keyframe), or both.
A shortcut to using these properties is the shorthand version:
@@ -238,15 +239,15 @@
@keyframes stretch {
0% {
transform: scale(.3);
- background-color: red;
+ background-color: #00ff00;
border-radius: 100%;
}
50% {
- background-color: orange;
+ background-color: #ff00ff;
}
100% {
transform: scale(1.5);
- background-color: yellow;
+ background-color: #0000ff;
}
}
diff --git a/css/css-animation-examples.css b/css/css-animation-examples.css
index edde462..7f45c02 100644
--- a/css/css-animation-examples.css
+++ b/css/css-animation-examples.css
@@ -100,26 +100,214 @@
* {
box-sizing: border-box;
}
+ /* Beginning of Menu */
+ nav{
+ background: #0082e6;
+ height: 80px;
+ width: 100%;
+ }
+ div.logo {
+ color: white;
+ font-size: 35px;
+ line-height: 80px;
+ padding: 0 100px;
+ font-weight: bold;
+ }
+ nav ul {
+ float: right;
+ margin-right: 20px;
+ }
+ nav ul li {
+ display: inline-block;
+ line-height: 80px;
+ margin: 0 5px;
+ }
+ nav ul li a {
+ color: black;
+ font-size: 17px;
+ text-transform: uppercase;
+ padding: 7px 13px;
+ border-radius: 3px;
+ }
+ a:hover {
+ background: #1b9bff;
+ transition: .5s;
+ }
+ .checkbtn {
+ font-size: 30px;
+ color: white;
+ float: right;
+ line-height: 80px;
+ margin-right: 40px;
+ cursor: pointer;
+ display: none;
+ }
+ #check {
+ display: none;
+
+ }
+ @media (max-width: 1100px) {
+ div.logo {
+ font-size:30px;
+ padding-left: 50px;
+ }
+ nav ul li a {
+ font-size: 16px;
+ }
+ }
+ @media (max-width: 1100px) {
+ .checkbtn {
+ display: block;
+ }
+ ul {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ background: #2c3e50;
+ top: 80px;
+ left: -100%;
+ text-align: center;
+ transition: all .5s;
+ }
+ nav ul li {
+ display: block;
+ margin: 50px 0;
+ line-height: 30px;
+ }
+ nav ul li a {
+ font-size: 20px;
+ }
+ a:hover, a.active {
+ background: none;
+ color: #0082e6;
+ }
+ #check:checked ~ ul {
+ left: 0;
+ }
+ }
+ /* End of Menu */
h1 {
margin: none;
}
#card {
- width: 10%;
- margin: auto;
+ width: 100%;
background-color: #ff9900;
}
+ #card h1 {
+ margin: auto;
+ }
.tumble {
width: 100%;
- background-color: #06dbfb;
+ padding: 100px;
+ background-image: url("../img/background.png");
+ background-size: cover;
+ background-repeat: no-repeat;
}
.tumble h1 {
font-size: 30px;
- border: solid 1px black;
}
.flex3 {
width: 30%;
margin: auto;
+ color: white;
}
+ /* End of Tumbling Letters */
+ /*Beginning of writing text */
+ .container {
+ background-color: #232323;
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ justify-content: center;
+ min-height: 30em;
+ }
+ .container svg {
+ max-width: 45rem;
+ width: 100%;
+ height: auto;
+ fill: none;
+ stroke: white;
+ stroke-width: 8;
+ }
+ .container svg path {
+ stroke-dasharray: 1500;
+ stroke-dashoffset: -1500;
+ }
+ .container svg path:nth-of-type(1) {
+ -webkit-animation: draw 500ms 250ms forwards;
+ animation: draw 500ms 250ms forwards;
+ }
+ .container svg path:nth-of-type(2) {
+ -webkit-animation: draw 500ms 500ms forwards;
+ animation: draw 500ms 500ms forwards;
+ }
+ .container svg path:nth-of-type(3) {
+ -webkit-animation: draw 500ms 750ms forwards;
+ animation: draw 500ms 750ms forwards;
+ }
+ .container svg path:nth-of-type(4) {
+ -webkit-animation: draw 500ms 1000ms forwards;
+ animation: draw 500ms 1000ms forwards;
+ }
+ .container svg path:nth-of-type(5) {
+ -webkit-animation: draw 500ms 1250ms forwards;
+ animation: draw 500ms 1250ms forwards;
+ }
+ .container svg path:nth-of-type(6) {
+ -webkit-animation: draw 500ms 1500ms forwards;
+ animation: draw 500ms 1500ms forwards;
+ }
+ .container svg path:nth-of-type(7) {
+ -webkit-animation: draw 500ms 1750ms forwards;
+ animation: draw 500ms 1750ms forwards;
+ }
+ .container svg path:nth-of-type(8) {
+ -webkit-animation: draw 500ms 2000ms forwards;
+ animation: draw 500ms 2000ms forwards;
+ }
+ .container svg path:nth-of-type(9) {
+ -webkit-animation: draw 500ms 2250ms forwards;
+ animation: draw 500ms 2250ms forwards;
+ }
+ .container svg path:nth-of-type(10) {
+ -webkit-animation: draw 500ms 2500ms forwards;
+ animation: draw 500ms 2500ms forwards;
+ }
+ .container svg path:nth-of-type(11) {
+ -webkit-animation: draw 500ms 2750ms forwards;
+ animation: draw 500ms 2750ms forwards;
+ }
+ .container svg path:nth-of-type(12) {
+ -webkit-animation: draw 500ms 3000ms forwards;
+ animation: draw 500ms 3000ms forwards;
+ }
+ .container svg path:nth-of-type(13) {
+ -webkit-animation: draw 500ms 3250ms forwards;
+ animation: draw 500ms 3250ms forwards;
+ }
+ .container svg path:nth-of-type(14) {
+ -webkit-animation: draw 500ms 3500ms forwards;
+ animation: draw 500ms 3500ms forwards;
+ }
+ .container svg path:nth-of-type(15) {
+ -webkit-animation: draw 500ms 3750ms forwards;
+ animation: draw 500ms 3750ms forwards;
+ }
+
+ @-webkit-keyframes draw {
+ 100% {
+ stroke-dashoffset: 0;
+ }
+ }
+
+ @keyframes draw {
+ 100% {
+ stroke-dashoffset: 0;
+ }
+ }
+ /* End of Writing text */
/* ==========================================================================
Helper classes
========================================================================== */
diff --git a/css/css-animation-resources.css b/css/css-animation-resources.css
new file mode 100644
index 0000000..f7bb8c5
--- /dev/null
+++ b/css/css-animation-resources.css
@@ -0,0 +1,372 @@
+/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+ html {
+ color: #222;
+ font-size: 1em;
+ line-height: 1.4;
+ }
+
+ /*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * Vendor-prefixed and regular ::selection selectors cannot be combined:
+ * https://stackoverflow.com/a/16982510/7133471
+ *
+ * Customize the background color to match your design.
+ */
+
+ ::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ ::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ /*
+ * A better looking default horizontal rule
+ */
+
+ hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+ }
+
+ /*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+ audio,
+ canvas,
+ iframe,
+ img,
+ svg,
+ video {
+ vertical-align: middle;
+ }
+
+ /*
+ * Remove default fieldset styles.
+ */
+
+ fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ /*
+ * Allow only vertical resizing of textareas.
+ */
+
+ textarea {
+ resize: vertical;
+ }
+
+ /* ==========================================================================
+ Browser Upgrade Prompt
+ ========================================================================== */
+
+ .browserupgrade {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+ }
+
+ /* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+ * {
+ box-sizing: border-box;
+ }
+ #dadbod {
+ background-color: #ff8080;
+ padding: 5em;
+ }
+ nav{
+ background: #0082e6;
+ height: 80px;
+ width: 100%;
+ }
+ div.logo {
+ color: white;
+ font-size: 35px;
+ line-height: 80px;
+ padding: 0 100px;
+ font-weight: bold;
+ }
+ nav ul {
+ float: right;
+ margin-right: 20px;
+ }
+ nav ul li {
+ display: inline-block;
+ line-height: 80px;
+ margin: 0 5px;
+ }
+ nav ul li a {
+ color: black;
+ font-size: 17px;
+ text-transform: uppercase;
+ padding: 7px 13px;
+ border-radius: 3px;
+ }
+ a:hover {
+ background: #1b9bff;
+ transition: .5s;
+ }
+ .checkbtn {
+ font-size: 30px;
+ color: black;
+ float: right;
+ line-height: 80px;
+ margin-right: 40px;
+ cursor: pointer;
+ display: none;
+ }
+ #check {
+ display: none;
+
+ }
+ @media (max-width: 1100px) {
+ div.logo {
+ font-size:30px;
+ padding-left: 50px;
+ }
+ nav ul li a {
+ font-size: 16px;
+ }
+ }
+ @media (max-width: 1100px) {
+ .checkbtn {
+ display: block;
+ }
+ nav ul {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ background: #2c3e50;
+ top: 80px;
+ left: -100%;
+ text-align: center;
+ transition: all .5s;
+ }
+ nav ul li {
+ display: block;
+ margin: 50px 0;
+ line-height: 30px;
+ }
+ nav ul li a {
+ font-size: 20px;
+ }
+ a:hover, a.active {
+ background: none;
+ color: #0082e6;
+ }
+ #check:checked ~ ul {
+ left: 0;
+ }
+ }
+ #white {
+ background-color: white;
+ border-radius: 5px;
+ padding: 5em;
+ }
+ p, li {
+ font-family: 'Fjalla One', sans-serif;
+ font-size: 30px;
+ }
+ h2 {
+ font-family: 'Anton', sans-serif;
+ }
+ a {
+ text-decoration: none;
+ }
+ h1 {
+ font-family: 'Anton', sans-serif;
+ }
+ /* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+ /*
+ * Hide visually and from screen readers
+ */
+
+ .hidden {
+ display: none !important;
+ }
+
+ /*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ * causes content to wrap 1 word per line:
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+ .sr-only {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ /* 1 */
+ }
+
+ /*
+ * Extends the .sr-only class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+ .sr-only.focusable:active,
+ .sr-only.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ white-space: inherit;
+ width: auto;
+ }
+
+ /*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+ .invisible {
+ visibility: hidden;
+ }
+
+ /*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+ .clearfix:before,
+ .clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */
+ }
+
+ .clearfix:after {
+ clear: both;
+ }
+
+ /* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+ @media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+ }
+
+ @media print,
+ (-webkit-min-device-pixel-ratio: 1.25),
+ (min-resolution: 1.25dppx),
+ (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+ }
+
+ /* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ https://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+ @media print {
+ *,
+ *:before,
+ *:after {
+ background: transparent !important;
+ color: #000 !important;
+ /* Black prints faster */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: "";
+ }
+ pre {
+ white-space: pre-wrap !important;
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ /*
+ * Printing Tables:
+ * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+ thead {
+ display: table-header-group;
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ }
\ No newline at end of file
diff --git a/css/css-showcase-midterm.css b/css/css-showcase-midterm.css
index 35f0934..963fd50 100644
--- a/css/css-showcase-midterm.css
+++ b/css/css-showcase-midterm.css
@@ -171,11 +171,14 @@ html {
margin: 0;
text-decoration: none;
list-style: none;
- box-sizing: border-box;
}
body{
font-family: montserrat arial helvetica sans-serif;
}
+ p {
+ background-color: white;
+ border-radius: 5px;
+ }
/* Beginning of Menu */
nav{
background: #0082e6;
@@ -199,7 +202,7 @@ html {
margin: 0 5px;
}
nav ul li a {
- color: white;
+ color: black;
font-size: 17px;
text-transform: uppercase;
padding: 7px 13px;
@@ -211,7 +214,7 @@ html {
}
.checkbtn {
font-size: 30px;
- color: white;
+ color: black;
float: right;
line-height: 80px;
margin-right: 40px;
@@ -263,6 +266,14 @@ html {
}
/* End of Menu */
/* Start of Section 1 */
+ h2 {
+ color: #66d9ff;
+ margin: 10px;
+ }
+ p {
+ font-size: 30px;
+ padding: 10px;
+ }
#grey {
background-color: grey;
width: 100%;
diff --git a/img/animation-card-code.PNG b/img/animation-card-code.PNG
new file mode 100644
index 0000000..c9b4304
Binary files /dev/null and b/img/animation-card-code.PNG differ
diff --git a/img/animation-card-code1.jpg b/img/animation-card-code1.jpg
new file mode 100644
index 0000000..cb62575
Binary files /dev/null and b/img/animation-card-code1.jpg differ
diff --git a/img/background.png b/img/background.png
new file mode 100644
index 0000000..8238519
Binary files /dev/null and b/img/background.png differ