スマホ最適化サイト
リストのふわふわした表示
@-webkit-keyframes ticker { /* 1行目 */ 0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } 10% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 32% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } /* 2行目 */ 33% { opacity: 0; -webkit-transform: translateY(-16px); transform: translateY(0); } 43% { opacity: 1; -webkit-transform: translateY(-16px); transform: translateY(0); } 53% { opacity: 1; -webkit-transform: translateY(-16px); transform: translateY(0); } 65% { opacity: 0; -webkit-transform: translateY(-16px); transform: translateY(0); } /* 3行目 */ 66% { opacity: 0; -webkit-transform: translateY(-32px); transform: translateY(-32px); } 76% { opacity: 1; -webkit-transform: translateY(-32px); transform: translateY(-32px); } 86% { opacity: 1;-webkit-transform: translateY(-32px); transform: translateY(-32px); } 100% { opacity: 0; -webkit-transform: translateY(-32px); transform: translateY(-32px); } }
イメージのくるりんぱ
@-webkit-keyframes flipFront { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 45% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 55% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flipBack { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 45% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 55% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } .anim-flip-front { -webkit-animation: flipFront 5s infinite alternate; } .anim-flip-back { -webkit-animation: flipBack 5s infinite alternate; }