a Exploration 1

CSE 154

Exploration 1: CSS3 Animation


Attendance

  • CSS3 2D Transforms
  • CSS3 3D Transforms
  • CSS3 Transitions
  • CSS3 Animations

CSS3 2D Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew elements.

translate() rotate()
scale() skewX()
skewY() matrix()

translate()

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). 


-webkit-transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px);
transform: translate(50px, 100px);

CSS

rotate()

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. 


						-ms-transform: rotate(20deg);
						-webkit-transform: rotate(20deg);
						transform: rotate(20deg);

CSS

scale()

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). 


-ms-transform: scale(2, 3);
-webkit-transform: scale(2, 3);
transform: scale(2, 3);

CSS

Skew()

The skew() method skews an element along the X and Y-axis by the given angles. 


-ms-transform: skew(20deg, 10deg);
-webkit-transform: skew(20deg, 10deg);
transform: skew(20deg, 10deg);

CSS

matrix()

The matrix() method combines all the 2D transform methods into one. The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()); 


-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
transform: matrix(1, -0.3, 0, 1, 0, 0);

CSS

CSS3 3D Transforms

rotateX()
rotateY()
rotateZ()

rotateX()

The rotateX() method rotates an element around its X-axis at a given degree: 


-webkit-transform: rotateX(150deg);
transform: rotateX(150deg);

CSS

rotateY()

The rotateY() method rotates an element around its y-axis at a given degree: 


-webkit-transform: rotateY(150deg);
transform: rotateY(150deg);

CSS

rotateZ()

The rotateZ() method rotates an element around its y-axis at a given degree: 


-webkit-transform: rotateY(150deg);
transform: rotateY(150deg);

CSS

translate3D(x,y,z)

The translate3D method defines a 3D translation. 


-webkit-transform: rotateY(150deg);
transform: rotateY(150deg);

CSS

CSS3 Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

To create a transition effect, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect


div {
	width: 20px;
	height: 30px;
	-webkit-transition: width 2s, height 4s;
	transition: width 2s, height 4s;
}
div:hover {
	width: 200px;
	height: 300px;
}

CSS

Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

ease linear
ease-in ease-out
ease-in-out cubic-bezier(n,n,n,n) 

	#div1 {transition-timing-function: linear;}
	#div2 {transition-timing-function: ease;}
	#div3 {transition-timing-function: ease-in;}
	#div4 {transition-timing-function: ease-out;}
	#div5 {transition-timing-function: ease-in-out;}

CSS

Delay

The transition-delay property specifies a delay (in seconds) for the transition effect. 


						-webkit-transition-delay: 1s;
						transition-delay: 1s;

CSS

Transition + Transformation

See here!

CSS3 Animation

Best thing to happen to the mankind. Period.

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

To use CSS3 animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

animation-name and animation-duration

We need to give our animation a name to refer to it later from the keyframe rule. We also need to specify the animation-duration property, else the animation won't have any effect because it's default value is 0.

@keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. 


@keyframes example {
	from {background-color: red;}
	to {background-color: yellow;}
}
div {
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}

CSS

Apart from keywords, we can also use "%" and use numbers from 0(start) to 100(complete). 


@keyframes example {
	0%   {background-color: red;}
	25%  {background-color: yellow;}
	50%  {background-color: blue;}
	100% {background-color: green;}
}

div {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}

CSS

See here! See here!

animation-delay

The animation-delay property specifies a delay for the start of an animation.

animation-iteration-count

The animation-iteration-count property specifies the number of times an animation should run.

animation-direction

The animation-direction property is used to let an animation run in reverse direction or alternate cycles.


div {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: 3;
	animation-direction: alternate;
}

Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the transition effect.

ease linear
ease-in ease-out
ease-in-out cubic-bezier(n,n,n,n)

Let's Code