CSS 애니 기초 질문
본문
CSS 애니메이션은 이번에 처음 들여다 보게 됩니다. 아래 코드로 짰을때 마우스 갖다 댔을때 shine 효과가 납니다. 이거를 그냥 3s 간격으로 무한히 shine이 돌아가게 하려면 어떻게 해야 하죠? before, after 먹이고 infinite 를 해야 하는건지요. ㅠㅠ
html
<div class="logo"><span class="shine"></div>
CSS
.logo {
display: block;
width: 256px;
height: 256px;
background: url("http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png") 0 0 no-repeat;
}
.shine {
width: 256px;
height: 256px;
display: block;
background: url("http://i.imgur.com/n1CetrS.png") -256px 0 no-repeat;
-webkit-transition: background 0s linear;
-moz-transition: background 0s linear;
-ms-transition: background 0s linear;
-o-transition: background 0s linear;
}
.shine:hover {
background-position: 256px 0px;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease-out;
-ms-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
}
답변 2
.shine {
width: 256px;
height: 256px;
display: block;
background: url("http://i.imgur.com/n1CetrS.png") -256px 0 no-repeat;
animation-name: shining;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes shining {
0% {
background-position: -256px 0px;
}
100% {
background-position: 256px 0px;
}
}
.shine::before .shine::after 이렇게 주면 되는건가요