Css Cheat Sheet

[Animation] Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')

[Animation] Example

animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

[Animation] Shorthand

	name	duration	timing-function	delay	count	direction	fill-mode	play-state
animation:	bounce	300ms	linear	100ms	infinite	alternate-reverse	both	reverse
	name	duration	timing-function	delay	count	direction	fill-mode	play-state

[Animation] Properties

Property	Value
animation:	(shorthand)
animation-name:	<name>
animation-duration:	<time>ms
animation-timing-function:	ease linear ease-in ease-out ease-in-out
animation-delay:	<time>ms
animation-iteration-count:	infinite <number>
animation-direction:	normal reverse alternate alternate-reverse
animation-fill-mode:	none forwards backwards both initial inherit
animation-play-state:	normal reverse alternate alternate-reverse

Animation

[Background] Multiple backgrounds

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  url('background.jpg') center center / cover, #333;

[Background] Shorthand

	color	image	positionX	positionY		size	repeat	attachment
background:	#ff0	url(bg.jpg)	left	top	/	100px auto	no-repeat	fixed;
background:	#abc	url(bg.png)	center	center	/	cover	repeat-x	local;
	color	image	positionX	positionY		size	repeat	attachment

[Background] Properties

Property	Description
background:	(Shorthand)
---	---
background-color:	<color>
background-image:	url(...)
background-position:	left/center/right top/center/bottom
background-size:	cover X Y
background-clip:	border-box padding-box content-box
background-repeat:	no-repeat repeat-x repeat-y
background-attachment:	scroll fixed local

[Fonts] Case

text-transform: capitalize; /* Hello */
text-transform: uppercase; /* HELLO */
text-transform: lowercase; /* hello */

Reference

• Css Cheat Sheet - Cheat Sheet Maker