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