DEV Community

loading...

Css Cheat Sheet

hoanganhlam profile image Lâm ・2 min read

[Animation] Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
Enter fullscreen mode Exit fullscreen mode

[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;
Enter fullscreen mode Exit fullscreen mode

[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;
Enter fullscreen mode Exit fullscreen mode

[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 */
Enter fullscreen mode Exit fullscreen mode

Reference

Discussion (0)

Forem Open with the Forem app