CSS3 Animation, Multi Column

1. CSS Animation
МИС-МТC

2. Агуулга
CSS Animation
CSS Column

3. CSS Animation
CSS Анимэшн гэдэг нэг html элементийн
style буюу шинж чанарыг аажмаар өөрчлөх
хөдөлгөөн юм.
CSS3 дээр animation нь keyframes түлхүүр
үг ашиглах болсон.
Keyframes –үүд нь элементийн шинж
чанарыг 0% - с 100% хүртэл өөрчлөнө.
@keyframes animationname {keyf
rames-selector {css-styles;}}

4. CSS Animation
animation-name - @keyframes-д заасан
нэр
animation-duration – Үргэлжлэх хугацаа
animation-timing-function – Цагийн
функц
animation-delay – Хүлээгдэх хугацаа
animation-iteration-count – Хэдэн удаа
ажиллахыг заана.

5. CSS Animation
animation-direction – Хэрэв html элемент
ямар нэг хөдөлгөөн хийх бол хэрхэн
хөдөлхийг заана.
animation-fill-mode – Анимэшн
хүлээгдэж байх, эсвэл зогссон үед ямар
шинж чанартай байхыг заана.
animation-play-state – Анимэшний
тухайн үеийн төлөвийг заана. Paused |
running

6. @keyframes дэмжих
хөтчүүд

7. @keyframes тодорхойлох
/* Chrome, Safari, Opera */
@-webkit-keyframes хөдөлгөөнт {
from {top: 0px;}
to {top: 100px;}
}
/* Standard syntax */
@keyframes хөдөлгөөнт {
0% {left: 0px;}
100% {left: 100px;}
}

8. Example
div {
width: 100px;
height: 100px;
background-color: #f00;
animation-name: jishee;
animation-duration: 4s;
}

9. Example (cont)
@keyframes jishee {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

10. CSS Multiple Column
Текстийн олон багана хэлбэрт оруулахад
хэрэглэгдэнэ. Бичигдэх хэлбэр:
◦ -webkit-column-count 3; /* Chrome, Safari, Opera
*/
◦ -moz-column-count: 3; /* Firefox */
◦ column-count: 3; /*стандарт бичиглэл*/
column-count - Хэдэн багана болгохыг заана.
column-gap - Багана хоорондын хэмжээг заана.
column-rule-style – Багана хооронд зураас
гаргасан үед зураасны харагдах хэлбэрийг заана.

11. CSS Multiple Column
column-rule-width - Багана хоорондох зураасны
өргөн
column-rule-color - Зураасны өнгө
column-rule - Зураасны өргөн, өнгө, хэлбэрийг
тодорхойлно.
column-span - Олон багана дунд нэгтгэгдсэн
багана оруулах
column-width - Баганы өргөний хэмжээг заана.
columns - дээрх бичиглэлүүдийн богино хэлбэр

12. CSS z-index
Нэгээс олон HTML элемент давхацсан үед
хэрэглэгдэнэ. Ө.х: position: absolute | relative |
fixed үед ашиглана.
Олон элементүүдийн хамгийн наана харагдах
дарааллыг тодорхойлно.