translate(<length>[, <length>])

specifies a 2D translation by the vector [x, y], where x is the translation-value parameter for the x axis and y is the optional translation value along the y axis. parameter. If y is not provided, y==0.

translateX(<length>)

specifies a translation by the given amount in the X direction.

translateY(<length>)

specifies a translation by the given amount in the Y direction.

scale(<number>[, <number>])

specifies 2D scaling operation by the [sx,sy]. If sy is not provided, sy will equal sx (growsing or shrinking with the same scale). Scale(1, 1) or scale(1) leaves an element in it's default state. Scale(2, 2) or scale(2) causes the element to appear twice as wide and twice as tall as its default size, taking up 4-times the original area.

scaleX(<number>)

specifies a scale operation using the [sx, 1] scaling vector, where sx is given as the parameter.

scaleY(<number>)

specifies a scale operation using the [1, sy] scaling vector, where sy is given as the parameter.

rotate(<angle>)

specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.

skewX(<angle>)

specifies a skew transformation along the X axis by the given angle.

skewY(<angle>)

specifies a skew transformation along the Y axis by the given angle.

matrix(<num>, <num>, <num>, <num>, <num>, <num>)

Generally machine generated, specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].

a {
  color: red;
}
a:hover {
  color: yellow;
}

Hover Over Me

a {
  color: red;
  transition: 1s;
}
a:hover {
  color: yellow;
}

Hover Over Me

Anything that has intermediate values

code {
  opacity: 1;
}
code:halfway {
  opacity: 0.5;
}
code:hover {
  opacity: 0;
}

code {
  display: block;
}
code:halfway {
  display: ???
}
code:hover {
  display: none;
}

2 values that have REAL intermediary values

code {
  font-size: 100%;
}
code:halfway {
  font-size: 110%;
}
code:hover {
  font-size: 120%;
}

code {
  height: auto;
}
code:halfway {
  height: ???
}
code:hover {
  height: 1000px;
}

• background-color
• background-position
• border-color
• border-width
• border-spacing
• bottom
• clip
• color
• crop
• font-size
• font-weight
• height
• left
• letter-spacing
• line-height
• margin
• max-height
• max-width
• min-height
• min-width
• opacity
• outline-color
• outline-offset
• outline-width
• padding
• right
• text-indent
• text-shadow
• top
• vertical-align
• visibility
• width
• word-spacing
• z-index

.pencil {
    transition: all 1s ease-in 50ms;
    transform-origin: 100px 123px;
}
.pencil:hover {
    transform: rotate(360deg) scale(2);
}

• Single Iteration
• Reverse goes to initial state
• No granular control
• Limited methods of initiation
• Can't force them to finish

nav ul li {
  list-style-type: none;
}
nav > ul > li {
  display: inline-block;
  position:relative;
}
nav ul ul {
  transform: scale(1,0);
  transform-origin: top center;
  transition:0.2s linear 50ms;
  position:absolute;
  top: 100%;
}
nav li:hover ul {
  transform: scale(1,1);
}

.card {
  position: absolute;
  perspective: 600px;
}
.card:hover {
  transition: 1s ease;
}
.card .front {
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
}
.card:hover .front {
  transform: rotateY(180deg);
}
.card .back {
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
}
.card:hover .back {
  transform: rotateY(0);
}
.card:first-of-type {
  transform: rotate(-5deg);
}
.card:nth-of-type(2):hover {
  transform: rotate(0) translatex(120px);
}
.card:last-of-type {
  transform: rotate(5deg);
}
.card:first-of-type:hover {
  transform: rotate(10deg) translatey(180px);
}

• Single, many or infinite iterations
• Single or bi-directional
• Granular control
• Can be initiated on page load
• Has more robust JS Hooks
• Can be paused
• Lowest priority in UI Thread

• @keyframes
• animation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-delay
• animation-fill-mode
• animation (shorthand)

.pencil {
     width:100px;
     text-align: right;
     border-bottom: 10px solid;
   }
 .pencil::after {
	content: '✎';
	position: absolute;
	bottom: -20px;
	right: -10px;
   }

@keyframes drawALine {
  0%{
    width:0;
    color:green;
  }
  100% {
    width: 100%;
    color:blue;
  }
}

.carda.flipped .front,
.carda.unflipped .back {
  animation: flipme 1s linear forwards;
}
.carda.unflipped .front,
.carda.flipped .back {
  animation: unflipme 1s linear both;
}
.card.flipped:nth-of-type(2){
  transform:
    rotate(0)
    translatex(120px);
}
.carda.flipped:first-of-type{
  transform:
    rotate(-5deg)
    translate(240px, 25px);
}
@keyframes flipme {
  0% {transform: rotatey(0deg)}
  100% {transform: rotateY(-180deg);}
}
@keyframes unflipme {
  0% {transform: rotatey(180deg)}
  100% {transform: rotateY(0deg);}
}

Estelle Weyl

www.standardista.com

@estellevw

@standardista

• CSS Workshop
  • Other CSS Features
• HTML5 Mobile
  • Other CSS Features
• HTML5 Fast Track
  • CSS Section
  • Canvas