横に動きながら小さく逆さまになって戻るアニメーションサンプルです。
<div class="cp_keyframes"></div>.cp_keyframes {
margin: 60px auto;
color: #ffffff;
background: #29b6f6;
border-radius: 6px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
-webkit-animation: keyframes 3s 0.5s infinite alternate;
animation: keyframes 3s 0.5s infinite alternate;
}
@-webkit-keyframes keyframes {
0% {
-webkit-transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
}
50% {
-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
}
100% {
-webkit-transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
}
}
@keyframes keyframes {
0% {
-webkit-transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
}
50% {
-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
}
100% {
-webkit-transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info