Transition*

There and maybe Back Again

*Трензішн — англ. Перехід

transition-

• …-property
• …-duration
• …-timing-function
• …-delay

transition-property

• all
• none
• PROP.

Animation of property types

• color
• visibility
• shadow

transition-timing-function

steps(4,start)

transition-timing-function

step-start (1,start)

transition-timing-function

step-end(1,end)

transition-timing-function

cubic-bezier (0.5, 0.2, 0.4,0.8)

transition-timing-function

linear(0,0, 1, 1)

transition-timing-function

ease (0.25,0.1, 0.25, 1)

transition-timing-function

ease-in (0.42, 0, 1, 1)

transition-timing-function

ease-out (0, 0, 0.58, 1)

transition-timing-function

ease-in-out (0.42, 0, 0.58, 1)

transition-duration

transition-delay

How to use:

.classs {
	transition-property: width;
	transition-timing-function: ease;
	transition-during: 1s;
	transition-delay: 1s;
}
/* or */
.classs {
	transition: width ease 1s 1s;
}
					

How to use:

.classs {
	transition: width ease 1s 1s, height linear 2s 1s;
}
/* or */
.classs {
	transition-property: width,height;
	transition-timing-function: ease,linear;
	transition-during: 1s,2s;
	transition-delay: 1s;
}
					

Events

transitionend

transitionend

var el=document.getElementById('El');
el.addEventListener( 'transitionend',function(evt){ alert( "Finished transition!" ); }, false );

Actually

Actually

.classs {
 	-webkit-transition: -webkit-transform ease 2s;
}

var el=document.getElementById('El');
el.addEventListener( 'webkitTransitionEnd',function(evt){ alert( "Finished transition!" ); }, false );

Links

• http://www.w3.org/TR/css3-transitions/
• http://lea.verou.me/ft2010/#slide69
• http://lab.hakim.se/reveal-js/
• https://github.com/panshadow/cgn-transition-evening

Links

The End

by Oleg Neizhkasha