ころころ の動きは、3つに分かれます。
korokoro3種類公式
左右に95%ずつ、玉が転がるように回りながら往復し続ける。
@keyframes onoma-korokoro {
0% { transform: translate(-95%, 0%) rotate(0deg); }
100% { transform: translate(95%, 0%) rotate(217.72deg); }
}
.onoma-korokoro {
animation: onoma-korokoro 0.9s ease-in-out infinite alternate both;
}
/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
.onoma-korokoro { animation: none; }
}その場で1回転し、それを繰り返す。
@keyframes onoma-korokoro-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.onoma-korokoro-spin {
animation: onoma-korokoro-spin 1.1s cubic-bezier(.45,0,.55,1) infinite both;
}
/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
.onoma-korokoro-spin { animation: none; }
}左170%から転がってきて、ゆっくり止まる。
@keyframes onoma-korokoro-in {
0% { transform: translate(-170%, 0%) rotate(-194.81deg); }
100% { transform: translate(0%, 0%) rotate(0deg); }
}
.onoma-korokoro-in {
animation: onoma-korokoro-in 0.8s cubic-bezier(.2,.7,.3,1) both;
}
/* 動きを減らす設定の人には、現れるだけ */
@keyframes onoma-korokoro-in-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.onoma-korokoro-in { animation: onoma-korokoro-in-fade 0.2s ease-out both; }
}