You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.6 KiB
72 lines
1.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>transition</title>
|
|
<style>
|
|
a[class*="link"] {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link {
|
|
background-color: lightgreen;
|
|
color: #fff;
|
|
margin: 100px;
|
|
padding: 5px 10px;
|
|
transition-property: all;
|
|
transition-duration: 0.5s;
|
|
transition-delay: 1s;
|
|
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
}
|
|
|
|
.link:hover {
|
|
background-color: green;
|
|
}
|
|
|
|
.rotate {
|
|
width: 100px;
|
|
height: 80px;
|
|
background-color: red;
|
|
transition: width 1s, transform 1s ease-out;
|
|
}
|
|
|
|
.rotate:hover {
|
|
width: 150px;
|
|
transform: rotate(360deg);
|
|
}
|
|
</style>
|
|
<!--
|
|
notes :
|
|
|
|
transiton,
|
|
transition-delay,
|
|
transition-duration,
|
|
transition-property,
|
|
transiton-timing-function,
|
|
|
|
transition-timing-functions:
|
|
linear
|
|
ease
|
|
ease-in
|
|
ease-in-out
|
|
ease-out
|
|
steps(6,end)-jumpend jumpstart jumpnone
|
|
cubic-bezier()
|
|
|
|
shorthand:
|
|
transition: transition-property transition-duration transition-timing-function trasition-delay;
|
|
|
|
aminatable css properties :
|
|
there is a list in developers.mozila.com
|
|
|
|
-->
|
|
</head>
|
|
|
|
<body>
|
|
<a href="#" class="link">link</a>
|
|
<div class="rotate"></div>
|
|
</body>
|
|
|
|
</html> |