スマホ最適化サイト

リストのふわふわした表示

@-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;
}