Transitions
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Transitions.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transitions</title>
</head>
<body>
<h1>fffffff</h1>
<h2>head</h2>
<div></div>
<p>paragraph</p>
<h3>h3</h3>
<h4>h4</h4>
</body>
</html>
CSS
/* TRANSITION */
h1 {
border: 12px solid black;
}
h1:hover {
margin: 70px;
background-color: brown;
border-radius: 50%;
transition: 2s;
}
/* HAS 4 PROPERTIES */
/* TRANSITION DURATION (transition above and this same)*/
h2 {
border: 20px solid blue;
}
h2:hover {
margin: 50px;
display: inline;
border-radius: 50%;
background-color: antiquewhite;
transition-duration: 5s;
}
/* TRANSITION DELAY */
div {
height: 100px;
width: 300px;
border: 10px dotted darkblue;
}
div:hover {
margin: 50%;
border-radius: 50%;
background-color: aqua;
transition-duration: 5s;
transition-delay: 2s;
}
/* TRANSITION TIMING FUNCTION */
p{
height: 123px;
width: 301px;
border: 23px solid brown;
}
p:hover{
border-radius: 50%;
transition-duration: 2s;
transition-timing-function:linear;
background-color: bisque;
}
h3{
display: inline;
border: 43px solid blueviolet;
height: 22px;
width: 23px;
}
h3:hover{
border-radius: 50%;
background-color: blanchedalmond;
transition-timing-function: step-start;
}
h4{
border: 43px solid navy;
height: 22px;
width: 23px;
}
h4:hover{
border-radius: 45%;
background-color: blanchedalmond;
transition-timing-function: cubic-bezier();
}
Comments
Post a Comment