Transitions provide, among other things, a simple way to "animate" some of your html elements.

As you move the cursor around this page, you will notice that it flips lef-to-right. That is done with transitions.

There are many tutorials on the internet about how to do cool things with CSS transitions.  I've linked to one of these at the bottom of this page; feel free to find your own, if you prefer. In this project, you will write code for some of these. Find ones that are fairly easy; skip the hard ones.

Here is one example I found. It makes links that fade out when you are about to click on them. Annoying, but fun!  You may try it if you like.

Mr. Young's "Fade-away" tutorial

Put this code in your CSS

a{
  transition-property: all;
  transition-duration: 350ms;
  transition-timing-function: ease-in-out;
  position: relative;
  background-color: white;
  color: black;
}
 
a:hover{
  top: -2px
  background-color: black;
  color: white;
}

Then in the html have a hyperlink like this:

<!DOCTYPE html>
<html>  
    <head>
        <title>fade-on-hover transition</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>
           That we are in the midst of crisis is now well understood. Our nation is at war against a far-reaching network of violence and hatred. Our economy is badly weakened, a consequence of greed and irresponsibility on the part of some but also our collective failure to make hard choices and prepare the nation for a new age. - Barack Obama, 2009
        </p>
        <ul>
            <li><a href="http://brackets.io">TRY CLICKING ON THIS.</a> 
            </li>
           
        </ul>
       
    </body>
</html>

 

Another example: do you want to flip text left-to-right?

     div {
          transform:rotateY(180deg);
         }

For more complex animations, there are many tools available. Google Web Designer. sounds Like a good place to start

Transitions assignment
Due Date: Thursday, 6/7/24

Use a layout table to show off a total of 4 ways of animating web elements.

I feel you need a topic to unify this project, which is otherwise just about using 'transitions.' Pick something you want to convince others of. Something you want to advocate. This is sometimes called 'writing a polemic.' Or it can be a straight-out advertisement, if you want.

Check out this site. It contains 8 simple animations using CSS transitions (mostly). Choose from among them or from examples in other internet articles you may find.

Do 4 animations and include them in the layout table on your page.

Rubric

Category minus 15 points minus 10 points minus 5 points Full points
General Project Requirements       A layout table was used.
Animations One animation was done. Two animations were done. Three animations were done. Four animations were done.
Code Quality Code doesn't run as expected and shows they did not study or understand the learning resources Code displays somewhat as expected, minimal understanding of learning resources Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well
Creativity Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) Student shows minimal creativity from base requirement (i.e adds a couple things but not much) Student shows some creativity from base requirement (i.e creates some interesting content and styling) Student has a unifying theme for the project and is creative with it (i.e. additional content, lots of styling, etc.)