[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
Top comments (0)