CSS3 애니메이션 속성에 대한 자세한 설명(코드 포함)

이 글은 CSS3의 애니메이션 속성(코드 포함)에 대한 자세한 설명을 제공합니다. 이는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

css3 애니메이션(animation)에는 다음 속성이 있습니다.

1. animation-name 사용자 정의 애니메이션 이름
2. animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 지정합니다. 기본값은 0입니다. animation-timing-function 애니메이션의 시간 곡선인 선형은 일정한 속도이며, 처음에는 가벼움이 느리고 그 다음에는 빨라지다가 끝나기 전에 느려집니다.
4. animation-delay 애니메이션 시작 전 지연 간격, 기본값은 0
5. animation-iteration-count 애니메이션 재생 횟수, 기본값은 1
6. animation-direction 애니메이션 재생 여부 in reverse in 차례로
7. animation- play-state 애니메이션이 실행 중인지 일시 중지되었는지 여부입니다. 값: 일시 중지됨은 일시 중지된 애니메이션을 지정하고, 실행 중은 실행 중인 애니메이션을 지정합니다. 기본값입니다.

예: 이 데모는 애니메이션의 전체 과정을 설명하기 위해 번역을 예로 사용합니다.

어떻게 ? 단순히 CSS 코드를 사용하여 텍스트를 깜박이는 효과로 표시하시겠습니까? (코드 예)

CSS와 D3를 사용하여 사이클로이드 스윙 효과 애니메이션을 구현하는 방법

위 내용은 CSS3 애니메이션 속성에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!