CSS 애니메이션을 제어하는 ​​데 사용할 수있는 다양한 속성 (예 : 애니메이션-이름, 애니메이션, 애니메이션 타이밍 기능, 애니메이션 부여, 애니메이션 방향, Animat에 대해 설명하십시오.

CSS 애니메이션을 제어하는 ​​데 사용할 수있는 다양한 속성 (예 : 애니메이션-이름, 애니메이션, 애니메이션 타이밍 기능, 애니메이션-디렉션-애니메이션 방향, 애니메이션 필드 모드를 설명하십시오).

CSS 애니메이션은 다양한 속성을 통해 제어되며 각각의 다른 속성을 통해 애니메이션의 다른 측면을 정의합니다. 다음은 이러한 속성에 대한 자세한 설명입니다.

• 애니메이션-이름 :이 속성은 애니메이션의 동작을 정의하는 @keyframes at-rule의 이름을 지정합니다. 예를 들어, animation-name: fadeIn; @keyframes fadeIn { ... } 로 정의 된 애니메이션을 사용합니다.
• 애니메이션 기간 : 이것은 애니메이션이 한주기를 완료하는 데 걸리는 시간을 설정합니다. 초 (s) 또는 밀리 초 (ms)로 지정할 수 있습니다. 예를 들어, animation-duration: 3s; 애니메이션이 3 초 동안 지속됩니다.
• 애니메이션 타이밍 기능 :이 속성은 애니메이션이 한주기 동안 진행되는 방식을 정의합니다. 일반적인 값으로는 ease , linear , ease-in , ease-out 및 ease-in-out 포함됩니다. 또한 입방 베 지어 함수를 사용하여 사용자 정의 타이밍 기능을 정의 할 수 있습니다.
• 애니메이션-정기-카운트 : 이것은 애니메이션을 재생 해야하는 횟수를 지정합니다. animation-iteration-count: 3; , 또는 infinite 으로 설정되어 애니메이션을 무기한으로 루프하십시오.
• 애니메이션 방향 :이 속성은 애니메이션이 일부 또는 모든 사이클에서 역전되어야하는지 여부를 결정합니다. 값에는 normal , reverse , alternate 및 alternate-reverse 포함됩니다.
• 애니메이션 필 모드 : 애니메이션이 실행되기 전후에 대상 요소에 적용되는 값을 제어합니다. 가능한 값은 none , forwards , backwards 및 both 입니다. forwards 마지막 키 프레임 값을 유지하고, backwards 애니메이션이 시작되기 전에 첫 번째 키 프레임 값을 적용합니다.

이러한 속성은 복잡한 애니메이션을 달성하기 위해 개별적으로 또는 함께 사용될 수 있습니다.

애니메이션 타이밍 기능을 사용하여 CSS 애니메이션의 타이밍과 속도를 어떻게 설정할 수 있습니까?

CSS의 animation-timing-function 속성을 사용하면 지속 시간 동안 애니메이션의 타이밍과 속도를 제어 할 수 있습니다. 이 속성은 애니메이션의 가속도 곡선을 정의하여 그것이 얼마나 빨리 시작하는지, 진행 방법 및 끝나는 방법에 영향을 미칩니다. animation-timing-function 대한 몇 가지 일반적인 값은 다음과 같습니다.

• ease : 이것은 기본값입니다. 애니메이션은 천천히 시작하여 중간을 통해 가속 된 다음 끝까지 속도가 느려집니다. 입방 베 지어 기능 cubic-bezier(0.25, 0.1, 0.25, 1) 로 표시됩니다.
• linear : 애니메이션은 처음부터 끝까지 일정한 속도로 움직입니다. 이것은 cubic-bezier(0, 0, 1, 1) 로 표시됩니다.
• ease-in : 애니메이션이 느리게 시작한 다음 진행됨에 따라 속도가 빨라집니다. cubic-bezier(0.42, 0, 1, 1) 로 표시됩니다.
• ease-out : 애니메이션이 빠르게 시작된 다음 끝까지 속도가 느려집니다. cubic-bezier(0, 0, 0.58, 1) 로 표시됩니다.
• ease-in-out : 애니메이션이 느리게 시작하여 중간을 통해 가속 된 다음 다시 끝까지 속도가 느려집니다. cubic-bezier(0.42, 0, 0.58, 1) 로 표시됩니다.

또한 cubic-bezier 함수를 사용하여 사용자 정의 타이밍 기능을 만들 수 있습니다.이 기능은 4 개의 숫자를 매개 변수로 가져 오는데, 각각 애니메이션의 곡선을 정의하는 그래프의 점을 나타냅니다. 예를 들어, animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); 사용자 정의 곡선을 만듭니다.

이러한 타이밍 기능을 사용하여 애니메이션의 속도와 타이밍을 미세 조정하여 원하는 시각적 효과를 달성 할 수 있습니다.

CSS 애니메이션에서 애니메이션 지시에 다른 값을 사용하는 효과는 무엇입니까?

CSS의 animation-direction 속성은 특히 반복되도록 애니메이션이 재생되는 방향을 제어합니다. 다른 값이 애니메이션에 어떤 영향을 미치는지는 다음과 같습니다.

• normal : 이것은 기본값입니다. 애니메이션은 각 사이클마다 시작부터 끝까지 앞으로 진행됩니다. 애니메이션이 여러 번 반복되면 각주기가 앞으로 진행됩니다.
• reverse : 애니메이션은 최종 상태에서 시작하여 시작 상태로 돌아갑니다. 각주기는 뒤로 재생됩니다.
• alternate : 애니메이션은 전진과 역 사이를 번갈아 가며. 균일 한 사이클 (2, 4, 6 등)에서는 앞으로 나아가고 홀수 사이클 (1, 3, 5 등)에서는 역전됩니다. 이것은 앞뒤 효과를 만듭니다.
• alternate-reverse : alternate 와 비슷하지만 애니메이션은 반대로 시작됩니다. 따라서 홀수주기 (1, 3, 5 등)에서는 역전되고 균일 한 사이클 (2, 4, 6 등)에서 진행됩니다.

animation-direction 에 이러한 다양한 값을 사용하면 간단한 루핑 애니메이션에서보다 복잡한 진동 애니메이션에 이르기까지 다양한 시각적 효과가 생길 수 있습니다. 예를 들어, 진자의 애니메이션은 alternate 사용하여 앞뒤로 스윙 할 수 있으며, 튀는 볼 애니메이션은 alternate-reverse 사용하여 현실적인 바운스 효과를 만들 수 있습니다.

애니메이션 필드 모드가 실행 전후 CSS 애니메이션의 동작에 어떤 영향을 미치는지 설명 할 수 있습니까?

animation-fill-mode 속성은 애니메이션이 실행되기 전후 요소에 어떤 스타일이 적용되는지 결정합니다. 다른 값과 그 효과는 다음과 같습니다.

• none : 이것은 기본값입니다. 애니메이션은 시작되기 전에 또는 종료 된 후에 요소에 영향을 미치지 않습니다. 요소는 애니메이션이 끝나 자마자 원래 상태로 되돌아갑니다.
• forwards : 애니메이션이 끝나면 요소는 애니메이션의 마지막 키 프레임에 의해 정의 된 상태로 유지됩니다. 이것은 요소가 희미해진 후에 보이는 것처럼 애니메이션의 최종 상태를 유지하는 데 유용 할 수 있습니다.
• backwards : 애니메이션이 시작되기 전에 요소는 애니메이션의 첫 번째 키 프레임으로 정의 된 상태로 설정됩니다. 이것은 실제로 시작되기 전에 애니메이션의 요소를 준비하는 데 사용될 수 있습니다. 예를 들어 희미 해지 기 전에 숨겨질 요소를 설정하는 것과 같이 요소가 숨겨져 있습니다.
• both : 이것은 forwards 의 영향을 결합합니다 backwards 요소는 애니메이션이 시작되기 전에 첫 번째 키 프레임으로 정의 된 스타일을 사용하고 애니메이션이 끝난 후 마지막 키 프레임의 스타일을 유지합니다.

animation-fill-mode 사용하면 애니메이션 전, 도중 및 후에 요소의 모양과 동작을 제어 할 수 있습니다. 이는 사용자 인터페이스 애니메이션의 연속성을 유지하거나 다른 요소의 다른 상태간에 원활한 전환을 만드는 데 중요 할 수 있습니다.

위 내용은 CSS 애니메이션을 제어하는 ​​데 사용할 수있는 다양한 속성 (예 : 애니메이션-이름, 애니메이션, 애니메이션 타이밍 기능, 애니메이션 부여, 애니메이션 방향, Animat에 대해 설명하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!