CSS Animation

Вебсайтад хөдөлгөөн оруулах

CSS animation нь таны вэб сайтыг амь оруулдаг гол хүчин зүйл.

CSS Animation properties

animation-name
animation-duration
animation-timing-function
animation delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
@keyframes

animation-name

Animation name дээр хийх гэж байгаа зүйлийн нэрийг өгнө.(Өөрийн хүссэн нэрээ өгч болно)

animation-duration

Animation duration дээр хийх гэж байгаа зүйлийн үргэлжлэх хугацааг өгнө.

animation-timing-function

Animation timing function дээр хийх гэж байгаа зүйлийн хурдыг өгнө.

animation-timing-function нь 5 төрөлтэй.

linear - эхнээс нь дуустал ижил хурдтай

ease - эхлэхдээ удаан, дараа нь хурдан, төгсөхдөө удаан

ease-in - эхлэхдээ удаан

ease-out - төгсөхдөө удаан

ease-in-out - эхлэхдээ удаан, төгсөхдөө удаан

animation-delay

Animation delay дээр хэдэн секундын дараа animation явж эхлэхийг харуулна.

animation-iteration-count

Animation iteration count дээр хэдэн удаа явахыг буюу давтамжийг харуулна.

animation-direction

Animation direction дээр чиглэлийг өгнө.

animation-direction нь 4 төрөлтэй.

normal - урагшаа

reverse - хойшоо

alternate - эхлээд урагшаа, дараа нь хойшоо

alternate-reverse - эхлээд хойшоо, дараа нь урагшаа

animation-fill-mode

Animation fill mode дээр keyframe-ийг загварчилж өгнө.

animation-fill-mode нь 4 төрөлтэй.

none - загвар хэрэглэхгүй

forward - эхний keyframe-ийг загварчлана.

backward - сүүлийн keyframe-ийг загварчлана.

both - эхний болон сүүлийн keyframe-ийг загварчлана.

animation-play-state

Animation play state нь animation-г зогсоох болон ажилуулдаг.

animation-play-state нь 2 төрөлтэй.

paused - animation-г зогсооно.

running - animation-г ажиллуулна.

keyframes

keyframes нь css animation аль шатанд ямар өөрчлөлт орохыг тодорхойлдог.

animation эргэж хөдлөх үед:

animation босоо чиглэлд хөдлөх үед:

example

html css дээр жишээ болгож solar system бичиж үзье.

эхлээд html дээрээ дараах кодыг оруулан нар, дэлхий, сарыг үүсгэе.

css дээрээ container болон sun class-аа дуудна.

Гарах үр дүн:

css дээрээ earth болон moon class-аа дуудна.

Гарах үр дүн:

css дээрээ container болон sun class-аа дуудна.

Гарах үр дүн:

хамгийн сүүлд нь @keyframes-ээ оруулж ирэн хөдөлгөөнд оруулна.

result:

Summary - Дүгнэлт

CSS Animation нь юмсыг хөдөлгөөнд оруулж өгдөг.
CSS дээр animation хийхын тулд зайлшгүй name, duration, timing-function гэх 3 property-г ашигладаг.
animation-name нь нэрийг харуулна.
animation-duration нь үргэлжлэх харуулна.
animation-timing-function нь хурдыг харуулна.
CSS дээр animation хийхын тулд keyframes-г заавал ашиглаж байж хөдөлгөөнд ордог.