/*
transition: A ---> B로 변환되는 중간 과정을 부드럽게 연결하는 css 효과
transition-property
transition-duration
transition-timing-function: linear, ease, ease-in, ease-out, ease-in-out
transition-delay
transform: width, height 이외이 변형 요건에 해당하는 css 효과
*/
<!doctype html>
<html>
<head>
<title>css</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,italic,400italic,600,600italic,700,700italic,800,800italic">
<!-- css 소스 분리 방식-->
<!--<link href="style.css" rel="stylesheet" type="text/css">-->
<!-- css 소스 삽입 방식-->
<style>
/*
transition: A ---> B로 변환되는 중간 과정을 부드럽게 연결하는 css 효과
transition-property
transition-duration
transition-timing-function: linear, ease, ease-in, ease-out, ease-in-out
transition-delay
transform: width, height 이외이 변형 요건에 해당하는 css 효과
*/
body{
margin: 20px;
padding: 20px;
line-height: 1;
font-family: 'Open Sans', 'sans-serif';
font-size: 1em;
background-color: #555;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
margin-top: 60px;
}
li:first-child{
margin-top: 0;
}
.title{
margin: 0;
padding: 0;
font-size: 1.5em;
font-weight: 300;
}
.container{
margin-top: 35px;
}
.example div{
padding: 20px;
width: 200px;
height: 50px;
line-height: 24px;
font-size: 0.875em;
background-color: #8ac007;
color: #fff;
}
.example .transition1{
transition: width 2s; /* A > B*/
}
.example .transition1:hover {
width: 300px;
}
.example .transition2{
transition: width 2s, height 4s; /* A > B*/
}
.example .transition2:hover {
width: 300px;
height: 200px;
}
.example .speed_curve{
transition: width 2s;
}
.example .linear{
transition-timing-function: linear;
}
.example .ease{
transition-timing-function: ease;
}
.example .ease_in{
transition-timing-function: ease-in;
}
.example .ease_out{
transition-timing-function: ease-out;
}
.example .ease_in_out{
transition-timing-function: ease-in-out;
}
.example .speed_curve:hover{
width 300px;
}
/*
.example:hover .speed_curve{
width 300px;
}
*/
.example .delay{
transition: width 3s;
transition-delay: 1s;
}
.example .delay:hover{
width: 300px;
}
.example .transform_transition{
transition: transform 2s;
}
.example .transform_transition:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1 class="title">css transition</h1>
<div class="container">
<ul class="example">
<li><div class="transition1">transition: width 2s;</div></li>
<li><div class="transition2">transition: width 2s, height 4s;</div></li>
<li><div class="linear speed_curve">transition-timing-function: linear;</div></li>
<li><div class="ease speed_curve">transition-timing-function: ease;</div></li>
<li><div class="ease_in speed_curve">transition-timing-function: ease_in;</div></li>
<li><div class="ease_out speed_curve">transition-timing-function: ease_out;</div></li>
<li><div class="delay">transition-delay: 1s;</div></li>
<li><div class="transform_transition">transition: transform 2s;</div></li>
</ul>
</div>
</body>
</html>
'프로그램 개발(분석, 설계, 코딩, 배포) > 2.1.2 web_css' 카테고리의 다른 글
| 코드 단편_코드 설명 (0) | 2023.01.27 |
|---|---|
| 정의 목록 디자인 (0) | 2023.01.27 |
| web_css_class 사용법 (0) | 2023.01.08 |
| web_css_div ul box-shadow text-shadow (0) | 2023.01.07 |
| web_css_예제1 (0) | 2023.01.05 |
