▼CSS3でアニメーション -

CSS3を使ったアニメーションのバナーを作成。

まず、Photoshopで素材を作ります。

わたしはこんな感じのを作りました。

※文字をくりぬき、または画像の一部を切り抜いてすけるようにします。このとき、pngで保存を忘れずに！！

f:id:ishuko:20140821203123p:plain

これは文字と香水の液の部分をくりぬき。

①背景色が変わる

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS３アニメーション　背景色が変わる</title>
<style>
#box {
width: 300px;
height: 300px;
background: #F60;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;/* firefox chrome */
-moz-: bg-color 10s infinite;/* 古いサファリ */
-ms-: bg-color 10s infinite;/* 古いIE */
-o-: bg-color 10s infinite;/* ふるいおぺら */
}

@keyframes bg-color {
0% { background: #F60;}
25% { background: #FF3;}
50% { background: #33F;}
75% { background: #F39;}
100% { background: #F60;}
}

@-webkit-keyframes bg-color {
0% { background: #F60;}
25% { background: #FF3;}
50% { background: #33F;}
75% { background: #F39;}
100% { background: #F60;}
}

</style>
</head>

<body>

</div>
</body>
</html>

②画像の周りが光る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>CSS3アニメーション　光る</title>
<style>

@charset "utf-8";
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style: none; /* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background: #000;
}

#banner {
width: 500px;
height: 200px;
background: #000;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;/* firefox chrome */
-moz-: bg-color 10s infinite;/* 古いサファリ */
-ms-: bg-color 10s infinite;/* 古いIE */
-o-: bg-color 10s infinite;/* ふるいおぺら */

/* 上下左右真ん中にpositionで設定 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

animation: shining 3s infinite;
-webkit-animation: shining 3s infinite;
}

/* 10pxをまわりにつければ、間が開いてそこが光る！！ */

@-webkit-keyframes shining {

0% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
50% { box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
100% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
} /* chrome/safari */

@keyframes shining {

0% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
50% { box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
100% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
} /* IE/firefox */

</style>
</head>

<body>

</body>
</html>

③画像を回転させる

もう一枚画像を用意

今回はこちらを作成。↓

f:id:ishuko:20140821202857g:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>CSS３アニメーション　回転</title>
<style>

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background: #000;
}

/* 2枚目の写真を1枚目の写真に重ねる */

ul li {
width: 500px;
position: absolute;
left: 50%;
margin-left: -250px;
transform-style: preserve-3d; /* 3Dアニメーションを有効にする */
-webkit-transform-style: preseved-3d;
-moz--transform-style: preseved-3d;

backface-visibility: hidden; /* 回転した画像の裏側が見えるかどうかの設定 */
-webkit-backface-visibility: hidden;
-moz--backface-visibility: hidden;
}

#front {
animation: flipFront 5s infinite alternate; /* [alternate]はアニメーションが一回再生したら逆再生なる */
-webkit-animation: flipFront 5s infinite alternate;
-moz-animation: flipFront 5s infinite alternate;
}
#back {
animation: flipBack 5s infinite alternate; /* [alternate]はアニメーションが一回再生したら逆再生なる */
-webkit-animation: flipBack 5s infinite alternate;
-moz-animation: flipBack 5s infinite alternate;
}
@-webkit-keyframes flipFront {
0% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);/* -webkitはなくても動くchromeは自動更新で新しくなるから、わざわざつけなくてもおｋ */
}
45% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);
}
55% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}

}

@-webkit-keyframes flipBack {
0% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
45% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
55% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
}
100% { transform::rotateY(0deg); -webkit-transform: rotateY(0deg);
}

}

/* firefoxでもおｋ！！ */

@keyframes flipFront {
0% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);
}
45% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);
}
55% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}

}

@keyframes flipBack {
0% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
45% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
55% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
}
100% { transform::rotateY(0deg); -webkit-transform: rotateY(0deg);
}

}

</style>
</head>

</body>
</html>

▼全部合わせたのものを作成

http://shk.chips.jp/portfolio/css3/index-all.html