<head>
<style>
a {
background-color: royalblue;
color: lightgray;
text-decoration: none;
padding: 5px;
border-radius: 5px;
font-size: 55px;
}
a:hover { state
background-color: lightgray;
color: royalblue;
}
</style>
</head>
<body>
<a href="#">Go to Website!</a>
</body>
But changing is so fast.
a {
background-color: royalblue;
color: lightgray;
text-decoration: none;
padding: 5px;
border-radius: 5px;
font-size: 55px;
transition: background-color 10sease-in-out; transition have to add element without state
}
The text changes immediately, the background color takes 10 seconds.
a {
background-color: royalblue;
color: lightgray;
text-decoration: none;
padding: 5px;
border-radius: 5px;
font-size: 55px;
transition: background-color 5s ease-in-out, color 5s ease-in-out; = all 5s ease-in-out
}
transition is going to look for hover.
Rule 1. If you want to change anything, you have to put the 'state' somthing.
Rule 2. The transition shouldn't be in the 'state'(should be in the root element).
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: animations 1 (0) | 2021.05.06 |
|---|---|
| KokoaTalk Clone Coding: transformations (0) | 2021.05.06 |
| KokoaTalk Clone Coding: colors and variables (0) | 2021.05.05 |
| KokoaTalk Clone Coding: pseudo selector (0) | 2021.05.05 |
| KokoaTalk Clone Coding: states 2 (0) | 2021.05.05 |
