<!doctype html>
<head>
<title>CSS3 Transitions - RJM Programming - October, 2017</title>
<style>
h1 {
background-color: font-family: Verdana;
-webkit-transition: font-family 2s; /* Safari */
transition: font-family 2s;
}
h1:hover {
font-family: Arial;
}
h2 {
background-color: red;
-webkit-transition: background-color 2s; /* Safari */
transition: background-color 2s;
}
h2:hover {
background-color: yellow;
}
h3 {
opacity: 0.6;
-webkit-transition: opacity 2s; /* Safari */
transition: opacity 2s;
}
h3:hover {
opacity: 1.0;
}
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
div:hover {
width: 300px;
}
p {
float: left;
-webkit-transition: float 2s; /* Safari */
transition: float 2s;
}
p:hover {
float: right;
}
</style>
</head>
<body>
<h1 onclick="">CSS3 Transitions</h1>
<h2 onclick="">RJM Programming - October, 2017</h2>
<h3 onclick="">Thanks to <a target=_blank title='' href='https://www.w3schools.com/css/css3_transitions.asp'>https://www.w3schools.com/css/css3_transitions.asp</a></h3>
<div onclick="">
Starts as width: 100px; <br>
Transitions to width: 300px; over 2 seconds
</div>
<p onclick="">
Starts as float: left; <br>
Transitions to float: right; over 2 seconds
</p>
</body>
</html>