css 애니매이션 질문 입니다.
본문
text ...
이런식으로 마침표 한개씩 찍히고 사라지는 효과가 잘 안되네요..
그 로딩 되고 있다는 느낌을 주는 효과 거든요..
<!-- html -->
<button type="button">Detecting <span></span></button>
#main .container.step02 .doc_area .click button span {
position:relative;
color:transparent;
min-width:11px;
white-space: nowrap;
}
#main .container.step02 .doc_area .click button span:before {
content: "...";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#fff;
overflow: hidden;
animation: typing 3s steps(10) infinite;
}
@keyframes typing{
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}
답변 2
<!DOCTYPE html>
<html>
<body>
<style>
button span {
position:relative;
color:transparent;
min-width:11px;
white-space: nowrap;
}
button span:before {
content: "...";
top: 0;
left: 0;
width: 100%;
height: 100%;
color:black;
overflow: hidden;
animation: typing 3s steps(10) infinite;
}
@keyframes typing{
0% {
content: "...";
}
16% {
content: "..";
}
32% {
content: ".";
}
48% {
content: "";
}
64%{
content: ".";
}
80% {
content: "..";
}
100% {
content: "...";
}
}
</style>
<button type="button">Detecting <span></span></button>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
