CSS 構文 アニメーション

(@keyframes name-1{from{color:lime;}to{color:red;}})

@keyframes name-1{from{color:lime;}to{color:red;}}

(animation-name:name-1;)

animation-name:name-1;

(animation-duration:5.5s;)

animation-duration:5.5s;

(animation-timing-function:linear;)

animation-timing-function:linear;

(animation-timing-function:ease;)

animation-timing-function:ease;

(animation-timing-function:ease-in;)

animation-timing-function:ease-in;

(animation-timing-function:ease-out;)

animation-timing-function:ease-out;

(animation-timing-function:ease-in-out;)

animation-timing-function:ease-in-out;

(animation-timing-function:step-start;)

animation-timing-function:step-start;

(animation-timing-function:step-end;)

animation-timing-function:step-end;

(animation-timing-function:steps(5,start);)

animation-timing-function:steps(5,start);

(animation-timing-function:steps(6,end);)

animation-timing-function:steps(6,end);

(animation-timing-function:cubic-bezier(x,y,xx,yy);)

animation-timing-function:cubic-bezier(x,y,xx,yy);

(animation-delay:1s;)

animation-delay:1s;

(animation-iteration-count:1;)

animation-iteration-count:1;

(animation-iteration-count:infinite;)

animation-iteration-count:infinite;

(animation-direction:normal;)

animation-direction:normal;

(animation-direction:reverse;)

animation-direction:reverse;

(animation-direction:alternate;)

animation-direction:alternate;

(animation-direction:alternate-reverse;)

animation-direction:alternate-reverse;