borderAnime
#borderAnime { position: relative; width: 200px; height: 150px; line-height: 150px; overflow: hidden; text-align: center; margin: 50px auto; } #borderAnime p { display: block; color: black; margin: 0; } /* 線(ボーダー)のスタイル 共通 */ #borderAnime:before, #borderAnime:after, #borderAnime p:before, #borderAnime p:after { content: ''; position: absolute; background: #000; /*線の色*/ } /* 下のボーダー */ #borderAnime:before { bottom: 0; left: -200px; width: 200px; height: 1px; } /* 右のボーダー */ #borderAnime:after { bottom: -150px; right: 0; width: 1px; height: 150px; } /* 上のボーダー */ #borderAnime p:before { top: 0; right: -200px; width: 200px; height: 1px; } /* 左のボーダー */ #borderAnime p:after { top: -150px; left: 0; width: 1px; height: 150px; } /* ホバー時のアニメーション指定 */ #borderAnime:hover:before { animation: leftAnim 1.5s linear 0s infinite; } #borderAnime:hover:after { animation: bottomAnim 1.5s linear .75s infinite; } #borderAnime p:hover:before { animation: rightAnim 1.5s linear 0s infinite; } #borderAnime p:hover:after { animation: topAnim 1.5s linear .75s infinite; } /* 各アニメーション */ @keyframes topAnim { 0% {top:-150px;} 100% {top:150px;} } @keyframes bottomAnim { 0% {bottom:-150px;} 100% {bottom:150px;} } @keyframes rightAnim { 0% {right:-200px;} 100% {right:200px;} } @keyframes leftAnim { 0% {left:-200px;} 100% {left:200px;} }