바로 2020 년, 작은 친구를 모르고 아직 올해 CSS3 애니메이션을 배웠다?
CSS 애니메이션을 말하는 것은 덜 CSS 애니메이션 회사가, 다른 한편으로는 개발자의 대부분은 그렇게 주도 많은 프로그래머 (자세한 전용 CSS 애니메이션을 배워야 할 자바 스크립트 애니메이션을 사용하여 익숙한 부분적으로 있기 때문에, 할 매우 당황 적어도 나는) 이었지만, CSS 애니메이션을 이해하지 못하는 프런트 엔드 엔지니어는 코드의 양을 줄이고 성능을 향상시킬 수있는, 당신이 정말로 CSS 애니메이션을 배울 때 사실, 당신은 그 매력에 매료 될 것입니다, 마스터 CSS3를 호출 할 수 없습니다.
그는 말을 많이하지 않았다, 나는 바로 오늘의 주인공 배우 갔다 전환을 지금!
전환 문법
| 값 | 기술 |
|---|---|
| 전이 시간 | 몇 초 또는 밀리 초 완료하는 방법 전환 효과를 지정해야 |
| 전이 특성 | 지정된 CSS 속성 이름, 전환 효과 |
| 전환 타이밍 기능 | 회전 속도 곡선 지정된 전환 효과 |
| 천이 지연 | 전환 효과의 시작을 정의 할 때 |
중국어로 번역 전환은 이름에서 알 수 있듯이,의 함께 자신의 문법에 대해 알아 보자, 같은 일부 줌과 같이 전환 애니메이션을 할 수 있도록 설계 표시를 숨길 수있다, 전환의 의미입니다.
전이 기간 : 몇 초 또는 밀리 초 완료 지정하는 방법에 영향을 전환
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
}
div:hover{
height:150px;
width:150px;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）이 전환은 가장 기본적인 사용법이다 transition-duration애니메이션을 수행하는 데 필요한 시간이 코드는 마우스가 폭, 이동 높이 DIV가되고 있습니다 것을 의미합니다150px
전이 속성 : CSS 속성 이름, 전환 효과를 지정합니다
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-property:width;
}
div:hover{
height:150px;
width:150px;
}이 transition-property값은 의미만을 폭입니다 width대체하는 경우도 애니메이션을 추가, 그것은이 효과를 보여줍니다 height, 그것은 높은 단지 애니메이션이 될 것입니다.
우리는 첫 번째 경우는 우리가 작성하지 않은 것을 발견 transition-property하지만, 경우 width와 height속성이 있기 때문에 같은 시간 변경에, 그것이있는 transition-property기본 가치 all, 그들은, 즉, 모든 변경 사항은 애니메이션 실행됩니다이 속성을 작성하지 않습니다.
전환 타이밍 기능 : 속도 곡선 지정된 전환 효과
div{
width:100px;
height:50px;
background:#f40;
transition-duration:2s;
transition-timing-function:ease-in-out;
}
div:hover{
width:250px;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）transition-timing-function효과는 각 프레임의 애니메이션의 속도를 변경하는 것이다. 여기 transition-timing-function만의 값을 표시 ease-in-out하는 것으로 이해 될 수있는 애니메이션 효과 慢-快-慢. 기타, 당신은 이해하기 위해 다음 표를 참조 할 수 있습니다하지.
| 값 | 기술 | 속도 |
|---|---|---|
| 선형 (기본 속성) | (큐빅 베 지어 (0,0,1,1)와 동일), 전이 효과의 소정의 시작 단에 동일한 속도. | 제복 |
| 용이함 | 소정 느린 후 빠른 시작, 그리고 느린 전환 효과의 끝 (입방 베 지어 (0.25,0.1,0.25,1)). | 빠른 - 느린 - 느린 |
| 완화 된 | 시작을 천천히 전환 효과를 소정 (해당 입방 베 지어 (0.42,0,1,1)). | 빠른 - 빠른 |
| 쉽게 아웃 | 소정의 느린 전이의 끝에서 (등가 큐빅 베 지어 (0,0,0.58,1)). | 느리게 - 느리게 |
| 완화 된 아웃 | 소정의 전환 효과의 시작과 끝 (등가 큐빅 베 지어 (0.42,0,0.58,1))를 느리게한다. | 느리게 - 빠르게 - 느리게 |
| 큐빅 베 지어 ( N , N , N , N ) | 큐빅 베 지어 함수를 자신의 값을 정의합니다. 가능한 값은 0과 1 사이의 값이다. | 관습 |
전환 지연 : 전환 효과의 시작을 정의 할 때
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-delay:1s;
}
div:hover{
height:150px;
width:150px;
}다음 transition-delay은 IS 1s애니메이션은 약 1 초 후에 실행될 의미한다.
오늘 우리는 네 가지 속성 값의 총을 배웠습니다, 그들이에 속하는 transition재산, 속성 값은 여기에 주어진 transition속기 방법.
전환 : 등록 기간 타이밍 지연 기능;
div{
transition:all 1s ease-in-out 2s;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）그래서 여기에 1 초 애니메이션 중 느린 조깅에 가입 한 모든 속성의 의미는, 2 초 후에 시작했다.
결론
위의 연구 후에, 나는 당신의 예비 이해 믿습니다 transition사용 transition더 좋을 수없는 변화를 들어,하지만 혼자 멋진 애니메이션을 할 수 없어, 나는 다음 기사에서 당신에게 설명하는 것 animation（动画）, translate（移动）뿐만 아니라 transform（变形）후속 나는 마스터 CSS 애니메이션으로 2020 년 나와 함께 그것을 조절이!