SVG animateTransform element

SVG

scalable vector graphics

vector-based graphics and animations in HTML Canvas

 

syntax:
<animateTransform attributeName=''transform''/>

transformations
transformation 유형(함수)

 

matrix

perspective

rotate

scale

skew

translate

attributes of animateTransform

 

from:

the initial(start) value of the attribute during the animation

애니메이션 속성의 시작 변수

 

to:

the final(end) value of the attribute during the animation

속성의 종료 변수

 

by:

the relative offset value of the attribute during the animation

 

type:

the transformation type

transformation 유형

 

dur:

the animation duration

애니메이션 한 사이클에 걸리는 시간

 

repeatDur:

the total duration for repeating the animation

반복 구간의 합계 시간

 

repeatCount

the number of times the animation takes place

반복 실행 횟수

 

attributeName:

the CSS property name

CSS 속성 이름

 

values:

"values" is a list of values defining the sequence of values over the course of the animation. If this attribute is specified, any from, to, and by attribute values set on the element are ignored.

 

sample

<animateTransform 
	attributeName="transform"
	attributeType="XML"
	type="translateZ(0)"
	dur="20"
	values="150,0;-150,0;150,0;"
	repeatCount="indefinite"/>