1. 홈
  2. 질의 응답
  3. Css 애니메이션 무한 애니메이션 줄

Css 애니메이션 무한 애니메이션 줄

2016-10-12 9 views
3

이 작업을 css로 수행 할 수 있는지 확실하지 않으면, js를 사용하여 작업을 수행 할 방법을 찾아 보겠습니다. 끊임없이 반복되는 무한하고 부드러운 애니메이션을 만들고 싶습니다.Css 애니메이션 무한 애니메이션 줄

이 점선이 끊이지 않고 계속 흐릅니다.

[ICON] --->--->----> [ICON]

저는 여기에 CSS가별로 없습니다. 

.arrows { 
 
    position: absolute; 
 
    animation: arrows 2s infinite; 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes arrows { 
 
    0% { 
 
    left: 0px; 
 
    } 
 
    50% { 
 
    left: 5px; 
 
    } 
 
    80% { 
 
    left: 15px; 
 
    } 
 
    100% { 
 
    left: 0px; 
 
    } 
 
}
<div class="arrows">-->-->--></div>

나를 위해 문제는 애니메이션을 부드럽게 만들기 위해,하지만 자기 0px

감사

출처

2016-10-12 xhallix

+0

' -> -> -'같은 것이 있습니까? –

+0

hm @ Baldráni this는 유망한 것으로 보입니다 – xhallix

+2

''은 더 이상 사용되지 않으며 더 이상 사용되지 않아야합니다. - https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee –

답변

1 

.arrows { 
 
    position: absolute; 
 
    animation: arrows 1s infinite; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation: arrows 1s; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ 
 
} 
 
@keyframes arrows { 
 
    0% { 
 
    left: 10%; 
 
    } 
 
    100% { 
 
    left: 80%; 
 
    } 
 
}
<div class="arrows">-->-->--></div>

출처

2016-10-12 10:07:22 Dhaarani

+0

@ Baldráni가 이제 그것을 확인하십시오. – Dhaarani

+0

미안하지만, 내가 뭘 찾고있는 건 아니야. 무한하게 보이지 않게 만드는 시작으로 뛰어 오르는 걸 볼 수 있기 때문에. – xhallix

+0

@xhallix 지금 확인해보기. – Dhaarani

0
의 시작점에 팩을 점프없이 화살을 반복하게하지 않는 것입니다

발리 스 <marquee>가 충분합니까? 아니면 중단없이 전체 루프 효과를 찾으십니까? 그것이 사실이라면 나는 당신이 자바 스크립트없이 그것을 할 수 있다고 생각하지 않는다.

마키가 충분한 경우 여기에 예가 나와 있습니다.

<marquee BEHAVIOR="slide" DIRECTION="right" LOOP="2">->->-></marquee>

출처

2016-10-12 10:01:00

1

매우 좋지 않아,하지만 당신을 위해 유용 할 수 있습니다 :

.arrows-container 
 
{ 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 8ex; 
 
    background-color: #ddd; 
 
    height: 1em; 
 
} 
 
.arrows { 
 
    position: absolute; 
 
    animation: arrows 2s infinite linear; 
 
    width: 20ex; 
 
    left: -7ex; 
 
} 
 
@keyframes arrows { 
 
    0%{left: -7ex;} 
 
    50%{left: -4ex;} 
 
    100%{left: -1ex;} 
 
}
<div class="arrows-container"> 
 
    <div class="arrows">-->-->-->-->-->--></div> 
 
</div>

또한 속기 규칙 animation에 이미 지정했을 때 다시 지정할 필요가 없습니다.

출처

2016-10-12 10:10:00

관련 문제

 관련 문제