el Mago de CSS: recetas :

Designed for mouse events - the effects will work with a click on touch screen devices but are not as smooth. // set for all transitions + 2-D transforms - p.trans{ transition:all 800ms ease-in-out; }

transitions transition: property duration timing-function delay;
// use transition-property: comma, sep., list OR transition:all for multiples

margin
X margin -
-------------------
p#margin:hover{ margin:0 auto; background-color:#fca1a1; }
// originally set at margin:3.0em auto 0 auto;

bkgnd.sz.
X background-size -
-------------------
p#bksize:hover{ background-size:10% 10%; }
// originally set at background-size:100% 100%;

bord.rad.
X border-radius -
-------------------
p#bordrad:hover{ border-radius:50%; background-color:#fca1a1; }
// orig. not set

opacity
X opacity -
-------------------
p#opac:hover{ opacity:0.0; background-color:#fca1a1; }
// orig. set at opacity:1.0;

box shadow
X box-shadow -
-------------------
p#shad{ box-shadow: 0 5px 4px -4px gray; }
p#shad:hover{ box-shadow: 0 10px 8px -4px black; background-color:#fca1a1; }

border
X border[-style] -
-------------------
p#bord{ border:1px solid lightblue; }
p#bord:hover{ border:10px dotted lightblue; background-color:#fca1a1; }

width
X width -
-------------------
p#width:hover{ width:8.0em; background-color:#fca1a1; }
// orig. set at width:3.0em;

bkgnd.pos.
X background-position -
-------------------
#paper div p#pos{ background-image:repeating-linear-gradient(-45deg, cornflowerblue, cornflowerblue 10px, lightblue 10px, lightblue 15px, thistle 15px, thistle 20px); }
p#pos:hover{ background-position:1.50em 1.50em; }

bkgnd.img.
X background-image -
-------------------
p#bkimg:hover{ background:#fca1a1 url(imgs/lab.png) no-repeat 50% 50%; }

padding
X padding -
-------------------
p#pad:hover{ padding:0 0 3.0em 0; background-color:#fca1a1; }
// orig. set at padding:0;

transforms : 2d transform: rotate(#deg) translate(#, #) scale(#, #) skew(#, #);
// note space sep. multiples & use single # if using X or Y axis only; neg. ok for each //

rotate
X rotate(deg) -
-------------------
p#rot:hover{
-webkit-transform: rotate(45deg); transform: rotate(45deg); background-color:#fca1a1; }

translate
X translate//X//Y(unit) -
-------------------
p#translate:hover{
-webkit-transform:translateX(2.0em) translateY(-2.0em); transform:translateX(2.0em) translateY(-2.0em);
background-color:#fca1a1; }

scale
X scale//X//Y(unit) -
-------------------
p#scale:hover{
-webkit-transform:scale(.10); transform:scale(.10); background-color:#fca1a1; }

skew
X skew//X//Y(deg) -
-------------------
p#skew:hover{
-webkit-transform:skewY(35deg); transform:skewY(35deg); background-color:#fca1a1; }

mix:prev.3
X combo. platter -
-------------------
p#mix:hover{
-webkit-transform:skew(-20deg, 10deg) translateY(2.0em) scale(1.50);
transform:skew(-20deg, 10deg) translateY(2.0em) scale(1.50);
background-color:#fca1a1; }

transforms : 3d transform: name1(val) name2(val, val); // space sep. multiples
// ex's here - for parent: perspective: 200px; // for children: transform-style: preserve-3d;

rotateY
X rotateY(deg) -
-------------------
#rotY{ -webkit-transform:rotateY(0deg); transform:rotateY(0deg); }
#rotY:hover { -webkit-transform:rotateY(180deg); transform:rotateY(180deg); background-color:#fca1a1; }

rotate3d
X rotate3d(x, y, z, deg) -
-------------------
#rotD{ -webkit-transform:rotate3d(1, 1, 0, 0deg); transform:rotate3d(1, 1, 0, 0deg); }
#rotD:hover{ -webkit-transform:rotate3d(1, -1, 0, 60deg); transform:rotate3d(1, -1, 0, 60deg);
background-color:#fca1a1; }

scaleZ/rotateX
X scaleZ(unit) -
-------------------
#scaleZ{ -webkit-transform:scaleZ(1) rotateX(0deg); transform:scaleZ(1) rotateX(0deg); }
#scaleZ:hover{ -webkit-transform:scaleZ(5) rotateX(45deg); transform:scaleZ(5) rotateX(45deg);
background-color:#fca1a1; }

translate3d
X translate3d(x, y, z) -
-------------------
#translD{ -webkit-transform:translate3d(0px, 0px, 0px); transform:translate3d(0px, 0px, 0px); }
#translD:hover{
-webkit-transform:translate3d(100px, 100px, -300px); transform:translate3d(100px, 100px, -300px);
background-color:#fca1a1; }

transf.origin
X transform-origin(unit / keywd.) -
-------------------
#origin{ -webkit-transform-origin:top left; transform-origin:top left; }
#origin:hover{
-webkit-transform:rotate3d(2, -2, 2, 60deg); transform:rotate3d(2, -2, 2, 60deg);
background-color:#fca1a1; }

animations animation: name duration timing-function delay iteration-count direction fill-mode play-state;
// mult. are possible, using the long syntax and comma, sep., list
// animation-play-state: paused; > :running; on :hover + vendor prefixes not always shown

swing
X swing -
-------------------
@keyframes swing{
0% { transform:scale(1); }
50% { transform:rotateX(70deg) scale(2); }
100% { transform:rotateX(0deg) scale(1); }
}
#swingit{
-webkit-animation:swing 1.5s ease-in-out infinite backwards; animation:swing 1.5s ease-in-out infinite backwards;
}

