cssアニメーションはローディングはもちろんのこと、背景全体のグラデーションを変えたりポイントを目立たせたりと、アイディア次第でいろんなところで使えます。
今回はローディングだけじゃない、cssアニメーションを使ったサンプルをご紹介します。
<div class="cp_anime08"></div>.cp_anime08 {
line-height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
cursor: pointer;
-webkit-animation: anime08_pulse 1.5s infinite;
animation: anime08_pulse 1.5s infinite;
text-align: center;
color: #ffffff;
border-radius: 50%;
background: #e91e63;
-webkit-box-shadow: 0 0 0 0 rgba(233,30,99 ,0.5);
box-shadow: 0 0 0 0 rgba(233,30,99 ,0.5);
}
.cp_anime08:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes anime08_pulse {
0% { -webkit-transform: scale(0.8);
transform: scale(0.8); }
70% { -webkit-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 0 0 50px rgba(233,30,99, 0);
box-shadow: 0 0 0 50px rgba(233,30,99, 0); }
100% { -webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-box-shadow: 0 0 0 0 rgba(233,30,99, 0);
box-shadow: 0 0 0 0 rgba(233,30,99, 0); }
}
@keyframes anime08_pulse {
0% { -webkit-transform: scale(0.8);
transform: scale(0.8); }
70% { -webkit-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 0 0 50px rgba(233,30,99, 0);
box-shadow: 0 0 0 50px rgba(233,30,99, 0); }
100% { -webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-box-shadow: 0 0 0 0 rgba(233,30,99, 0);
box-shadow: 0 0 0 0 rgba(233,30,99, 0); }
}<div class="cp_anime09">
<div class="cp_center"></div>
<div class="cp_explosion"></div>
</div>.cp_anime09 {
line-height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
}
.cp_anime09 .cp_center,
.cp_anime09 .cp_explosion {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
}
.cp_anime09 .cp_center {
-webkit-animation: anime09_pulse 1.5s infinite;
animation: anime09_pulse 1.5s infinite;
opacity: 0.8;
background: rgba(103,58,183 ,1);
}
.cp_anime09 .cp_explosion {
-webkit-animation: anime09_pulseradius 1.5s infinite;
animation: anime09_pulseradius 1.5s infinite;
background: rgba(103,58,183 ,0.5);
}
@-webkit-keyframes anime09_pulse {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.8; }
50% { -webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 1.0; }
70% { -webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; }
}
@keyframes anime09_pulse {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.8; }
50% { -webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 1.0; }
70% { -webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; }
}
@-webkit-keyframes anime09_pulseradius {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 1; }
40% { -webkit-transform: scale(7.8);
transform: scale(7.8);
opacity: 0.1; }
80% { -webkit-transform: scale(4.8);
transform: scale(4.8);
opacity: 0; }
100% { -webkit-transform: scale(1);
transform: scale(1);
opacity: 0; }
}
@keyframes anime09_pulseradius {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 1; }
40% { -webkit-transform: scale(7.8);
transform: scale(7.8);
opacity: 0.1; }
80% { -webkit-transform: scale(4.8);
transform: scale(4.8);
opacity: 0; }
100% { -webkit-transform: scale(1);
transform: scale(1);
opacity: 0; }
}<div class="cp_anime10">
<div class="cp_spinner cp_heart"></div>
</div>
.cp_anime10 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_anime10 .cp_spinner {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 48px;
height: 40px;
}
.cp_anime10 .cp_heart {
-webkit-animation: anime10_heart 2s ease-in-out infinite;
animation: anime10_heart 2s ease-in-out infinite;
}
.cp_anime10 .cp_heart:before,
.cp_anime10 .cp_heart:after {
position: absolute;
top: 0;
display: inline-block;
width: 24px;
height: 35px;
content: ' ';
border-radius: 12px 12px 0 0;
}
.cp_anime10 .cp_heart:before {
left: 8px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-image: -webkit-linear-gradient(254deg, #f093fb 0%, #f5576c 90%);
background-image: linear-gradient(-164deg, #f093fb 0%, #f5576c 90%);
}
.cp_anime10 .cp_heart:after {
right: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
@-webkit-keyframes anime10_heart {
0% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
15% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
30% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
45% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
100%,
60% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
}
@keyframes anime10_heart {
0% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
15% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
30% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
45% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
100%,
60% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
}<div class="cp_anime11">
<div class="cp_pin"></div>
<div class="cp_pulse"></div>
</div>
.cp_anime11 {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 50px;
margin: -25px 0 0 -12px;
}
.cp_anime11 .cp_pin {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -20px 0 0 -20px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: anime11_bounce 1s;
animation: anime11_bounce 1s;
border-radius: 50% 50% 50% 0;
background: #64B5F6;
}
.cp_anime11 .cp_pin:after {
position: absolute;
left: 50%;
right: 50%;
width: 14px;
height: 14px;
margin: 8px 0 0 -7px;
content: '';
border-radius: 50%;
background: #1565C0;
}
.cp_anime11 .cp_pulse {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: 11px 0px 0px -12px;
-webkit-transform: rotateX(55deg);
transform: rotateX(55deg);
border-radius: 50%;
background: rgba(233,30,99 ,0.7);
}
.cp_anime11 .cp_pulse:after {
position: absolute;
width: 40px;
height: 40px;
margin: -13px 0 0 -19px;
content: '';
-webkit-animation: anime11_pulsate 1s ease-out infinite 1.1s;
animation: anime11_pulsate 1s ease-out infinite 1.1s;
opacity: 0;
border-radius: 50%;
-webkit-box-shadow: 0 0 1px 2px rgba(236,64,122 ,0.3);
box-shadow: 0 0 1px 2px rgba(236,64,122 ,0.3);
}
@-webkit-keyframes anime11_pulsate {
0% { -webkit-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0; }
50% { opacity: 1; }
100% { -webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0; }
}
@keyframes anime11_pulsate {
0% { -webkit-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0; }
50% { opacity: 1; }
100% { -webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0; }
}
@-webkit-keyframes anime11_bounce {
0% { -webkit-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
opacity: 0; }
60% { -webkit-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
opacity: 1; }
80% { -webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg); }
100% { -webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg); }
}
@keyframes anime11_bounce {
0% { -webkit-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
opacity: 0; }
60% { -webkit-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
opacity: 1; }
80% { -webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg); }
100% { -webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg); }
}<div class="cp_anime12">
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
</div>
.cp_anime12 {
line-height: 19px;
position: absolute;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_anime12 .cp_circle {
position: absolute;
width: 10px;
height: 10px;
-webkit-animation: anime12_color 2s linear infinite;
animation: anime12_color 2s linear infinite;
border-radius: 10px;
background-color: #3fc380;
}
.cp_anime12 .cp_circle:nth-child(1) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.cp_anime12 .cp_circle:nth-child(2) {
-webkit-transform: translate(18px, 13px);
transform: translate(18px, 13px);
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.cp_anime12 .cp_circle:nth-child(3) {
-webkit-transform: translate(35px, 25px);
transform: translate(35px, 25px);
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.cp_anime12 .cp_circle:nth-child(4) {
-webkit-transform: translate(18px, 38px);
transform: translate(18px, 38px);
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.cp_anime12 .cp_circle:nth-child(5) {
-webkit-transform: translate(0px, 50px);
transform: translate(0px, 50px);
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.cp_anime12 .cp_circle:nth-child(6) {
-webkit-transform: translate(0, 25px);
transform: translate(0, 25px);
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.cp_anime12 .cp_circle:nth-child(7) {
-webkit-transform: translate(-20px, 25px);
transform: translate(-20px, 25px);
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.cp_anime12 .cp_circle:nth-child(8) {
-webkit-transform: translate(-40px, 25px);
transform: translate(-40px, 25px);
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.cp_anime12 .cp_circle:nth-child(9) {
-webkit-transform: translate(-60px, 25px);
transform: translate(-60px, 25px);
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.cp_anime12 .cp_circle:nth-child(10) {
-webkit-transform: translate(-80px, 25px);
transform: translate(-80px, 25px);
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
@-webkit-keyframes anime12_color {
0%,100% { background-color: #3fc380; }
50% { background-color: #ffffff; }
}
@keyframes anime12_color {
0%,100% { background-color: #3fc380; }
50% { background-color: #ffffff; }
}<div class="cp_anime13">
<div class="cp_first"></div>
<div class="cp_second"></div>
<div class="cp_second"></div>
<div class="cp_third"></div>
</div>.cp_anime13 {
position: relative;
z-index: 1;
}
.cp_anime13,
.cp_anime13 .cp_first,
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
width: 100%;
height: 100vh;
}
.cp_anime13 .cp_first,
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
position: absolute;
}
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
opacity: 0;
}
.cp_anime13 .cp_first {
z-index: 10;
animation: anime13_first 10s infinite;
background: linear-gradient(#e6ee9c, #a5d6a7);
}
@-webkit-keyframes anime13_first {
0% { opacity: 1.0; }
10% { opacity: 0.8; }
20% { opacity: 0.6; }
30% { opacity: 0.4; }
40% { opacity: 0.2; }
50% { opacity: 0.1; }
60% { opacity: 0.2; }
70% { opacity: 0.4; }
80% { opacity: 0.6; }
90% { opacity: 0.8; }
100% { opacity: 1.0; }
}
@keyframes anime13_first {
0% { opacity: 1.0; }
10% { opacity: 0.8; }
20% { opacity: 0.6; }
30% { opacity: 0.4; }
40% { opacity: 0.2; }
50% { opacity: 0.1; }
60% { opacity: 0.2; }
70% { opacity: 0.4; }
80% { opacity: 0.6; }
90% { opacity: 0.8; }
100% { opacity: 1.0; }
}
.cp_anime13 .cp_second {
z-index: 20;
animation: anime13_second 10s infinite; animation-delay: 2s;
background: linear-gradient(#80deea, #90caf9);
}
@-webkit-keyframes anime13_second {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}
@keyframes anime13_second {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}
.cp_anime13 .cp_third {
z-index: 30;
animation: anime13_third 10s infinite;
animation-delay: 8s;
background: linear-gradient(#b39ddb, #f48fb1);
}
@-webkit-keyframes anime13_third {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}
@keyframes anime13_third {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}<div class="cp_cont">
<div class="cp_anime14">
<div class="text1">En duva satt pa en gren och funderade pa tillvaron</div>
<div class="text2">directed by</div>
<div class="text3">Roy Andersson</div>
<div class="text2">Produce by</div>
<div class="text3">Pernilla Sandstrom</div>
<div class="text2">・<br />・<br />・</div>
</div>
</div>.cp_cont {
text-align: center;
overflow: hidden;
position: relative;
margin: 2em auto;
width: 100%;
height: 340px;
background:#eeeeee;
}
.cp_anime14 {
position: relative;
top: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-animation: anime14_text 60s linear infinite;
animation: anime14_text 60s linear infinite;
text-align: center;
color: #616161;
}
.cp_anime14 .text1 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 50px;
}
.cp_anime14 .text2 {
font-size: 1em;
margin-bottom: 5px;
}
.cp_anime14 .text3 {
font-size: 1.4em;
margin-bottom: 50px;
}
@-webkit-keyframes anime14_text {
0% { top: 100%; }
100% { top: -200%; }
}
@keyframes anime14_text {
0% { top: 100%; }
100% { top: -200%; }
}I Love
<div class="cp_anime15">
<p>I Love</p>
<div class="scroller">
<div class="inner">
<span>Animal</span>
<span>Cat</span>
<span>Dog</span>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');
.cp_anime15 {
font-family: 'Alfa Slab One', cursive;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: left;
}
.cp_anime15 p {
float: left;
color: #222222;
}
.cp_anime15 .scroller {
line-height: 1.5em;
float: left;
overflow: hidden;
height: 1.5em;
margin: 1em 0 0 7px;
}
.cp_anime15 .scroller span {
display: block;
color: #222222;
}
.cp_anime15 .scroller .inner {
-webkit-animation: anime15_scroll 5s infinite ease-out;
animation: anime15_scroll 5s infinite ease-out;
}
.cp_anime15 .scroller .inner::after {
position: absolute;
top: 1em;
left: 8em;
content: '65';
color: #b10d0d;
}
@-webkit-keyframes anime15_scroll {
15% { margin-top: 0px; }
30% { margin-top: 0px; }
45% { margin-top: -1.5em; }
60% { margin-top: -1.5em; }
75% { margin-top: -3em; }
90% { margin-top: -3em; }
100% { margin-top: 0px; }
}
@keyframes anime15_scroll {
15% { margin-top: 0px; }
30% { margin-top: 0px; }
45% { margin-top: -1.5em; }
60% { margin-top: -1.5em; }
75% { margin-top: -3em; }
90% { margin-top: -3em; }
100% { margin-top: 0px; }
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info