reveal animation 질문
320
작성한 질문수 3
안녕하세요 선생님
Home 섹션에서
이렇게 span 태그 안에 한 단어일때는 width 0% -> width 100% reveal 애니메이션이 문제없이 작동하는데,
다른텍스트로 연습을 했을 때 중간에 띄어쓰기가 있으면 덜컹거리는 현상이 발생하는데요(두줄이었다가 한줄로 덜컹거림)
ex)
이런식으로 띄어쓰기 후 두글자 추가했을 때 줄바꿈이 나타나지 않으려면 어떻게 해야하나요??
아래 CSS 코드 첨부합니다.
.home-heading {
position: absolute;
top: 50%;
left: 250px;
transform: translateY(-50%);
}
.home-heading span {
display: block;
font-size: 115px;
color: #fff;
font-weight: bold;
width: 0;
overflow: hidden;
animation: reveal .5s 2.5s ease-in forwards;
}
@keyframes reveal {
0% {width: 0;}
100% {width: 100%;}
}
원인이 뭔지 궁금합니다ㅠㅠ
답변 1
4
한글이나 띄어쓰기가 있는 경우에 그렇게 됩니다.
원인을 기술적으로 설명은 못드리겠네요. 아마도 폰트관련으로 생각됩니다.
해결방법은 white-space: nowrap 이렇게 주시면 줄바뀜(wrap)이 nowrap이 되면서 그런 현상을 방지합니다.
full reload 질문
1
180
3
섹션4에 있는 4번째 강의 질문(스크롤링)
1
149
2
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
1
197
1
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
1
317
3
css full reload 문제가 발생하여 질문드립니다!
1
315
3
파일 내 index.html에 대한 오류
1
264
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
1
207
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
0
218
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
1
201
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
1
255
3
크로스브라우징-크롬
1
280
2
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
0
256
1
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
1
217
1
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
1
274
1
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
1
257
1
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
1
508
2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
2
233
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
2
309
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
2
261
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
2
423
1
포지션 속성 중복과 관련해서
1
215
1
section about에 관련.. 궁금해요
1
256
1
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
1
195
2
개발자도구
2
483
6