<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
margin:20px
}
#box1{
width:100px;
height:100px;
background:gray;
/*변화되는 시간을 늘려보자..*/
transition:width 1s;
}
#box1:hover{
width:300px;
}
#box2{
width:100px;
height:100px;
background:#ffffff;
border:1px solid #4e9c9c;
transition:background-color 1s;
}
#box2:hover{
background:#4e9c9c;
}
#box3{
width:100px;
height:100px;
border:3px solid #4e9c9c;
transition:border 1s;
}
#box3:hover{
border:10px solid #4e9c9c;
}
#box4{
width:100px;
height:100px;
background-image:linear-gradient(to right, yellow, red )
transition:background-image 2s;
}
#box4:hover{
background-image:linear-gradient(to left, orange, yellow )
}
</style>
</head>
<body>
<pre>
<h3>CSS3부터 프로그래밍에 의존하지
않고도 간단한 애니메이션을 구현할 수 있다.
</h3>
</pre>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
</html>