今回のお題は,
サンプル1 CSS3: Smooth Pulse
水平に並べた要素に静的なスタイルを割り当てる
アニメーションを加える前の,border-radius
プロパティの値を50%にして,<a>
要素class
属性"circle")
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
コード1 並べた要素に割り当てた静的なスタイル
<body>要素
<div id="container">
<a href="#" class="circle"></a>
<a href="#" class="circle"></a>
<a href="#" class="circle"></a>
<a href="#" class="circle"></a>
</div>
<style>要素
html {
background: #333;
}
#container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -160px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
float: left;
}
.circle:nth-child(n+2) {
margin-left: 80px;
}
.circle:nth-child(1) {
background: #33ffff;
}
.circle:nth-child(2) {
background: #33ddff;
}
.circle:nth-child(3) {
background: #33bbff;
}
.circle:nth-child(4) {
background: #3399ff;
}
並べた要素に弾けるようなアニメーションを加える
円形の<a>
要素class
属性"circle")background
)delay
は要素によって変えるアニメーション開始の時間差だ。あとは,
@keyframes
規則の構成は大枠として,box-shadow
プロパティ)animation
プロパティ)
.circle:nth-child(n) {
animation: pulse_n 2s delay ease-out infinite;
}
@keyframes pulse_n {
0% {
box-shadow: 0 0 8px 6px rgba(red, green, blue, 0),
0 0 0px 0px #333,
0 0 0px 0px rgba(red, green, blue, 0);
}
10% {
box-shadow: 0 0 8px 6px rgba(red, green, blue, 1),
0 0 12px 10px #333,
0 0 12px 14px rgba(red, green, blue, 1);
}
100% {
box-shadow: 0 0 8px 6px rgba(red, green, blue, 0),
0 0 0px 40px #333,
0 0 0px 40px rgba(red, green, blue, 0);
}
}
コード2 要素を順に弾けるようにアニメーションさせる
html {
background: #333;
}
#container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -160px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
float: left;
}
.circle:nth-child(n+2) {
margin-left: 80px;
}
.circle:nth-child(1) {
background: #33ffff;
animation: pulse_1 2s 0s ease-out infinite;
}
@keyframes pulse_1 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0),
0 0 0px 0px #333,
0 0 0px 0px rgba(26, 255, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 1),
0 0 12px 10px #333,
0 0 12px 14px rgba(26, 255, 255, 1);
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0),
0 0 0px 40px #333,
0 0 0px 40px rgba(26, 255, 255, 0);
}
}
.circle:nth-child(2) {
background: #33ddff;
animation: pulse_2 2s 0.25s ease-out infinite;
}
@keyframes pulse_2 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0),
0 0 0px 0px #333,
0 0 0px 0px rgba(26, 217, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 1),
0 0 12px 10px #333,
0 0 12px 14px rgba(26, 217, 255, 1);
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0),
0 0 0px 40px #333,
0 0 0px 40px rgba(26, 217, 255, 0);
}
}
.circle:nth-child(3) {
background: #33bbff;
animation: pulse_3 2s 0.5s ease-out infinite;
}
@keyframes pulse_3 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0),
0 0 0px 0px #333,
0 0 0px 0px rgba(26, 179, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 1),
0 0 12px 10px #333,
0 0 12px 14px rgba(26, 179, 255, 1);
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0),
0 0 0px 40px #333,
0 0 0px 40px rgba(26, 179, 255, 0);
}
}
.circle:nth-child(4) {
background: #3399ff;
animation: pulse_4 2s 0.75s ease-out infinite;
}
@keyframes pulse_4 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0),
0 0 0px 0px #333,
0 0 0px 0px rgba(26, 140, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 1),
0 0 12px 10px #333,
0 0 12px 14px rgba(26, 140, 255, 1);
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0),
0 0 0px 40px #333,
0 0 0px 40px rgba(26, 140, 255, 0);
}
}