hinged
X hinge -
-------------------
@keyframes hinged {
0% { transform-origin: top left; }
20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; }
40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; opacity: 1; }
90% { transform: translate3d(0, 700px, 0); opacity: 0; }
100% { transform:translateY(-700px); opacity:1; }
}
#hinge {
-webkit-animation: hinged 2s ease-in-out infinite backwards; animation: hinged 2s ease-in-out infinite backwards;
}

grow it
X grow -
-------------------
@keyframes grow {
0% { transform:scale(1); opacity:1; }
10% { transform:scale(.20); opacity:1; }
70% { transform:scale(3); opacity:1; }
80% { transform:scale(2.8); opacity:1; }
90% { transform:scale(3); opacity:1; }
100% { transform:scale(2.9); opacity:0; }
}
#growit{
-webkit-transform-origin: 50% 40%; transform-origin: 50% 40%;
-webkit-animation: grow 1.5s ease-in-out infinite backwards; animation:grow 1.5s ease-in-out infinite backwards;
}

drop it
X drop / fall flat -
-------------------
@keyframes drop {
0% { transform: rotateX(0deg) scaleY(1); }
70% { transform: rotateX(-90deg) scaleY(1.5); }
76% { transform: rotateX(-86deg) scaleY(1.5); }
80%, 100% { transform: rotateX(-90deg) scaleY(1.5); }
}
#dropit{
-webkit-transform-origin:bottom; transform-origin:bottom;
-webkit-animation: drop 2s ease-in-out infinite backwards; animation: drop 2s ease-in-out infinite backwards;
}

bounce
X bounced -
-------------------
@keyframes bounce {
0% { transform: translate3d(0, 0, 0) scaleY(1); }
20% { transform: translate3d(0, 55px, 0) scaleY(.8); }
35% { transform: translate3d(0, 30px, 0) scaleY(1); }
50% { transform: translate3d(0, 52px, 0) scaleY(.95); }
65% { transform: translate3d(0, 45px, 0) scaleY(1); }
70% { transform: translate3d(0, 50px, 0) scaleY(1); }
}
#bounceit{
-webkit-transition:all 500ms ease; transition:all 500ms ease;
-webkit-animation: bounce 2s ease-in-out infinite backwards; animation: bounce 2s ease-in-out infinite backwards;
}

rock it
X rock it -
-------------------
@keyframes wobble {
from { transform: none; }
15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -7deg); }
30% { transform: translate3d(15%, 0, 0) rotate3d(0, 0, 1, 7deg); }
45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -5deg); }
60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 5deg); }
75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg); }
85% { transform: translate3d(5%, 0, 0) rotate3d(0, 0, 1, 3deg); }
to { transform: none; }
}
#rockit{
-webkit-animation: wobble 2s ease-in-out infinite backwards; animation: wobble 2s ease-in-out infinite backwards;
}

springy
X springy -
-------------------
@keyframes shake {
from, to { transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, -5px, 0); }
20%, 40%, 60%, 80% { transform: translate3d(10px, 5px, 0); }
}
#spring{
transition:all 500ms ease; background:transparent none;
animation:shake 2s ease-in-out infinite backwards; animation-play-state:paused;
}
#spring:hover{
background:transparent none; width:0px; height:0px;
border-right:2.0em solid transparent; border-bottom:4.0em solid #fca1a1; border-left:2.0em solid transparent;
}

