텍스트 애니메이션 반복 질문드립니다.
본문
안녕하세요..
텍스트에 css효과를 입혀서 사용중인데
텍스트가 반복적으로 나왔으면 해서요
.bnr_bx .sop .titles span {
width: 100%;
float: left;
opacity: 0;
-webkit-animation-name: titleAnimation;
-webkit-animation-timing-function:ease;
-webkit-animation-duration: 5s;
}
.bnr_bx .sop .titles h1 span {
animation-delay: 0.6s;
}
.bnr_bx .sop .titles h1 span:first-child {
animation-delay: 0.7s;
}
.bnr_bx .sop .titles h1 span:last-child {
animation-delay: 0.5s;
}
.bnr_bx .sop .titles h2 {position:absolute}
.bnr_bx .sop .titles h2 span {
animation-delay: 5.6s;
}
.bnr_bx .sop .titles h2 span:first-child {
animation-delay: 5.7s;
}
.bnr_bx .sop .titles h2 span:last-child {
animation-delay: 5.5s;
}
.bnr_bx .sop .titles h3 {position:absolute}
.bnr_bx .sop .titles h3 span {
animation-delay: 10.6s;
}
.bnr_bx .sop .titles h3 span:first-child {
animation-delay: 10.7s;
}
.bnr_bx .sop .titles h3 span:last-child {
animation-delay: 10.5s;
}
@keyframes titleAnimation {
0% {
transform: translateY(-50px);
opacity: 0;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
}
20% {
transform: translateY(0);
opacity: 1;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
}
80% {
transform: translateY(0);
opacity: 1;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
}
100% {
transform: translateY(50px);
opacity: 0;
-webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
}
}
</style>
마킹은
<div class="sop">
<div class="titles">
<h1 class="title">
<span>테스트1</span>
<span>테스트1 텍스트</span>
</h1>
<h2 class="title">
<span>테스트2</span>
<span>테스트2 텍스트</span>
</h2>
<h3 class="title">
<span>테스트3</span>
<span>테스트3 텍스트</span>
</h3>
</div>
</div>
한번은 잘 나오는데
animation-iteration-count:infinite 쓰면 글씨가 겹치고;;
animation-fill-mode:none 은 먹히지가 않습니다.
출처는
여기 입니다. ㅠ
고수님들 도와주세요 ㅠㅠ
답변 2
일단 현재 말씀하신 상태로 사용시 컨테이너 클레스로 position:relative 되어있는 녀석이 누락되었습니다.
<div class="sop">
<div class="titles">
<section class="container">
<h1 class="title">
<span>테스트1</span>
<span>테스트1 텍스트</span>
</h1>
<h2 class="title">
<span>테스트2</span>
<span>테스트2 텍스트</span>
</h2>
<h3 class="title">
<span>테스트3</span>
<span>테스트3 텍스트</span>
</h3>
</section>
</div>
</div>
예시로는 위처럼 하시면 해결되긴 하는데, 컨테이너, 타이틀이라는 클레스가 아마 그누보드 기본 테마에 존재하는 클레스였던 것 같습니다만...
별도의 페이지가 아니시라면 위 내용 css까지 전부 수정하셔야 안전하게 사용하실 수 있을 것으로 보입니다.
각각의 텍스트에 css
animation-iteration-count : infinite;
를 붙여주시면 무한루프 반복입니다.
