今回のお題は,animation
プロパティで細かい動きをつくり込んでいる。
サンプル1 CSS3CSS3: Button Spinner
ボタンをつくる要素と静的なスタイル
HTMLドキュメントの<body>
要素に加えるボタンをつくる要素の記述と,<script>
要素に-prefix-freeを読み込んで,
コード1 ボタンをつくる<body>と<head>要素のCSSの定め
<body>要素
<div class="container">
<div class="circle">
<div class="spinner">
</div>
<div class="label">
<p>Button</p>
</div>
</div>
</div>
<head>要素
<link href="https://fonts.googleapis.com/css?family=Raleway:400,900" rel="stylesheet">
<style>
html {
background-color: steelblue;
}
.container {
margin: 150px auto;
text-align: center;
background-color: steelblue;
}
.circle {
background-color: black;
width: 200px;
height: 200px;
border-radius: 50%;
display: inline-block;
overflow: hidden;
cursor: pointer;
}
.spinner {
background-color: #efefef;
height: 50px;
margin-top: 75px;
}
.label {
background-color: cornflowerblue;
height: 190px;
width: 190px;
position: relative;
margin: -120px auto;
border-radius: 50%;
}
.label p {
text-align: center;
margin: 40% auto;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-weight: 900;
font-size: 24pt;
}
</style>
<script src="lib/prefixfree.min.js"></script>
ボタンにマウスポインタが重なったときのアニメーション
ボタンにマウスポインタが重なったときの基本的なアニメーションを加えよう。ボタンの縁として見える大もとの要素class
属性"circle"):hover
擬似クラスで白に変える。内側class
属性"label")transition
プロパティで定めている。ボタンの縁には待ち時間を加えたので,
transition: アニメーション時間 タイミング関数 待ち時間
.circle {
background-color: steelblue /* black */;
transition: 1s ease-in-out;
}
.circle:hover .label {
background-color: ;
transition: 0.3s ease-in-out;
}
.circle:hover .label p {
color: white;
transition: 0.3s ease-in-out;
}
.circle:hover {
background-color: white;
transition: 1s ease-in-out 0.8s;
}
.label {
transition: 0.3s ease-in-out;
}
.label p {
transition: 0.3s ease-in-out;
}
これで,
コード2 ボタンにマウスポインタを重ねたときのアニメーションの定め
html {
background-color: steelblue;
}
.container {
margin: 150px auto;
text-align: center;
background-color: steelblue;
}
.circle {
background-color: steelblue;
width: 200px;
height: 200px;
border-radius: 50%;
display: inline-block;
overflow: hidden;
cursor: pointer;
transition: 1s ease-in-out;
}
.spinner {
background-color: #efefef;
height: 50px;
margin-top: 75px;
}
.circle:hover .label {
background-color: lightsteelblue;
transition: 0.3s ease-in-out;
}
.circle:hover .label p {
color: white;
transition: 0.3s ease-in-out;
}
.circle:hover {
background-color: white;
transition: 1s ease-in-out 0.8s;
}
.label {
background-color: cornflowerblue;
height: 190px;
width: 190px;
position: relative;
margin: -120px auto;
border-radius: 50%;
transition: 0.3s ease-in-out;
}
.label p {
text-align: center;
margin: 40% auto;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-weight: 900;
font-size: 24pt;
transition: 0.3s ease-in-out;
}