jump
X jump -
-------------------
@keyframes jumpy { 0% { transform:translateY(0em); border-radius:0 0 0 0; height:3.0em; }
30% { transform:translateY(3.0em); border-radius:3em 3em 0 0; height:1.50em; }
80% { transform:translateY(0em); border-radius:0 0 0 0; height:3.0em; }
100% { transform:translateY(-2.20em); border-radius:0 0 3em 3em; height:1.50em; }
}
#jump{
-webkit-transition:all 500ms ease; transition:all 500ms ease;
-webkit-animation:jumpy 2s ease-out infinite backwards; animation:jumpy 2s ease-out infinite backwards;
}

multiple
X double animation -
-------------------
@keyframes roll-in {
0% { transform: translateX(0em) rotate(0deg); }
100% { transform: translateX(2.75em) rotate(360deg); }
}
@keyframes scale-up {
0% { transform:translateX(2.75em) scale(.4, .9); }
25% { transform: scale(1.5, 1.5); }
60% { transform: scale(.8, .8); }
100% { transform:translateX(0em) scale(1, 1); }
}
#multi{
-webkit-animation-name: roll-in, scale-up; animation-name: roll-in, scale-up;
-webkit-animation-duration: 2s, 1s; animation-duration: 2s, 1s;
-webkit-animation-timing-function: ease-in, linear; animation-timing-function: ease-in, linear;
-webkit-animation-delay: 0s, 2s; animation-delay: 0s, 2s;
-webkit-animation-play-state:paused, paused; animation-play-state:paused, paused;
}

steps
X circle morph [steps] -
-------------------
@keyframes circles {
0%, 100% { transform:scale(1); border-radius:0; border-width:0; margin:2.0em auto 0 auto; }
10% { transform:scale(.9); border-radius:0 50% 0 50%; border-width:10px; margin:1.50em auto 0 auto; }
30% { transform:scale(.7); border-radius:50%; border-width:25px; margin:1.0em auto 0 auto; }
50% { transform:scale(.5); border-radius:50%; border-width:50px; margin:0 auto; }
70% { transform:scale(.7); border-radius:50%; border-width:25px; margin:1.0em auto 0 auto; }
90% { transform:scale(.9); border-radius:50% 0 50% 0; border-width:10px; margin:1.50em auto 0 auto; }
}
#steps{
transition:all 500ms ease; border-style:solid; border-color:turquoise; animation:circles 4s steps(7, end) infinite forwards; animation-play-state:paused;
}

variations on a theme combinations of all the above...

cover
me

X to center / cover me -
-------------------
div#to_cntr p{
width:25px; height:25px; margin:0 auto; padding:0; display:block; -webkit-transition: all 1.5s cubic-bezier(.50, 1, .90, .20); transition: all 1.5s cubic-bezier(.50, 1, .90, .20); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
#to_cntr p#dot_a{
position:absolute; top:0px; left:0px; background-color:thistle; z-index:10; transition-delay:50ms; }
#to_cntr:hover #dot_a{
transform: translate(60px,60px); background-color:cornflowerblue; transition-delay:50ms; }
// reptd. for #dot_b...#dot_d w/ varying transition-delay times

split

X from center / split -
-------------------
#from_cntr p{
width:25px; height:25px; margin:0 auto; padding:0; display:block; transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
}
#from_cntr p#dot_e{
background-color:cornflowerblue; position:absolute; top:60px; left:60px; z-index:10; }
#from_cntr:hover #dot_e{ background-color:#efefef; transform:translate(-60px, -60px); }
// reptd. for #dot_f...#dot_h - each w/ varying translate amts.

wander

X wander / chase -
-------------------
div#wander p{
width:25px; height:25px; margin:0 auto; padding:0; display:block; position:absolute; transition: all 1s linear; }
@keyframes roaming{
0% { transform:translate(0px, 0px); opacity:1.0; }
25% { transform:translate(0px, 150px); opacity:.60;}
50% { transform:translate(150px, 150px); opacity:.40; }
75% { transform:translate(150px, -1px); opacity:.20; }
100% { transform:translate(-3px, -1px); opacity:.0; }
}
#wander p#dot_i{
background-color:cornflowerblue; position:absolute;
animation:roaming 2.5s ease 0ms infinite; animation-play-state:paused;
}
#wander:hover p#dot_i{ animation-play-state:running; border-radius:50%; }
// reptd. for other 2 elements w/ varying delay amts.

