anonymoussc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##CSS3 transitions
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. - http://dev.w3.org/csswg/css-transitions/

  
## index.html
<!DOCTYPE html>
<html>

<head>
    <title>Transitions</title>
    <link href="style.css" rel="stylesheet"/>
</head>

<body>
    <div class="cssanimation">
        cssAnimation
    </div>
    <div class="cssAnimationTimesOneLine">
        cssAnimationTimesOneLine
    </div>
    <div class="cssanimationEasing">
        cssAnimationEasing
    </div>
</body>

</html>

## script.js
// Code goes here


## style.css
.cssanimation {
    width               : 200px;
    border              : 1px solid black;
    transition-property : width;
    transition-duration : 2s;
}

.cssanimation:hover {
    width : 400px;
}

.cssanimationOneline {
    transition : width 2s;
}

.cssanimationTimes {
    transition-property : width, background-color;
    transition-duration : 2s, 10s;
}

.cssAnimationTimesOneLine {
    width            : 100px;
    background-color : white;
    transition       : width 2s, background-color 10s;
}

.cssAnimationTimesOneLine:hover {
    width            : 200px;
    background-color : #FF0099;
}

.cssanimationEasing {
    width                      : 200px;
    background-color           : black;
    transition-property        : all;
    transition-timing-function : ease;
    transition-duration        : 2s;
}

.cssanimationEasing:hover {
    background-color : #FF0099;
}
	<!DOCTYPE html>
	<html>

	<head>
	<title>Transitions</title>
	<link href="style.css" rel="stylesheet"/>
	</head>

	<body>
	<div class="cssanimation">
	cssAnimation
	</div>
	<div class="cssAnimationTimesOneLine">
	cssAnimationTimesOneLine
	</div>
	<div class="cssanimationEasing">
	cssAnimationEasing
	</div>
	</body>

	</html>
	.cssanimation {
	width : 200px;
	border : 1px solid black;
	transition-property : width;
	transition-duration : 2s;
	}

	.cssanimation:hover {
	width : 400px;
	}

	.cssanimationOneline {
	transition : width 2s;
	}

	.cssanimationTimes {
	transition-property : width, background-color;
	transition-duration : 2s, 10s;
	}

	.cssAnimationTimesOneLine {
	width : 100px;
	background-color : white;
	transition : width 2s, background-color 10s;
	}

	.cssAnimationTimesOneLine:hover {
	width : 200px;
	background-color : #FF0099;
	}

	.cssanimationEasing {
	width : 200px;
	background-color : black;
	transition-property : all;
	transition-timing-function : ease;
	transition-duration : 2s;
	}

	.cssanimationEasing:hover {
	background-color : #FF0099;
	}