transition-timing-function:ease linear ease-in ease-out ease-in-out
/*
how the transition takes place
transition-timing-function:
transition:all 3s here 5s;
ease = default
ease = slow start, fast,slow end
linear = same speed start to end
ease-in = slow start
ease-out =s slow end
ease-in-out = slow start, fast, slow end
*/
INDEX.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body >
<div class="default">default</div>
<div class="ease">ease</div>
<div class="linear">linear</div>
<div class="ease-in">ease-in</div>
<div class="ease-out">ease-out</div>
<div class="ease-in-out">ease-in-out</div>
</body>
</html>
CSS:
/*
how the transition takes place
transition-timing-function:
transition:all 3s here 5s;
ease = default
ease = slow start, fast,slow end
linear = same speed start to end
ease-in = slow start
ease-out =s slow end
ease-in-out = slow start, fast, slow end
*/
div {
width: 100px;
height: 100px;
background: green;
color: white;
margin: 10px;
display: inline-block;
transition:all 1s ;
}
div:hover {
background: red;
transform: translatey(100px);
transition: 1s;
transition-timing-function: linear;
}
.ease {
transition: all 2s ease;
transition-timing-function: ease;
background: red;
}
.linear {
transition-timing-function: linear;
}
.ease-in {
transition-timing-function: ease-in;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in-out {
transition-timing-function: ease-in-out;
}
评论
发表评论