2020/CSS
CSS Transition
꽃꽂이하는개발자
2020. 2. 16. 18:33
반응형
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
transition
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
developer.mozilla.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transitions</title>
<style>
.box{
background-color: green;
/*color:white;
transition:all을 하면 위의 bgcolor와 color 둘다 효과가 적용됨.
하나만 하고 싶으면 color 이렇게 하나만 적어주면 됩니다
범위 시간 효과;*/
transition:all .5s ease-in-out;
}
/*state중에서 hover, focus,active에만 적용됩니다. */
.box:hover{
background-color: red;
color:blue;
}
</style>
</head>
<body>
<span class="box">
Text
</span>
</body>
</html>출처: nomadcoder
반응형