<div id="rotate-words"> <div>百万石 BtoB WEB受注システム<br><span>BtoB EC</span></div> <div>既存システムの変更不要で即行稼動!<br><span>チャンスロス無し</span></div> <div>多数の受注オペレーター不要<br><span>大幅コスト削減</span></div> <div>スマートフォン、iPad等の端末から発注可能<br><span>顧客満足度アップ</span></div> <div>百万石 BtoB WEB受注システム<br><span>BtoB EC</span></div> <div>既存システムの変更不要で即行稼動!<br><span>チャンスロス無し</span></div> <div>多数の受注オペレーター不要<br><span>大幅コスト削減</span></div> <div>スマートフォン、iPad等の端末から発注可能<br><span>顧客満足度アップ</span></div> </div>
#rotate-words { width:100%; max-width:500px; margin:auto; padding:20% 0; font-size:2.2em; } #rotate-words span { display:block; height:50px; font-size:.7em; } #rotate-words div { position:absolute; opacity:0; overflow:hidden; left:10vw; width:80vw; line-height:1.2em; animation: rotate-word 32s linear infinite 0s; } @keyframes rotate-word { 0% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)} 3% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(.9)} 12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)} 16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)} 80% { opacity: 0} 100% { opacity: 0} } #rotate-words div:nth-child(2) { animation-delay: 4s} #rotate-words div:nth-child(3) { animation-delay: 8s} #rotate-words div:nth-child(4) { animation-delay: 12s} #rotate-words div:nth-child(5) { animation-delay: 16s} #rotate-words div:nth-child(6) { animation-delay: 20s} #rotate-words div:nth-child(7) { animation-delay: 24s} #rotate-words div:nth-child(8) { animation-delay: 28s} @keyframes author { 0% { opacity: 0; transform: translateY(100px);filter:blur(10px);transform: scaleY(2)} 20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)} 30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)} 90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)} 100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)} }