
スクロールを促すシンプルなループアニメーション
2015年11月18日CSSテクニック
ファーストビュー全体に広がる全画面ヘッダーなどを最初に表示する場合、下にまだコンテンツがある注意を促すことが出来る、シンプルなループアニメーションです。
HTML
<span id="mouse"></span>
CSS
#mouse, #mouse:before { position: absolute; left: 50%; } #mouse { top: 50%; width: 40px; height: 65px; margin-left: -20px; margin-top: -33px; box-sizing: border-box; border: 1px solid #52d3ff; border-radius: 25px; } #mouse:before { content: ''; top: 8px; width: 8px; height: 8px; background: #52d3ff; margin-left: -4px; border-radius: 4px; animation: scroll 1.5s infinite; -webkit-animation: scroll 1.5s infinite; -moz-animation: scroll 1.5s infinite; } @keyframes scroll { 0% { opacity: 1 } 100% { opacity: 0; transform: translateY(41px); } } @-webkit-keyframes scroll { 0% { opacity: 1 } 100% { opacity: 0; transform: translateY(41px); } } @-moz-keyframes scroll { 0% { opacity: 1 } 100% { opacity: 0; transform: translateY(41px); } }