Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

dmd-web-two/css-showcase-midterm.html

Go to file
 
 
Cannot retrieve contributors at this time
273 lines (256 sloc) 10.3 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/css-showcase-midterm.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/d4e127e2d0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://kit.fontawesome.com/9c045b0ca9.js" crossorigin="anonymous"></script>
<meta name="theme-color" content="#fafafa">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo">CSS Animations</div>
<ul>
<li><a href="css-showcase-midterm.html">Defining CSS Animations</a></li>
<li><a href="css-animation-examples.html">CSS Animation Examples</a></li>
<li><a href="css-animation-resources.html">Resources</a></li>
</ul>
</nav>
<div class="section" id="grey">
<div class=greyhalf1>
<h1>Defining CSS Animations</h1>
<p>Web Developers can use CSS to animate HTML elements.</p>
<h2 id="quote">"An animation lets an element gradually change from one style to another.<br>
You can change as many CSS properties you want, as many times you want.<br>
To use CSS animation, you must first specify some keyframes for the animation.<br>
Keyframes hold what styles the element will have at certain times (w3schools)."</h2>
</div>
<div class="smiley">
<div class="emoji emoji--yay">
<div class="emoji__face">
<div class="emoji__eyebrows"></div>
<div class="emoji__mouth"></div>
</div>
<style>
.emoji {
width: 150px;
height: 150px;
margin: 15px 15px 40px;
background: #FFDA6A;
display: inline-block;
border-radius: 50%;
}
.emoji:after {
position: absolute;
bottom: -40px;
font-size: 18px;
width: 60px;
left: calc(50% - 30px);
color: #8A8A8A;
}
.emoji__face, .emoji__eyebrows, .emoji__eyes, .emoji__mouth, .emoji__tongue, .emoji__heart, .emoji__hand, .emoji__thumb {
position: absolute;
}
.emoji__face:before, .emoji__face:after, .emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before, .emoji__tongue:after, .emoji__heart:before, .emoji__heart:after, .emoji__hand:before, .emoji__hand:after, .emoji__thumb:before, .emoji__thumb:after {
position: absolute;
content: '';
}
.emoji__face {
width: inherit;
height: inherit;
}
.emoji--yay:after {
content: '';
-webkit-animation: yay-reverse 1s linear infinite;
animation: yay-reverse 1s linear infinite;
}
.emoji--yay .emoji__face {
-webkit-animation: yay 1s linear infinite alternate;
animation: yay 1s linear infinite alternate;
}
.emoji--yay .emoji__eyebrows {
left: calc(50% - 3px);
top: 30px;
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -6px 0 0 0 #000000, -36px 0 0 0px #000000, 6px 0 0 0 #000000, 36px 0 0 0px #000000;
}
.emoji--yay .emoji__eyebrows:before, .emoji--yay .emoji__eyebrows:after {
width: 36px;
height: 18px;
border-radius: 60px 60px 0 0;
background: transparent;
border: 6px solid black;
box-sizing: border-box;
border-bottom: 0;
bottom: 3px;
left: calc(50% - 18px);
}
.emoji--yay .emoji__eyebrows:before {
margin-left: -21px;
}
.emoji--yay .emoji__eyebrows:after {
margin-left: 21px;
}
.emoji--yay .emoji__mouth {
top: 60px;
background: transparent;
left: 50%;
}
.emoji--yay .emoji__mouth:after {
width: 80px;
height: 80px;
left: calc(50% - 40px);
top: -75px;
border-radius: 50%;
background: transparent;
border: 6px solid #000000;
box-sizing: border-box;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
z-index: 1;
}
.emoji--yay .emoji__mouth:before {
width: 6px;
height: 6px;
background: transparent;
border-radius: 50%;
bottom: 5px;
left: calc(50% - 3px);
box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -35px -2px 30px 10px #D5234C, 35px -2px 30px 10px #D5234C;
}
@-webkit-keyframes yay {
25% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
@keyframes yay {
25% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
</style>
</div>
</div>
</div>
<div class="section" id="red">
<h1>Basic Rules and Properties</h1>
<p>The <strong>@keyframes</strong> rule changes the animation style at specified times. To get the rule to work, you must put it in front of the specified element in the CSS.</p>
<div class="examplehalf">
<div id="imghalf">
<img src="img/keyframes2.PNG" alt="keyframes example">
</div>
<div id="example1">
<style>
#example1 {
width: 100px;
height: 100px;
margin: 20px;
background-color: red;
animation-name: example;
animation-duration: 10s;
animation-delay: -2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@media (min-width: 1100px) {
#example1 {
width: 40%;
margin: auto;
}
}
@keyframes example {
0% {background-color: purple;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</div>
</div>
<p>The <strong>animation-name</strong> property allows the @keyframes rule to be linked to the element.</p>
<p>The <strong>animation-duration</strong> property defines the length of time that the animation runs for. When the <strong>animation-duration</strong> property is not specified, there will be no animation as the default time is 0 seconds.</p>
<p>You can use percentages and "from-to" statements in the @keyframes rule.</p>
<p>The <strong>animation-delay</strong> property creates a delay for the start of the animation.</p>
<p> The <strong>animation-iteration-count</strong> property specifies how many times the animation will run.</p>
<p>The <strong>animation-direction</strong> property can be played in <strong>reverse</strong>, <strong>normal</strong>, <strong>alternate</strong>(played forwards then backwards), or <strong>alternate-reverse</strong>(played backwards then forwards).</p>
<p>The <strong>animation-timing-function</strong> property specifies the speed curve of the animation. The values of the property can be <strong>ease</strong>(slow start, then fast, then slow end), <strong>linear</strong>(same speed all the way), <strong>ease-in</strong>, <strong>ease-out</strong>, <strong>ease-in-out</strong>(slow start and end), or <strong>cubic-bezier(n,n,n,n)</strong>(custom values).</p>
<p>A property called <strong>animation-fill-mode</strong> determines the element style when the animation is not playing. Values can be <strong>forwards</strong>, <strong>none</strong>(default), <strong>backwards</strong>(element will inherit style values set by first keyframe), or <strong>both</strong>.</p>
<p>A shortcut to using these properties is the shorthand version:</p>
<img src="img/shorthand1.PNG">
<img src="img/shorthand2.PNG">
<p>In the example below, the property <strong>transform: scale();</strong> is used to resize the element. The scaling is coordinate based meaning (x, y) or just (x).</p>
<div id="example2">
<style>
#example2 {
height: 250px;
width: 250px;
margin: 5em auto;
background-color: red;
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.3);
background-color: #00ff00;
border-radius: 100%;
}
50% {
background-color: #ff00ff;
}
100% {
transform: scale(1.5);
background-color: #0000ff;
}
}
</style>
</div>
</div>
</body>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>