spin

X spinning -
-------------------
div#spin p{
width:25px; height:25px; margin:0 auto; padding:0; display:block; position:absolute; transition: all 1s linear; animation:spinning 3s ease-out 50ms infinite backwards; animation-play-state:paused; }
@keyframes spinning{
0%, 100% { transform:rotate(0deg) scale(1); opacity:0.10; }
20% { transform:rotate(360deg) scale(2.5); opacity:0.60; }
40% { transform:rotate(360deg) scale(1.75); opacity:1.0; }
60% { transform:rotate(360deg) scale(2.5); opacity:0.60; }
80% { transform:rotate(0deg) scale(1); opacity:0.10; }
}
#spin p#dot_j{
background-color:powderblue; position:absolute; position:absolute; top:65px; left:60px; z-index:10; animation-play-state:paused;
}
#spin:hover p#dot_j{ animation-play-state:running; }
// reptd. for #dot_k...#dot_m w/ varying positions set.

skewed

X skewed -
-------------------
div#skewed p{
width:25px; height:25px; margin:0 auto; padding:0; display:block; position:absolute; transition: all 1s linear; }
@keyframes skew{
0% { transform:skewY(0deg) scale(1); opacity:1.0; }
20% { transform:skewY(35deg) scale(2); opacity:.20; }
40% { transform:skewY(0deg) scale(3); opacity:.10; }
60% { transform:skewY(-35deg) scale(2); opacity:.20; }
100% { transform:skewY(0deg) scale(1); opacity:1.0; }
}
#skewed p#dot_n{
background-color:thistle; position:absolute; top:60px; left:60px; z-index:10; animation:skew 2s linear infinite; animation-play-state:paused; }
#skewed:hover p#dot_n{ background-color:lightsalmon; animation-play-state:running; }
// reptd. for #dot_o...#dot_q w/ varying positions set.

wave

X wave -
-------------------
div#wave p{
width:40px; height:40px; margin:0 auto; padding:0; display:block; position:absolute; transition: all 1s linear;
}
@keyframes seprots{
0% { transform:rotateY(0deg) scale(1); opacity:1.0; }
20% { transform:rotateY(35deg) scale(1.5); opacity:.20; }
40% { transform:rotateY(60deg) scale(1.5); opacity:.20; }
60% { transform:rotateY(90deg) scale(1.5); opacity:.20; }
100% { transform:rotateY(0deg) scale(1); opacity:1.0; }
}
#wave p#dot_r{
background-color:powderblue; position:absolute; top:60px; left:10px; z-index:10; animation:seprots 2s linear infinite 100ms; animation-play-state:paused;
}
#wave:hover p#dot_r{ animation-play-state:running; }
// reptd. for #dot_s...#dot_u w/ varying animation-delay times set.

travel

X travel -
-------------------
#paper div#travel p{
width:25px; height:25px; margin:0 auto; padding:0; display:block; position:absolute; transition: all 1s cubic-bezier(0.9, 1.0, 0.8, 0.6); opacity:0.80;
}
#travel p#dot_v{
background-color:sandybrown; position:absolute; top:60px; left:60px; z-index:10; }
#travel:hover p#dot_v{ transform:scale(2) translate(-25px, -0.80em); opacity:.10; }
// reptd. for #dot_w... w/ varying position and translate() values set.

gather

X gather together -
-------------------
div#gather p{ width:25px; height:25px; margin:0 auto; padding:0; display:block; transition: all 1s ease-in; }
@keyframes tl{
0% { transform:translate(0px, 0px); }
100% { transform:translate(60px, 60px); }
}
@keyframes tilt_tl{
0% { transform:translate(60px, 60px) rotateX(0deg) scale(1); opacity:1; }
60% { transform:translate(55px, 45px) rotateX(60deg) scale(2); opacity:.40; }
100% { transform:translate(0px, 0px) rotateX(0deg) scale(1); }
}
#gather p#dot_z{
position:absolute; top:0px; left:0px; background-color:thistle; z-index:10; animation:tl 500ms ease-in 0s infinte paused, tilt_tl 3s ease-out 500ms infinite paused;
// -webkit- vers. req. that ea. animation have the longhand syntax, sep. by comma.
}
#gather:hover #dot_z{ animation-play-state:running, running; }
// reptd. for #dot_aa...#dot_cc each w/ their own set of animations, specific to direction of mvmt.

Using with images example: drinking bird.