Section 10 • Transitions

.transitions.fig91_2 {
	height:100px;
	width:150px;
	border:3px solid hsla(80,65%,50%,1);
	background:url(pics/leaves.png)  center center;
	-moz-transition:all linear 2s;
	-webkit-transition:all linear 2s;
	transition:all linear 2s;
	}
.transitions.fig91_2:hover {
	border:3px solid hsla(325,65%,50%,1);
	background:url(pics/2_pink_flowers.png);
	border-radius:50%;
	}

.transitions.fig93 {
    height:100px;
    width:150px;
    border:3px solid hsla(80,65%,50%,1);
    background:url(../pics/leaves.png) center center;
    -moz-transition:border 1s linear, border-radius 3s linear, 
    background 6s linear;
    -webkit-transition:border 1s linear, border-radius 3s linear, 
    	    background 6s linear;
    transition:border 1s linear, border-radius 3s linear, 
    background 6s linear;
    }
.transitions.demo3:hover {
    border:3px solid hsla(325,65%,50%,1);
    background:url(../pics/2_pink_flowers.png) center center;
    border-radius:50%;
    }

<nav>
 <ul>
  <li><a href="#">Create</a></li>
  <li><a href="#">Read</a></li>
  <li><a href="#">Update</a></li>
  <li><a href="#">Delete</a></li>
 </ul>
</nav>

nav {
    /* basic menu styling */
    width:100px;
    float:left; /* remove to stack menus */
    margin:0 20px 0 0; 
    border:1px solid #DDD;
    padding:5px 0;
    border-radius:5px;
 
    /* background gradient */
    background:-moz-linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%, 
      #CCC 100%), #FFF;
    background:-webkit-linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%,
      #CCC 100%), #FFF;
    background:linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%, #CCC 100%), #FFF;
    font:11px arial, sans-serif;
    background:linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%, #CCC 100%), #FFF;
    font:11px arial, sans-serif;
    overflow:hidden;
 
    /* set the origin point to top-left of menu */
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
 
    /* set up of menu animation */		
    -webkit-transition: all ease-out .7s;
    -moz-transition: all ease-out .7s;
    transition: all ease-out .7s;
    }
 
nav:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
     transform: scale(2);
    }
 
/* more stylings for menu */
nav li {
    display:block;
    border-bottom:1px solid #069;
    margin:3px auto;
    width:80%;
    list-style-type:none;
    }
nav li:last-child {
    border:none;
    margin-bottom:0;
    } 
nav a {
    display:block; 
    width:100%; /* makes background of link clickable */
    padding:0 0 3px;
    color:#069;
    text-decoration:none;
    } 
nav a:hover {
    color:#F33;
    }