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-animation-resources.html

Go to file
 
 
Cannot retrieve contributors at this time
87 lines (79 sloc) 4.61 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-animation-resources.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>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<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="#">Resources</a></li>
</ul>
</nav>
</header>
<div id="dadbod">
<div id="white">
<h1>CSS Animation Resources</h1>
<a href="https://www.w3schools.com/css/css3_animations.asp"><h2>W3Schools.com</h2></a>
<p>Learn the basic principles of css animations. Try some out yourself with their examples and exercises. The topics that are covered include:</p>
<ul>
<li>@keyframes</li>
<li>animation-name</li>
<li>animation-duration-duration</li>
<li>animation-delay</li>
<li>animation-iteration-count</li>
<li>animation-direction</li>
<li>animation-timing-function</li>
<li>animation-fill-mode</li>
<li>animation</li>
</ul>
<a href="https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg/featured"><h2>RedStapler on Youtube</h2></a>
<p>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.</p>
<a href="https://www.creativebloq.com/inspiration/css-animation-examples"><h2>CreativeBloq.com</h2></a>
<p>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.</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><h2>MDN Web Docs</h2></a>
<P>Of course I had to use MDN. Similar to W3Schools but without the ability to try it yourself.</P>
<a href="https://css-tricks.com/almanac/properties/a/animation/"><h2>CSS-tricks.com</h2></a>
<P>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.</P>
<a href="https://www.sololearn.com/Play/CSS"><h2>SoloLearn.com</h2></a>
<P>Learn to code CSS animations(and coding in general) in an ideal online learning platform.</P>
</div>
</div>
<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>