Inflearn コミュニティ Q&A

네~ 감사합니다~

아~~
이부분은   transition: all .3s;의 타이밍이 같은속도로 중복되어서 그럽니다.
결과를 다르게 하시고 싶으시면..한쪽을...
 transition: all .3s;에서 .8s의 시간을 달리 줘보도록 하세요...그럼 효과를 알아볼 수 있으실겁니다.

그리고...
윗부분처럼  트렌지션의 시간타임이 같은속도로 중복된다면 굳이 안쓰셔도 무방합니다.

transition은 속성은 알고있습니다~

그런데

.visual .slide li a:after 에 transition: all .3s; 를 넣고

 또 .visual .slide li a:hover:after 에 transition: all .3s; 를 넣고 안넣고 아무런 차이가 없어서요?

제가 모르는 차이가 있는지 해서요?

이부분입니다~

.visual .slide li a:after{

    content: '';

    width:65%;

    height: 2px;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: -6px;

    background: #f8b922;

    transition: all .3s;

}

.visual .slide li a:hover:after,.visual .slide li a:focus:after{

    width: 100%;

    transition: all .3s;/* 넣고 넣지않고 무슨차이가 있나요?*/

}

paintosm님 안녕하세요?
먼저 강의로 만나뵈어 반갑습니다.
transition은 속성을 서서히 변화시키는 속성으로...한마디로 주어진 속성을  시간을 주어 부드럽게 처리하는것으로 생각하시면 됩니다.
transition에 주석처리를 하시고 결과물을 테스트해보시면 hover효과가 딱딱하게 진행되는 것을 확인하실 수 있을겁니다.
all은 주어진 속성을 모두 말하며, .3s는 0.3초를 뜻합니다. .8s면 0.8초로 진행되는 시간이 더 길어지겠죠~~

혹~~
html과 css로 웹페이지레이아웃을 처음 작성해보신다면..
웹페이지 제작에서 반응형까지의 기초과정인
..실전!웹사이트제작 !Step By Step!(한화캐미컨/솔루션)을 먼저  들으신다면
훨 쉽게 이해하실 수 있으실 겁니다.

계속해서 열강해주시고...
궁금하신점 있으시면..또 질문해주세요^^
오늘도 좋은하루 되시구요...

감사합니다^^