Skip to content

Instantly share code, notes, and snippets.

@katsumitakano

katsumitakano/index.html

Last active August 29, 2015 13:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save katsumitakano/9019655 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save katsumitakano/9019655 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Transition Sample
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アニメーションのサンプル</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box bgcolor">bgcolor</div>
<div class="box double">double</div>
<div class="box move">move</div>
<div class="box complex">complex</div>
</body>
</html>
Raw
style.css
.box {
margin: 30px;
width: 80px;
height: 80px;
background: #666;
color: white;
}
.bgcolor {
transition: background 0.5s ease 0s;
}
.bgcolor:hover {
background: red;
}
.double {
transition: background 0.5s ease 0s, width 0.5s ease 0s;
}
.double:hover {
background: red;
width: 200px;
}
.move {
transition: -webkit-transform 1s ease-out 0s;
}
.move:hover {
-webkit-transform: translate(100px, 0);
}
.complex {
transition: all 1s ease-out 0s;
}
.complex:hover {
-webkit-transform: scale(2) rotate(30deg) skew(30deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment