CSS가 날아가고 커브 된 경로의 로고가 확대됩니다.

Question

CSS로 애니메이션을 만들어야합니다. 곡선 경로 또는 포물선을 기준으로 앞쪽으로 날아가는 로고입니다. 나는 작은 스케치를 만들었다. 로고가 작고 오른쪽으로 쳐다 보며 날고 커지고 왼쪽 중앙으로 끝납니다. Sketch cubic-bezier와 cubic-bezier 편집자에 대한 많은 정보를 찾았지만 unfortnatelly 나는 이것을 깨닫지 못했습니다.

HTML

<div class="animation"><img src="logo.jpg"></div> 

(수의)이 하나 CSS를

.animation { 
    transition: all 500ms cubic-bezier(0.725, -0.385, 0.970, 0.465); 
    transition-timing-function: cubic-bezier(0.725, -0.385, 0.970, 0.465); 
} 

할려고하지만 로고는 애니메이션되지 않습니다. 게다가, 내가 그것을 이해한다면, 그것은 확장이없는 길일뿐입니다. 내 생각에는 어디에 오류가 있습니까?

고마워요. & 안부 인사!

Answer 1

먼저 큐빅 베 지어는 타이밍 기능이며 "경로"기능이 아닙니다. 그것은 당신이 한 일을 성취하지 못할 것입니다.

둘째로, 원하는 것을 이루기 위해 CSS3 matrix transition property을 a custom animation function with a custom step callback과 함께 사용하십시오. 어느 쪽이든, 또는 상기 애니메이션 기능으로 top, left, height, width와 같은 CSS 속성을 직접 조정할 수 있습니다.

행운을 빈다.